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 相关文章推荐
读jQuery之五(取DOM元素)
Jun 20 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
jquery实现checkbox 全选/全不选的通用写法
Feb 22 Javascript
angular简介和其特点介绍
Jan 29 Javascript
js+jquery常用知识点汇总
Mar 03 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
关于JavaScript轮播图的实现
Nov 20 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如何透过ODBC来存取数据库
2006/10/09 PHP
php 操作符与控制结构
2012/03/07 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
Python实现上下班抢个顺风单脚本
2018/02/07 Python
Python with标签使用方法解析
2020/01/17 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
追悼会子女答谢词
2014/01/28 职场文书
小班上学期评语
2014/05/05 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
56句经典英文座右铭
2019/08/09 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript
OpenCV-Python实现轮廓的特征值
2021/06/09 Python
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android