Jquery Dialog的使用说明
2013-04-16 17:07
288 查看
Jquery Dialog的使用说明
1、下载jquery的最新版本jquery.js 下载地址:jquery.com http://code.jquery.com/jquery-1.6.1.min.js
2、下载Jqueryui.com中的对话框的相关文件。
进入网站:http://jqueryui.com/download
选择Widgets中的Dialog,然后下载任意版本就ok了。
3、里面有一个小例子,大家可以按照这个demo进行使用了。
下面简单介绍一下dialog的使用情况。
新建一个html页面,引入相应的jquery.js、jquerui.js、和相应的css文件后(注意如果你不是采用默认的图片的话,需要修改css中图片的路径)。
在body中写如下代码<p id="dialog">this is a dialog</p>。
然后
<script language="javascript" type="text/javascript">
$(document).ready(function(){$("#dialog").dialog();});
</script>
看到了吧,只需要一句话,就可以显示一个消息框,是不是很简单啊 。
至于dialog的其他属性,可以到官方网站查看了。http://jqueryui.com/demos/dialog/。
属性的设置基本上都是$("#dialog").dialog("option","attr","value");
属性获取的方法也很简单:$("#dialog").dialog("option","attr");
还有就是初始化的时候,设置消息框属性:$("#dialog").dialog({attr:value,attr:value....});
慢慢的,你会发现dialog使用起来是如此的强大,如此的简单的。
最后,特别说到一个属性show,在官方网站没有列举他的属性值。在网上找了一下。特别列举到此处。
//example slide,blind,clip,drop,explode,fold,puff,scale,size,pulsate
$("#dialog2").dialog("option","show","pulsate");
给出结果的网站是:http://jsbin.com/uruba
补充20110718
1、进行.net web开发的时候,有时用到jquery dialog。但是dialog中的服务起控件不能使用。
解决办法是:
(1)通过设置dialog的默认设置:open:function(){$("#dialog的ID").parent().appendTo("form:first");}此处的form是指asp:form runat="server" 的form.
(2)也可以在js文件中,把默认dialog加载到form中。jquery默认是加载到body中的。
open: function () {
$("#companyAdd").parent().appendTo("form:first");
$(".ui-dialog-titlebar-close").hide();
}
2、在jquery dialog的默认样式中,怎么去掉关闭按钮呢?
如上:
open:function(){$(".ui-dialog-titlebar-close").hide();}
或者在css中设置.ui-dialog-titlebar的样式。
3、判断dialog是否打开状态方法$("#dialog").dialog("isOpen") 返回true 、false.
if($("#dialog").dialog("isOpen")){
alert("打开状态");
}
else{
alert("关闭状态");
}
1、下载jquery的最新版本jquery.js 下载地址:jquery.com http://code.jquery.com/jquery-1.6.1.min.js
2、下载Jqueryui.com中的对话框的相关文件。
进入网站:http://jqueryui.com/download
选择Widgets中的Dialog,然后下载任意版本就ok了。
3、里面有一个小例子,大家可以按照这个demo进行使用了。
下面简单介绍一下dialog的使用情况。
新建一个html页面,引入相应的jquery.js、jquerui.js、和相应的css文件后(注意如果你不是采用默认的图片的话,需要修改css中图片的路径)。
在body中写如下代码<p id="dialog">this is a dialog</p>。
然后
<script language="javascript" type="text/javascript">
$(document).ready(function(){$("#dialog").dialog();});
</script>
看到了吧,只需要一句话,就可以显示一个消息框,是不是很简单啊 。
至于dialog的其他属性,可以到官方网站查看了。http://jqueryui.com/demos/dialog/。
属性的设置基本上都是$("#dialog").dialog("option","attr","value");
属性获取的方法也很简单:$("#dialog").dialog("option","attr");
还有就是初始化的时候,设置消息框属性:$("#dialog").dialog({attr:value,attr:value....});
慢慢的,你会发现dialog使用起来是如此的强大,如此的简单的。
最后,特别说到一个属性show,在官方网站没有列举他的属性值。在网上找了一下。特别列举到此处。
//example slide,blind,clip,drop,explode,fold,puff,scale,size,pulsate
$("#dialog2").dialog("option","show","pulsate");
给出结果的网站是:http://jsbin.com/uruba
补充20110718
1、进行.net web开发的时候,有时用到jquery dialog。但是dialog中的服务起控件不能使用。
解决办法是:
(1)通过设置dialog的默认设置:open:function(){$("#dialog的ID").parent().appendTo("form:first");}此处的form是指asp:form runat="server" 的form.
(2)也可以在js文件中,把默认dialog加载到form中。jquery默认是加载到body中的。
open: function () {
$("#companyAdd").parent().appendTo("form:first");
$(".ui-dialog-titlebar-close").hide();
}
2、在jquery dialog的默认样式中,怎么去掉关闭按钮呢?
如上:
open:function(){$(".ui-dialog-titlebar-close").hide();}
或者在css中设置.ui-dialog-titlebar的样式。
3、判断dialog是否打开状态方法$("#dialog").dialog("isOpen") 返回true 、false.
if($("#dialog").dialog("isOpen")){
alert("打开状态");
}
else{
alert("关闭状态");
}
相关文章推荐
- jquery.bootstrap.teninedialog.js使用说明
- 在ASP.NET下使用jQuery UI Dialog 无法提交问题
- jquery.timers使用说明
- jQuery验证控件jquery.validate.js使用说明+中文API
- jQuery中parents()的使用说明
- jquery.validate验证使用说明
- jquery.validate.js使用说明——后台添加用户邮箱功能:非空、不能重复、格式正确
- $.format,jquery.format 使用说明
- jquery datetimepicker 日期时间控件的使用及参数说明
- jQuery验证控件jquery.validate.js使用说明+中文API
- jQuery验证控件jquery.validate.js使用说明
- jQuery对象和DOM对象使用说明
- jQuery使用dialog
- 使用 jQuery UI Dialog
- jquery.validate.js使用说明+中文API
- jQuery验证控件jquery.validate.js使用说明+中文API
- jquery.validate使用说明及注意事项
- colpick-jQuery颜色选择器使用说明
- jquery的extend和fn.extend的使用说明
- jQuery验证控件jquery.validate.js使用说明+中文API