使用引导程序弹出窗口显示结果 [英] Using bootstrap popover to show result in it
问题描述
这是从开放天气API获取伦敦温度的代码.效果很好
This is the code to get temperature of London from Open weather API. It works fine
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/body.css" />
<meta name="msapplication-tap-highlight" content="no" />
</head>
<body>
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script language="javascript" type="text/javascript">
<!--
function foo(callback) {
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather?q=London",
dataType: 'JSON',
success: callback
});
}
function myCallback(result) {
var temp = JSON.stringify(JSON.parse(result.main.temp));
var Kelvin = 272;
var Centigrade = Math.round(temp-Kelvin);
if (Centigrade <= 25) {
//alert("Temperature : "+Math.round(Centigrade)+" C");
var temp = document.getElementById("temp");
temp.style.fontSize = "20px";
temp.innerHTML = Centigrade+"° C , Cool "+"<img src= \"img/Tlogo2.svg\"/>";
//document.getElementById("temp").innerHTML = Centigrade+"° C , Cool "+"<img src= \"img/Tlogo2.svg\"/>";
}
else if (Centigrade > 25) {
var temp = document.getElementById("temp");
temp.style.fontSize = "20px";
temp.innerHTML = Centigrade+"° C , Cool "+"<img src= \"img/Tlogo3.svg\"/>";
//document.getElementById("temp").innerHTML = Centigrade+"° C , It's Hot !!! "+"<img src= \"img/Tlogo3.svg\"/>";
}
}
</script>
<div style="position: absolute; left: 30px; top: 75px;">
<img src="img/temlogo.svg" width="35" height="35" onclick="foo(myCallback);"/>
</div>
<p id="temp"></p>
</body>
</html>
现在我尝试使用引导程序进行一些漂亮的可视化:
Now I tried with bootstrap for some nice visualization :
<!DOCTYPE html>
<html>
<body>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("[data-toggle='popover']").popover();
});
</script>
</body>
<a href="#" tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Temperature" data-content="40C">Temperature</a>
</html>
这是不可接受的弹出式窗口. 现在我要尝试的是将温度作为弹出元素. IE.如果单击图像按钮，它将触发温度获取功能，然后在弹出框中显示温度和与之相关的图像.所以这是我面临的两个挑战.
It is dissmissable popover. Now what I am trying is I want get temperature as popover element. ie. if I click on image button, it should trigger temperature acquiring function and then show the temperature and the image related to that in popover box. So here is two challenge I am facing.
-
设置图像而不是红色按钮，然后设置温度数据
Setting a image instead of the red button and then temperature data
列表项和图像，即. Tlogo2.svg将出现在该流行音乐中 结束框.
List item and the image ie. Tlogo2.svg to be appeared in that pop over box.
那么有人可以建议如何设置它吗?
So can anyone suggest how to set that?
为进一步说明，我添加了另一个代码.此处的数据内容显示了功能名称.但是我想要函数的结果:
For more clarification I am adding another code. Here in data content shows function name. But I want the result of the function:
<!DOCTYPE html>
<html>
<body>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript">
//Function
function foo(callback) {
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather?q=London",
dataType: 'JSON',
success: callback
});
}
function myCallback(result) {
var temp = JSON.stringify(JSON.parse(result.main.temp));
var Kelvin = 272;
var Centigrade = temp-Kelvin;
alert("Temperature : "+Math.round(Centigrade)+" C");
//document.getElementById("temp").innerHTML = "Temperature : "+Math.round(Centigrade)+" C";
}
$(function() {
$("[data-toggle='popover']").popover(myCallback);
});
</script>
</body>
<a href="#" tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Temperature" data-content= "myCallback(result);" >Temperature</a>
</html>
请帮帮我.
推荐答案
签出此演示.
function foo() {
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather?q=London",
dataType: 'JSON',
success: function(result) {
var temp = JSON.stringify(JSON.parse(result.main.temp));
var Kelvin = 272;
var Centigrade = temp-Kelvin;
var temperature = "Temperature : "+Math.round(Centigrade)+" C";
$('span.temp-val').text(temperature);
}
});
}
$(document).ready(function(){
$(".popover-examples a").popover({
title : 'Weather App',
trigger: 'hover',
template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div><img src="http://lorempixel.com/100/100" /><span class="temp-val">Just an example of inserting image in a Popover...</span></div>'
});
$(".popover-examples a").hover(function() { foo(); })
});
您需要在将触发元素悬停时调用ajax函数.另外，在模板中设置温度的标识符-这样，您可以使用ajax调用将其设置为获得的值.
You need to call the ajax function at hovering the trigger element. Also, set an identifier for the temperature in your template - this way you can set it to the obtained value using the ajax call.
这篇关于使用引导程序弹出窗口显示结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
