使用 Ajax/Javascript 按下按钮时弹出通知弹出窗口
Notification Popup on button press using Ajax/Javascript?
我目前正在制作一个包含通知的网站,但我不太确定如何在按下按钮时显示它们。诸如"显示天气"之类的内容将在底角的某个位置显示通知。
https://i.stack.imgur.com/v8pEd.png
它能做到多难?真的可能吗?
下面是一个通过单击按钮显示天气的示例。使用此插件--- http://simpleweatherjs.com/
.HTML
<div id="weather"></div>
<input type="submit" id="Show" value="Current Weather" />
简讯
// Docs at http://simpleweatherjs.com
$(document).ready(function() {
$("#weather").hide();
$.simpleWeather({
location: 'Nicosia, CY',
woeid: '',
unit: 'f',
success: function(weather) {
html = '<h2><i class="icon-'+weather.code+'"></i> '+weather.temp+'°'+weather.units.temp+'</h2>';
html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
html += '<li class="currently">'+weather.currently+'</li>';
html += '<li>'+weather.wind.direction+' '+weather.wind.speed+' '+weather.units.speed+'</li></ul>';
$("#weather").html(html);
},
error: function(error) {
$("#weather").html('<p>'+error+'</p>');
}
});
});
$("#Show").click(function(){
$("#weather").show();
});
演示
http://jsfiddle.net/LW3S9/4/
这是使用 Jquery UI 的弹出窗口的演示。
http://jsfiddle.net/LW3S9/5/
因此,您将需要单击功能,如果某些特定内容,例如使用插入进行天气。
可以显示。
将click()
用于按钮按下事件。
$("button_reference").click(function(){
// do your notification-related stuff here
});
您可以使用单击事件来显示弹出窗口,如果您需要以某种动画方式发送通知,则可以使用 jQuery Animation
http://jsbin.com/dadiz/1/edit
您可以在 .click()
函数的帮助下显示它,该函数是 jquery 中的内置函数。
$("the_id").click(function(){
//your stuff here
});
在此处查找有关.click()
的更多信息。
相关文章:
- 无法在窗口内使用rootScope.通知
- notify.js没有'如果另一个窗口被聚焦,则不显示通知
- 通知权限被拒绝(桌面推送通知).通知弹出窗口不会't以镀铬显示
- 当子窗口打开并完成加载时得到通知
- Chrome扩展-在全屏视频顶部显示自定义通知/弹出窗口(HTML元素)
- 将窗口推送通知发送到特定通道 URI
- j查询移动弹出窗口/通知
- Javascript 通知解决方案库:桌面、声音、弹出窗口、标题栏闪烁等
- 当用户将鼠标拖到浏览器窗口外并将其释放到浏览器窗口外时,如何获得通知
- 用于在Android上通知用户的弹出窗口
- Vaadin窗口中的关闭通知事件
- 从jQuery中的子窗口向父窗口发出通知
- 向窗口对象-js添加新属性时得到通知
- 如何将通知推送到浏览器窗口
- 当窗口最小化时,提醒用户浏览器内事件——而不是html5通知
- 使用 Ajax/Javascript 按下按钮时弹出通知弹出窗口
- JQuery加载,通知调用窗口
- JavaScript顶级对象列表(窗口,文档,通知,XMLHttpRequest等)
- 点击通知打开弹出窗口
- 从iframe发送POST请求,通知父窗口href