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下操作HTML控件的实现代码
Jan 12 Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
5 种JavaScript编码规范
Jan 30 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
js实现时间日期校验
May 26 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 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程序--记数器
2006/10/09 PHP
php中iconv函数使用方法
2008/05/24 PHP
php打造属于自己的MVC框架
2012/03/07 PHP
PHP 透明水印生成代码
2012/08/27 PHP
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
常用参考资料(手册)下载或者链接
2006/07/22 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
js返回顶部实例分享
2016/12/21 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
Python3 入门教程 简单但比较不错
2009/11/29 Python
Python批量修改文件后缀的方法
2014/01/26 Python
python实现用户登陆邮件通知的方法
2015/07/09 Python
python写一个md5解密器示例
2018/02/23 Python
Python实现图片拼接的代码
2018/07/02 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
python第三方库学习笔记
2020/02/07 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
python中setuptools的作用是什么
2020/06/19 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
Bootstrap 学习分享
2012/11/12 HTML / CSS
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
上课迟到检讨书
2014/01/19 职场文书
应届大学生求职信
2014/07/20 职场文书