- 浏览: 331757 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (59)
- wicket (1)
- java (24)
- js (27)
- xml (3)
- Android (1)
- 服务器 (7)
- 数据库 (7)
- spring (1)
- hibernate (1)
- ssh (6)
- web (25)
- oracle (1)
- 函数 (2)
- mysql (1)
- 手机 (6)
- javascript (21)
- session (3)
- cookie (4)
- struts (1)
- ngnix (1)
- 软件使用 (2)
- linux (1)
- vi (1)
- 前端 (6)
- javascrip (2)
- html (3)
- js css (2)
- 正则 (1)
- ajax (1)
- toast (1)
- 消息提示 (1)
- 确认弹窗 (1)
- springmvc (1)
- 倒计时 (1)
最新评论
-
wenm168:
美观的图片上传前预览效果:http://www.anyrt.c ...
JavaScript 图片的上传前预览(兼容所有浏览器) -
口弦1992:
我的ie9并没有图片预览出来啊。
JavaScript 图片的上传前预览(兼容所有浏览器) -
axie1234567:
分享的东西很有用。
java web中实现同一帐号同一时间只能一个地点登陆(类似QQ登录的功能) -
wyl4728:
32个赞
mysql函数大全 -
yu_long:
seeker.getCountry(ip);
解析出来的 ...
根据IP地址获取所在地
1. jquery.ui.dialog
官方地址
http://jqueryui.net/dialog/
jquery.ui.dialog是一个非常灵活的模式框,它的官方地址为: http://docs.jquery.com/UI/Dialog
API
2. 文件引用
要使用jquery.ui.dialog,需要引用两个文件,1个是js,另外1个是css
在contentpage中添加
<script type="text/javascript" src="/Content/ui.js"></script>
在masterpage中添加
<link href="jquery-ui.css" rel="stylesheet" type="text/css">
3. 使用方法
jquery.ui.dialog相比thinkbox要有优势,thinkbox是在$.ready中指定的,导致不能灵活的扩展弹出层的弹出时机,针对一个逻辑判断,一种情况下弹出,另外一种不弹出,thinkbox就缺乏应变能力,而jquery.ui.dialog()采用 $('..').dialog(..);的方式使得弹出更加灵活
1)弹出简单的对话框
$("#dialog").dialog();
2)弹出模式对话框
$("#dialog").dialog({ modal: true });
3)弹出模式对话框,并有遮罩效果
$("#dialog").dialog({ modal: true, overlay: { opacity: 0.5, background: "black" } });
4)带确定与取消按钮
$("#dialog").dialog({ buttons: { "Ok": function() { alert("Ok"); }, "Cancel": function() { $(this).dialog("close"); } } });
5)如何关闭对话框
$("#dialog").dialog("close");
<!DOCTYPE html> <html> <head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script> $(document).ready(function() { $("#dialog").dialog(); }); </script> </head> <body style="font-size:62.5%;"> <div id="dialog" title="Dialog Title">I'm in a dialog</div> </body> </html>
2. jQuery boxy
使用该jQuery插件
要想使用该jQuery插件,需要把$(selector).boxy();放在document.ready中。使用合适的选择器表达式替换这里的"selector",例如:"a[rel=boxy],form.with-confirmation"。这会给匹配的元素附加一些行为,如下:
- 一个href属性中如果锚点包含#,则此锚点相对应的ID的DOM元素的内容就会被添加到boxy对话框中。
- 如果href锚点内容为其他一些东西,则会试图使用Ajax载入其对应的内容。理想情况下,我们有相同的起源检查和委托对框架的跨域请求。这将会在下面展示。
- 表单上会显示一个提交模式的确认消息。
2使用方法
使用下载包中的三个文件!
<script type ="text/javascript " src ="../js/jquery.boxy.js "> </script>
<link rel ="stylesheet " href ="../css/boxy.css " type ="text/css " />
基本的插件用法
请注意,boxy对话框自动计算出您的内容区域内本身的大小和位置,没有必要明确规定了包装集的尺寸。
<link rel ="stylesheet " href ="../css/common.css " type ="text/css " /> |
具体内容见http://www.zhangxinxu.com/study/200911/jQuery-plugin-boxy.html 官方网站见http://onehackoranother.com/projects/jquery/boxy/
- jquery-plugin-boxy.zip (37 KB)
- 下载次数: 31
- jquery-ui-1.8.16.custom.zip (1 MB)
- 下载次数: 19
发表评论
-
简单倒计时模板插件
2017-07-12 12:01 595Countdown.js (function() { ... -
简单上传文件插件
2017-07-12 11:46 628team777.upload.js js: ; ... -
简单数字键盘
2017-07-12 11:20 569好久没有写博客了,最近有个需求关于数字键盘的,找了下网上的 ... -
简化的原生ajax
2015-03-23 14:25 594/* * * path: seaAjax.js ... -
简单入门-JavaScript正则表达式
2015-03-23 14:19 818什么是正则表达式?这个问题可以参见:“正则表达式30分钟入门 ... -
Fxtpl v1.0 繁星前端模板引擎(非原创)
2014-08-18 13:48 3077Fxtpl 全新的JS模板引擎 Download t ... -
利用html5进行城市定位!aqi指数的获取
2014-07-08 17:52 21356<html><head> < ... -
seajs打包部署工具spm的使用总结
2014-06-30 14:22 906相信使用seajs的好处大家都是知道的,接触seajs好像 ... -
javaScript的性能优化
2014-01-17 14:05 1234随着网络的发展,网速 ... -
秒杀倒计时控件
2014-01-17 11:20 3133/** * User: yongwang * Da ... -
Nginx 下缓存静态文件(如css js)(转)
2013-05-31 13:48 13907目的:缓存nginx服务器的静态文件。如css,js, ... -
百度地图API文档
2012-11-13 18:31 1095sdfsfsdf -
JavaScript 图片的上传前预览(兼容所有浏览器)
2012-10-11 09:17 52466功能描述 通过 JavaScript 实现图片的 ... -
实现局部图片的懒加载
2012-08-31 14:52 5451此方式适用和iscroll结合使用,若用于普 ... -
iscroll实现图片的循环滑动
2012-08-31 10:19 2200<div class="gexian" ... -
iScroll框架的修改
2012-06-29 16:05 1782最近做的一个项目,用到了iScroll框架,在使用过程中 ... -
客户端元素滑动和滚动效果实现
2012-06-29 15:55 2714最近一直在搞一些有关元素动态展示的功能,这么做是为了增加 ... -
iScroll 左右滑动的时候,阻止上下滑动e.preventDefault()
2012-06-29 15:54 11775scroll.js 触屏手机 滚动效果代码库! 很不错 ... -
iscroll介绍
2012-06-12 18:52 0参考 http://hi.baidu.com/xiaowuph ... -
JS页面跳转和js对iframe进行页面跳转、刷新
2012-04-17 10:48 3965一、JS方式的页面跳转1.window.loc ...
相关推荐
插件描述:jquery弹出框插件dialogbox. 参考示例:http://www.jq22.com/jquery-info4987
本文实例讲述了jquery弹出框插件jquery.ui.dialog用法。分享给大家供大家参考,具体如下: 1. jquery.ui.dialog 官方地址 http://jqueryui.net/dialog/ jquery.ui.dialog是一个非常灵活的模式框,它的官方地址为: ...
里面是经过修改的jquery.ui.dialog.js(版本jQuery UI Dialog 1.8.12),添加了parentElement: 'body',详情查看http://forum.jquery.com/topic/dialog-will-move-its-div-tag-to-body
添加按钮弹出层jqueryui实现,dialog
两个版本:一个替换ui close按钮,对三个按钮设立同样css;一个不替换,修改ui的css文件;完美打开多个对话框,并可以分别控制最大最小关闭。jquery文件没有包含进来。
18、jQuery弹出对话框jQuery插件Dialog
Jquery UI dialog 详解 (弹出层) 包含jquery弹出层的详细介绍,以及代码用例
(一)首先来说jQuery UI使用频率较高dialog组件: dialog就是我们常说的弹出层,应用还是比较广泛的,比如:可以使用弹出层做登录、注册和消息提示等功能 下面来详细说说dialog的使用方法 ………… ……………… ...
jquery Dialog 弹出框 上一个项目就是用的这个 很漂亮很实用
jquery 弹出窗口插件,包含js中的 alert confirm open 等。
最新官方jQuery UI插件 主流特效Demo,绝不含糊。 好东西不需要过多的言辞修饰,下了就知道! 所有效果说明: 基本的鼠标互动: 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种...
jQuery dialog对话框插件点击弹出对话框代码 jQuery dialog对话框插件点击弹出对话框代码
jQuery插件 dialog非常不错的弹出框控件
一个想当漂亮的jquery提示框:jQuery Modal Dialog弹出对话框插件,可用它实现各种的网页提示效果,比如错误提示框、警告框、操作提示框等,暖色调界面,使用方法简单,参考本例所展示的各种提示框生成办法,就可...
简单的jquery dialog实现插件,使用简单,自行修改样式
NULL 博文链接:https://taotie119.iteye.com/blog/2075536
jquery.dialog.js 是jquery 最经典的弹出框插件,简单易用,亲测可用,附案例代码
jQuery对话框Dialog弹出层插件演示与使用说明
formValidator代码生成器+jQuery+formValidator+jquery.ui.dialog