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使用include/require
Nov 13 Javascript
javascript常用方法汇总
Dec 02 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
canvas仿iwatch时钟效果
Mar 06 Javascript
jQuery代码优化方法总结
Jan 29 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
vue.js 使用原生js实现轮播图
Apr 26 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中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
原创javascript小游戏实现代码
2010/08/19 Javascript
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
JS实现打字游戏
2019/12/17 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
python 中文字符串的处理实现代码
2009/10/25 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
Python下载网络小说实例代码
2018/02/03 Python
python实现彩票系统
2020/06/28 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
Python configparser模块操作代码实例
2020/06/08 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
介绍下Lucene建立索引的过程
2016/03/02 面试题
最新奶茶店创业计划书范文
2014/02/08 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
火箭队口号
2014/06/18 职场文书
运动会闭幕词
2015/01/28 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
田径运动会广播稿
2015/08/19 职场文书
微信小程序实现聊天室功能
2021/06/14 Javascript
SpringBoot快速入门详解
2021/07/21 Java/Android
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL