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 相关文章推荐
JS BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 Javascript
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
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学习之 数组声明
2011/06/09 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
React中的refs的使用教程
2018/02/13 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
Python实现CNN的多通道输入实例
2020/01/17 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
PyTorch安装与基本使用详解
2020/08/31 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
2015年试用期自我评价范文
2015/03/10 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript