基于jquery-ui动态四种弹出框。
>alert框
>confirm框
>模态dialog框
jquery-mybox.js
// JavaScript Document
jQuery.extend(jQuery, {
// jQuery UI alert弹出提示
jqalert: function(text, title, fn) {
var html =
'<div class="dialog" id="dialog-message">' +
' <p>' +
//' <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 0 0;"></span>' + text +
' <span style="float: left; margin: 0 7px 0 0;"></span>' + text +
' </p>' +
'</div>';
$(html).dialog({
resizable: false,
modal: true,
show: {
effect: 'fade',
duration: 300
},
open: function ()
{
//$(this).load('../test.html');
},
title: title || "提示信息",
buttons: {
"确定": function(){
var dlg = $(this).dialog("close");
fn && fn.call(dlg);
}
},
close:function(event, ui){
$(this).dialog("destroy");
$("#dialog-message").remove();
}
});
},
// jQuery UI confirm弹出确认提示
jqconfirm: function(text, title, fn1, fn2) {
var html =
'<div class="dialog" id="dialog-confirm">' +
' <p>' +
//' <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>' + text +
' <span style="float: left; margin: 0 7px 20px 0;"></span>' + text +
' </p>' +
'</div>';
return $(html).dialog({
//autoOpen: false,
resizable: false,
modal: true,
show: {
effect: 'fade',
duration: 300
},
title: title || "提示信息",
buttons: {
"确定": function() {
var dlg = $(this).dialog("close");
fn1 && fn1.call(dlg, true);
},
"取消": function() {
var dlg = $(this).dialog("close");
fn2 && fn2(dlg, false);
}
},
close:function(event, ui){
$(this).dialog("destroy");
$("#dialog-confirm").remove();
}
});
},
// jQuery UI 模态dialog框
jqmybox:{
show:function(myurl,mytitle,myheight,mywidth) {
var html = '<div class="dialog" id="dialog-mybox"></div>';
$(html).dialog({
resizable: false,
height: myheight,
width: mywidth,
modal: true,
show: {effect: 'fade',duration: 300},
open: function(){$(this).load(myurl);},
title: mytitle,
//buttons: dlgbtns,
close:function(event, ui){
$(this).dialog("destroy");
$("#dialog-mybox").remove();
}
});
},
hide:function(){
$("#dialog-mybox").dialog("close");
}
},
})
分享到:
相关推荐
各种界面特效、表单 弹出框、日历、各种tree 等等
│ layer layer弹出层插件 │ laytpl JavaScript模板引擎 │ My97DatePicker 日期插件 │ Validform 表单验证插件 │ zepto zepto库 │ ueditor 百度编辑器 │ Highcharts 图表插件 │ ...
一个基于jQuery的ui框架,包含弹出框,表单验证,日期,选项卡等。使用简单,效果绚丽,是一个很好用的jQuery插件
jQuery UI 是一套 jQuery 的页面 UI 插件,包含很多种常用的页面空间,例如 Tabs(如本站首页右上角部分) 、拉帘效果(本站首页左上角)、对话框、拖放效果、日期选择、颜色选择、数据排序、窗体大小调整等等非常多...
闲来无事,用jquery模拟了一个下拉框,可以通过输入框对下拉列表进行过滤. 原理: 1.下拉框由div和文本框...jquery-ui 1.8 实现见附件,已经在IE8下测试. 无积分的可在iteye上下载 http://lic0112.iteye.com/blog/1679312
jQuery弹出层弹出框效果,现代网站开发前端必不可少的特效源码。
│ layer layer弹出层插件 │ laytpl JavaScript模板引擎 │ My97DatePicker 日期插件 │ Validform 表单验证插件 │ zepto zepto库 │ ueditor 百度编辑器 │ Highcharts 图表插件 │ dataTables 表格排序,...
两个小巧的jquery插件jGrowl和Impromptu。一个做出不同效果的alert弹出框。另一个弹出应用窗口。都很实用。
可拖拽的bootstrap弹出窗口结合jquery-ui实现的弹出和拖拽效果。
主要介绍了jquery弹出框插件jquery.ui.dialog用法,结合实例形式分析了弹出框插件jquery.ui.dialog的功能、下载、使用方法与相关注意事项,需要的朋友可以参考下
jquery右下角提示框插件,很好用,有类似需求的同志可以下载下来看一下
jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难,只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如:我想要这里是弹出浮动遮罩层</div> 并随页面...
两个版本:一个替换ui close按钮,对三个按钮设立同样css;一个不替换,修改ui的css文件;完美打开多个对话框,并可以分别控制最大最小关闭。jquery文件没有包含进来。
jquery-lwd是一款轻量级的基于jQuery UI的模拟windows窗口插件。该插件可以模拟windows窗口,对窗口进行最大化,最小化,拖动等操作。并提供windows2000经典主题效果。
本篇文章是对Jquery中LigerUi的弹出编辑框的实现方法进行了分析介绍,需要的朋友可以参考下
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内...使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富。与jQue
jquery自动调整提示框显示位置,触发事件,返回提示框应该显示的位置
jquery ui demo 样式 皮肤 特效 丰富的样式 布局 弹出框
JQuery UI Dialog 弹出框以及清楚数据