jquery boxy插件
要想使用该jQuery插件,需要把$(selector).boxy();放在document.ready中。使用合适的选择器表达式替换这里的"selector",例如:"a[rel=boxy],form.with-confirmation"。这会给匹配的元素附加一些行为,如下:
- 一个href属性中如果锚点包含#,则此锚点相对应的ID的DOM元素的内容就会被添加到boxy对话框中。
- 如果href锚点内容为其他一些东西,则会试图使用Ajax载入其对应的内容。理想情况下,我们有相同的起源检查和委托对框架的跨域请求。这将会在下面展示。
- 表单上会显示一个提交模式的确认消息。
- 其他的元素将会被忽略
试试下面的演示:
1.锚点#对应ID的内容(div#foobar)
2.远程内容(加载同文件夹下的test.html)
3.以确认框方式提交
基本的插件用法
请注意,boxy对话框自动计算出您的内容区域内本身的大小和位置,没有必要明确规定了包装集的尺寸。
此插件方法理解单一选项,其他任何选项被传递给了boxy的构造函数(参见下面的构造函数选项),或是用于Ajax操作,Boxy.load 。
- 选项
- 描述
- 默认
- message
- 显示在对话框上的文字信息
- 请确认:
此外,每个匹配锚title属性将被用来作为其相应的对话框的标题。
用手动模式使用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("新标题");
请注意,标题栏(也就是关闭按钮和拖动器)只有在标题指定的情况下会出现,在未来,这种行为可能会发生变化,使标题栏始终存在,除非特别禁用。
一旦您创建了一个实例,您可以将通过提供的API分配给一个变量,随后移动,改变大小,显示和隐藏 - 记录如下。
提问
使用Boxy.ask(),Boxy.alert()和Boxy.confirm()这些帮手可能提示用户从一些选项中进行选择以及完成可选的回调函数。点击下面含有演示的链接,参考API文档获取更多信息。
- 提问 - Boxy.ask() - 用户定义的选项,选择项传递给回调函数
- 弹出 - Boxy.alert() - 回调函数总是不被调用
- 确认 - Boxy.confirm() - 仅当用户选择了“确认”时回调函数会被调用
Boxy.load(url, options)
- 类型 - HTTP方法,默认为GET
- 缓存 - 如果是true,缓存内容连续通话。相当于缓存选项传递到jQuery的Ajax方法。默认:false。
- 过滤 - jQuery的表达式,用于过滤远程内容。
Boxy.get(element)
<a href="#" onclick="Boxy.get(this).hide();">关闭对话框</a>
Boxy.ask(question, answers, callback, options)
Boxy.alert(message, callback, options)
注意:此方法并不是为了取代浏览器本地window.alert()函数提供,因为它没有能力阻止程序执行,在对话框是可见的时候。
Boxy.confirm(message, callback, options)
注意:此方法并不是为了取代浏览器提供的本地window.confirm()函数,因为它没有能力在对话框可见时阻止程序执行的。
Boxy.linkedTo(ele)
Boxy.isModalVisible()
new Boxy(element, options)
estimateSize()
getSize()
getContentSize()
getPosition()
getCenter()
getInner()
getContent()
setContent(newContent)
moveTo(x,y)
centerAt(x,y)
center(axis)
resize(w,h,after)
tween(w,h,after)
isVisible()
show()
hide(after)
toggle()
hideAndUnload(after)
unload()
toTop()
getTitle()
setTitle(t)
- 选项
- 描述
- 默认
- title
- 显示在自动生成标题栏上的标题
- null
- closeable
- 是否一个关闭对话框的驱动器要添加到自动生成标题栏上。如果标题没有指定是没有影响的。
- true
- closeText
- 在可用情况下标题栏关闭链接的文字
- "[关闭]"
- draggable
- 是否对话框可以通过标题栏进行拖拽。标题未指定没有影响。
- true
- clone
- 内部区域的元素以及事件处理程序应不应该在被替换之前进行复制。
- false
- actuator
- DOM元素(不包括jQuery对象),引发此对话框。两者之间的联系将被建立,此联系允许对话框的参照稍后在通过执行Boxy.linkedTo(element)获取的元素中进行检索。当对话框被卸载,此联系也会被自动切断。
- null
- center
- 对话框是否屏幕中心显示
- true
- fixed
- 是否使用固定定位(fixed)而不是绝对定位(absolute),固定定位的对话框不受浏览器滚动条影响。IE6不支持固定定位,其永远表现为绝对定位。
- true
- show
- 对话框是否需要立即显示,如果是false,则需要你手动调用dialog.show()以显示对话框。
- true
- modal
- 对话框是否设置为模态。模态时,浏览器背景“黑黑的”,阻止页面的其他元素接受事件。
- false
- x
- 对话框的x(left)坐标
- 50
- y
- 对话框的y(top)坐标
- 50
- unloadOnHide
- 如果是true,则在此对话框隐藏后会被卸载(如从DOM中删除)
- false
- clickToFront
- 如果是true,则单击对话框的任意位置(只是相对于标题栏),会导致其跑到顶部。
- false
- behaviours
- 函数用来申请对话框内容的自定义行为。每次调用setContent(),且在Boxy对象中的上下文中执行,将接受一个包含内容区域的jQuery对象作为参数。
- function(r){}
- afterDrop
- 当对话框放下的时候在Boxy对象的上下文执行回调函数。
- function(){}
- afterShow
- 当对话框显示的时候在Boxy对象的上下文执行回调函数。能够用来使表单的文本框获取焦点。
- function(){}
- afterHide
- 当对话框隐藏的时候在Boxy对象的上下文执行回调函数。
- fuuction(){}
- beforeUnload
- 在对话框卸载前在Boxy对象的上下文执行回调函数。
- function(){}
可以通过css完全定制对话框的外观,这里的是您可能感兴趣的选择器列表。
.boxy-wrapper .title-bar
.boxy-wrapper .title-bar h2
.boxy-wrapper .title-bar.dragging
.boxy-wrapper .title-bar .close
.boxy-inner
.boxy-content
.boxy-wrapper .question
.boxy-wrapper .answers
.close
jquery boxy插件相关推荐
- jQuery.fly插件实现添加购物车抛物线效果
样例 使用电商 APP 购买商品时,很多都有上图的红色小球抛物线效果,下面通过 jQuery.fly 插件来实现一个简单 Demo. 实现 简单思路: 确定抛物线的起始和终止位置: 通过 js 在起始 ...
- jquery倒计时插件可自定义多个倒计时间
jquery倒计时插件设置多个自定义倒计时时间,任意设置天.小时.分钟.秒倒计时间功能. 查看演示>> <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- jQuery 表格插件汇总
本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等.这 ...
- 超强的jquery极品插件--色彩选择器类/ 右键菜单类/ 图片新闻flash展示类
Farbtastic Farbtastic是一个color picker插件.它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框. Farbtastic jQu ...
- JQuery模板插件jquery.tmpl-动态ajax扩展
在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件.有时我们需要去动态的ajax去加载模板,或者数据,根据url参数或者其他信息加载不同的模板,数据.在我的某个项目中有这个需求,所以 ...
- ajax异步后台存放购物车表,jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)...
本文实例讲述了jQuery购物车插件jsorder用法.分享给大家供大家参考,具体如下: JSORDER 案例 案例一:我的菜单(点击菜名即可加入菜单) 红烧豆腐 12元 毛血旺 32元 套餐:京酱肉 ...
- java ajax jquery分页插件_JQueryPagination分页插件,ajax从struts请求数据
2017-07-16 学完了struts2,做了个关于分页的小例子,用到了JQuery分页插件Pagination,先贴下插件下载地址 插件作者对于参数讲解的不够详细,琢磨了半天才明白怎么用,不多说, ...
- 超强1000个jquery极品插件!(连载中。。。。最近更新20090710)
花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...
- 为jQuery写插件
很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过"$( "#slider" ).slider();"的方式 ...
- html 表格过滤功能,简单的带排序和过滤功能的jQuery表格插件
smart-table是一款简单实用的带排序和过滤功能的jQuery表格插件.该jQuery表格插件通过简单的设置就可以生成表格排序.表格字段过滤功能,甚至可以实现表格分页显示,使用非常方便. 使用方 ...
最新文章
- Missing artifact com.github.pagehelper:pagehelper:jar:3.4.2-fix的解决方法
- 数据类型及pythop运算符号
- boost::allocator_value_type的实例
- Java微信公众平台开发--番外篇,对GlobalConstants文件的补充
- How is XSRF token retrieved from backend
- 计算机无法创建新文件夹,无法创建文件,教您无法新建文件夹怎么办
- 红橙Darren视频笔记 面试题 为什么view获取宽高为0 onCreate onResume view.post源码浅析(继承activity api27)
- android 系统(85)---MAT 工具使用
- eplan单线原理图多线原理图_EPLAN-文本
- 【AI视野·今日CV 计算机视觉论文速览 第151期】Tue, 6 Aug 2019
- 网页三维地图技术初探
- 平台接口权益分享源码
- 【基础篇】Redis深入理解与实践指南(一)之Redis的前世今生
- Activity的生命周期和启动模式--Activity的生命周期的全面分析
- 史上最牛总结!电源完整性设计请看这一篇
- java中jar包怎么下载
- ECCV2020:夜晚深度图估计
- Win10系统重装 华硕笔记本电脑
- 虹科教您 | KPA Automation softPLC入门操作指南(1)
- android和ios占有率2018,微博发布2018手机报告:苹果依旧为占有率最高品牌