jQuery boxy弹出层插件中文演示及使用讲解


Posted in Javascript onFebruary 24, 2011

使用该jQuery插件
要想使用该jQuery插件,需要把$(selector).boxy();放在document.ready中。使用合适的选择器表达式替换这里的"selector",例如:"a[rel=boxy],form.with-confirmation"。这会给匹配的元素附加一些行为,如下:

一个href属性中如果锚点包含#,则此锚点相对应的ID的DOM元素的内容就会被添加到boxy对话框中。
如果href锚点内容为其他一些东西,则会试图使用Ajax载入其对应的内容。理想情况下,我们有相同的起源检查和委托对框架的跨域请求。这将会在下面展示。
表单上会显示一个提交模式的确认消息。
其他的元素将会被忽略

手动创建实例

用手动模式使用boxy是很容易的——只需要创建一个boxy的新实例,传递一些内部的内容和任何附加的散列对象。在默认情况下,对话框会立即显示出来,在视角的中心,可拖拽。所有的这些设置都可以通过给构造函数传递附加的对象来进行覆盖——更多详情请参见下面的构造函数选项

传递给构造函数的内容可以是任何有效的参数,jQuery的$()函数- DOM元素,是HTML片断或其他jQuery对象。无论提供的是什么,其display属性均被设置为block,并插入名为boxy-content的class在对话框中。

下面为一些代表性的示例:

  • 创建一个新的对话框,new Boxy("<p>内容……</p>", {title: "对话框"});。
  • 创建一个新对话框,无法拖拽。new Boxy("<p>内容……</p>", {title: "对话框", draggable: false});。
  • 创建一个新的对话框,没有默认的关闭按钮。new Boxy("<p>内容……</p>", {title: "对话框", closeable:false});。
  • 新建对话框,使用absolute绝对定位(跟随滚动条)new Boxy("<p>内容……</p>", {title: "对话框, fixed:false"});。
  • 新建对话框,模态的new Boxy("<p>内容……</p>", {title: "对话框, modal:true"});。
  • 新建对话框,自定义行为new Boxy("<p>内容……</p>", {behaviours: function(r) { $(r).hover(function() { $(this).css("background-color", "red"); }, function() { $(this).css("background-color", "white"); }); }});。

修改现有的对话(先打开一个对话框,然后再单击下面的链接事件)

  • 让最新的对话框放大的动画 - someDialog.tween(400, 400);
  • 让最新的对话框减小的动画 - someDialog.tween(100, 100);
  • 获取最新的对话框的标题 - someDialog.getTitle();。
  • 更改最新的对话框的标题 - someDialog.setTitle("新标题");
Javascript 相关文章推荐
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
Node.js返回JSONP详解
May 18 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 Javascript
React手稿之 React-Saga的详解
Nov 12 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
微信小程序textarea层级过高的解决方法
Mar 04 Javascript
jquery的键盘事件修改代码
Feb 24 #Javascript
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 #Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 #Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
Feb 23 #Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 #Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 #Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
Feb 23 #Javascript
You might like
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
短信提示使用 特效
2007/01/19 Javascript
Prototype Selector对象学习
2009/07/23 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
python中while循环语句用法简单实例
2015/05/07 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
python中get和post有什么区别
2020/06/19 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
汽车销售顾问求职自荐信
2014/01/01 职场文书
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
企业党建工作总结2015
2015/05/26 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
周末问候语大全
2015/11/10 职场文书
深入详解JS函数的柯里化
2021/06/09 Javascript
Python+Appium自动化测试的实战
2021/06/30 Python
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL