• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery boxy弹出层插件中文演示及使用讲解

jQuery boxy弹出层插件中文演示及使用讲解

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了jQuery,boxy,弹出层等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
使用该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("新标题");

请注意,标题栏(也就是关闭按钮和拖动器)只有在标题指定的情况下会出现,在未来,这种行为可能会发生变化,使标题栏始终存在,除非特别禁用。

一旦您创建了一个实例,您可以将通过提供的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)

Boxy.ask(question, answers, callback, options)

Boxy.alert(message, callback, options)

Boxy.confirm(message, callback, options)

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

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 2017-08-16基于jQuery实现在线选座之高铁版
  • 2017-08-16使用jQuery处理AJAX请求的基础学习教程
  • 2017-08-16jQuery如何防止这种冒泡事件发生
  • 2017-08-16浅谈jQuery中的$.extend方法来扩展JSON对象
  • 2017-08-16Bookmarklet实现启动jQuery(模仿 云输入法)
  • 2017-08-16jQuery倒计时代码(超简单)
  • 2017-08-16由简入繁实现Jquery树状结构的方法(推荐)
  • 2017-08-16jquery导航制件jquery鼠标经过变色效果示例
  • 2017-08-16jquery ui resize 中border-box的bug修正
  • 2017-08-16jQuery实现的分页功能示例

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery tip提示插件(实例分享)
    • jquery UI Datepicker时间控件的使用方法(加强版)
    • jquery数组封装使用方法分享(jquery数组遍历)
    • jQuery调用WebService的实现代码
    • jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
    • jQuery中绑定事件的命名空间详解
    • jquery组件WebUploader文件上传用法详解
    • 详解jQuery中的empty、remove和detach
    • jQuery自定义插件详解及实例代码
    • Jquery操作Select 简单方便 一个js插件搞定

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有