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 相关文章推荐
浅谈JavaScript中面向对象技术的模拟
Sep 25 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
js实现二级联动简单实例
Jan 11 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中长文章分页显示实现代码
2012/09/29 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
jQuery 使用手册(二)
2009/09/23 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
基于javaScript的this指向总结
2017/07/22 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python实现对象转换为xml的方法示例
2017/06/08 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
python实现滑雪者小游戏
2020/02/22 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
纯HTML5+CSS3制作图片旋转
2016/01/12 HTML / CSS
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
师范应届生求职信
2013/11/15 职场文书
受欢迎的大学生自我评价
2013/12/05 职场文书
企业领导对照检查材料
2014/08/20 职场文书
导游词范文
2015/02/13 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
出生证明范本
2015/06/15 职场文书