道招

jQuery boxy弹出层插件简介

使用该jQuery插件 要想使用该jQuery插件,需要把$(selector).boxy();放在document.ready中。使用合适的选择器表达式替换这里的"selector",例如:"a[rel=boxy],form.with-confirmation"。这会给匹配的元素附加一些行为,如下:
  • 一个href属性中如果锚点包含#,则此锚点相对应的ID的DOM元素的内容就会被添加到boxy对话框中。
  • 如果href锚点内容为其他一些东西,则会试图使用Ajax载入其对应的内容。理想情况下,我们有相同的起源检查和委托对框架的跨域请求。这将会在下面展示。
  • 表单上会显示一个提交模式的确认消息。
  • 其他的元素将会被忽略
  • jQuery boxy弹出层 API(应用编程接口) Boxy.load(url, options) 以一个URL加载内容并以Boxy对话框的形式展现。支持以下的一些选项参数:
  • 类型 - HTTP方法,默认为GET
  • 缓存 - 如果是true,缓存内容连续通话。相当于缓存选项传递到jQuery的Ajax方法。默认:false。
  • 过滤 - jQuery的表达式,用于过滤远程内容。
  • (任何其他指定的选项将被传递到boxy的构造函数中) Boxy.get(element) 返回包含元素的实例,例如:关闭对话框 Boxy.ask(question, answers, callback, options) 显示模式,即非可关闭对话框,允许用户选择选项。问题是要显示给用户的信息。答案是一个数组或一切可能的回答的数列。回调函数将收到选定的回答,这是否是需要的值或相应的密钥要根据一个数组或答案数列是否已经提供了。options是一种额外的可选设置选项传递给对话框的构造函数。 Boxy.alert(message, callback, options) 显示模式,非可关闭对话框显示消息给用户。 注意:此方法并不是为了取代浏览器本地window.alert()函数提供,因为它没有能力阻止程序执行,在对话框是可见的时候。 Boxy.confirm(message, callback, options) 显示模式,非可关闭对话框显示的含有确定和取消按钮的消息。回调只会在用户选择了“确定”时被调用。 注意:此方法并不是为了取代浏览器提供的本地window.confirm()函数,因为它没有能力在对话框可见时阻止程序执行的。 Boxy.linkedTo(ele) 返回已通过执行器构造函数选项连接DOM元素的boxy实例。 Boxy.isModalVisible() 返回true如果任何模式对话框是当前可见的,否则返回false。 new Boxy(element, options) 构造函数;创建一个新的boxy对话框。element是对话框的内容;任何有效的参数,jQuery的$()函数在这里也是有效的。options是一个配置选项的散列,见下面详细的资料。 estimateSize() 当对话框不可见的时候估计其大小。如果当前对话框可见,不要使用此方法,使用getSize()代替。 getSize() 以数组的形式[width, height]返回对话框的大小。 getContentSize() 返回对话框内容区域的大小。默认情况下,指在对话框框架里的一切,不包括标题栏。 getPosition() 以[x,y]数组形式返回最顶层对话框的左上角坐标。 getCenter() 以[x,y]数组形式返回最顶层对话框的中心点的坐标。 getInner() 返回一个jQuery对象包装对话框的内部区域-框架内包括标题栏一切。 getContent() 返回一个jQuery对象包装对话框的内容区域-框架内的一切,不包括标题栏。 setContent(newContent) 设置对话框中的内容,任何对$()有效的参数也对设置的新内容有效。可链接。 moveTo(x,y) 移动对话框到左上角为(x,y)的位置,可链接。 centerAt(x,y) 把对话框移动到中心坐标为(x,y)的位置上。 center(axis) 移动对话框,使其在视野的中央。可选参数axis可以是"x","y"中的任意一个中心轴。可链接。 resize(w,h,after) 重新调整对话框的高宽到[w,h],完成后执行回调函数,回调函数将接受Boxy实例作为参数。可链接。 tween(w,h,after) 动画补间对话框高宽到[w,h],完成后执行回调函数,回调函数将接受Boxy实例作为参数。可链接。 isVisible() 如果当前对话框可见,则返回true,否则返回false。 show() 显示对话框,可链接。 hide(after) 隐藏对话框,after为可选回调函数,完成后执行。可链接。 toggle() 触发对话框的显隐属性。可链接。 hideAndUnload(after) 在隐藏后立即执行卸载。在卸载之前执行after回调函数。可链接。 unload() 从DOM中删除对话框,切断其与执行机构的联系,如果有的话。一旦出现一个对话框已被卸载它的任何进一步行动都是未定义的。 toTop() 将当前对话框移动到其他所有对话框的上部。可链接。 getTitle() 以HTML的形式返回对话框的标题。 setTitle(t) 设置对话框的标题为t,可链接。 完整的构造函数选项列表 选项描述默认 title显示在自动生成标题栏上的标题null closeable是否一个关闭对话框的驱动器要添加到自动生成标题栏上。如果标题没有指定是没有影响的。 true closeText在可用情况下标题栏关闭链接的文字"[关闭]" draggable是否对话框可以通过标题栏进行拖拽。标题未指定没有影响。true clone内部区域的元素以及事件处理程序应不应该在被替换之前进行复制。false actuatorDOM元素(不包括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选择器 可以通过css完全定制对话框的外观,这里的是您可能感兴趣的选择器列表。 .boxy-wrapper .title-bar div包装的自动生成的标题栏 .boxy-wrapper .title-bar h2 标题栏的内容 .boxy-wrapper .title-bar.dragging 拖拽时候的标题栏 .boxy-wrapper .title-bar .close 默认的关闭对话框的执行器 .boxy-inner 内部区域,包括标题栏 .boxy-content 内部区域,不包括标题栏。这个class类将被自动添加到传递给Boxy的构造函数的任何元素。 .boxy-wrapper .question 通过Boxy.ask()创建的,包含问题文字 .boxy-wrapper .answers 通过Boxy.ask()创建的,包含应答的按钮 .close 这一class类的任何内容的单击事件将关联到关闭对话框上。
    转载原文点此进入

    webpack笔记——在html-webpack-plugin插件中提供给其它插件是使用的hooks

    从vuecli3学习webpack记录(四)vue是怎么进行默认配置的

    webpack笔记——hook执行时call的是什么

    从vuecli3学习webpack记录(二)webpack分析

    从vuecli3学习webpack记录(零)整体流程

    关注道招网公众帐号