jQuery响应式自适应对话框窗口插件

这是一款效果非常炫酷的jQuery响应式自适应模态窗口特效插件。当某个特定的链接被触发时,模态窗口被旋转放大到指定位置。看似很简单,但实际上有很多细节问题需要处理。

在这里使用克隆元素的方法来制作模态窗口,当模态窗口关闭时,插件将销毁克隆元素,然后将原来的元素显示出来。

插件不支持IE9一下浏览器,请使用高版本

HTML结构 

html结构中使用HTML5的自定义data属性,不需要调用任何的JavaScript,模态窗口插件将自动侦测所有元素,当发现data-toggle的值为adaptive-modal时,将自动为其创建一个模态窗口。data-title中的内容将被用于模态窗口的内容描述。data-title支持使用html标签。

<body>
  ..
  <a href="#" data-toggle="adaptive-modal" data-title="...">...</a>
  ..
</body>

高级应用 

在实际应用中,可以通过各种定制来生成不同的模态窗口。下面是几个不同模态窗口的例子:

显示已经存在的内容

通过a标签的href实现指向特定的ID,你能够在模态窗口中显示特定内容,而不是data-title中的内容。

<body>
  ..
  <a href="#form" data-toggle="adaptive-modal">...</a>
  <form id="form">
    ..
  </form>
  ..
</body>

显示远程内容

该模态窗口插件支持AJAX远程调用,你不需要编写javascript关于ajax的代码,你需要做的仅仅是在href中指定AJAX远程调用的URL地址和设置data-remote属性为true。

<body>
  ..
  <a href="http://www.remote-ajax-url.com" data-type=".." data-datatype=".." data-remote="true" data-toggle="adaptive-modal">...</a>
  ..
</body>

你也可以通过data-type和data-datatype实现来设置你自己的AJAX类型和datatype。类型默认为GET,datatype默认为HTML。

为每个模态窗口定义class名称

你也可以通过data-am-custom-class自定义模态窗口的class名称,以便于修改模态窗口的CLASS样式。

<body>
  ..
  <a href="#" data-toggle="adaptive-modal" data-title="..." data-am-custom-class="custom-class-name">...</a>
  ..
</body>

自定义模态窗口的背景颜色

你可以通过data-am-custom-bgcolor属性来定义模态窗口的背景颜色。

<body>
  ..
  <a href="#" data-toggle="adaptive-modal" data-title="..." data-am-custom-bgcolor="#000">...</a>
  ..
</body>

更多可选参数

下面让我们通过JavaScript的调用来说明更多的可用参数。如果你想定义一个全局选项,而不是依靠HTML标记,你可以通过jQuery初始化插件来完成:

$(".am-remote-link").adaptiveModal({
   elementAnimateTime: 100, 
   customBgColor: "#333", 
   remoteUrl: false,
   elementAnimateIn: "scaleShow",
   elementAnimateOut: "scaleHide",
   beforeAnimate: function(el, status) {}, 
   afterAnimate: function(el, status) {}, 
   // Deafult Ajax Parameters.
   type: "GET",
   async: true,
   complete: function(xhr, text) {},
   cache: true,
   error: function(xhr, text, e) {},
   global: true,
   headers: {},
   statusCode: {},
   success: function(data, text, xhr) {},
   dataType: "html"
 })
  • elementAnimateTime:这个参数定义模态窗口打开或关闭的时间,单位毫秒,默认值为100。

  • customBgColor:这个参数和data-am-custom-bgcolor属性的功能一样,用于定义背景颜色。这个参数可以是HEX, RGB, RGBA。默认值为#333333。

  • remoteUrl:这个参数定义远程调用的URL并设置它为true,默认值为FALSE。

  • elementAnimateIn:要使用这个参数,你需啊哟在head引入一个CSS3 animation库,如Animate.css。通过Animate.css的class名称,你可以为模态窗口定义各种动画类型。默认值是内置的scaleShow。

  • beforeAnimate:这个参数是模态窗口动画开始前的一个回调函数。可用参数是el返回一个jQuery对象和动画状态。例如:当模态窗口打开时将返回“open”。

  • afterAnimate:这个参数是模态窗口动画结束时的一个回调函数。可用参数是el返回一个jQuery对象和动画状态。例如:当模态窗口关闭时将返回“close”。

其它的type, async, cache, complete, error, global, headers, statusCode, success, 和 dataType和默认的jQuery AJAX参数是一致的,你可以在这里得到更多关于它们的信息

回调(Callbacks)

我们在插件中添加了一些回调函数,以便于你能在自己的项目中扩展它们。下面列举了一些回调函数:

beforeAnimate: function(el, status)

这个回调函数在模态窗口动画开始前被调用。el参数返回一个jQuery对象和动画的当前状态。例如:模态窗口打开时返回“open”,模态窗口关闭时返回“close”。

$(".am-remote-link").adaptiveModal({
    beforeAnimate: function(el, status) {      ...
    }
});
afterAnimation: function(el,status)

这个回调函数在模态窗口动画结束被调用。el参数返回一个jQuery对象和动画的当前状态。例如:模态窗口打开时返回“open”,模态窗口关闭时返回“close”。

$(".am-remote-link").adaptiveModal({
    afterAnimate: function(el, status) {      ...
    }
});

公共方法(Public Methods)

你也可以通过公共方法来触发模态窗口的动画。

$.fn.openModal()

你可以通过这个方法来打开模态窗口:

$(".am-remote-link").openModal()

$.fn.closeModal()

你可以通过这个方法来关闭模态窗口:

$(".am-remote-link").closeModal()


  GitHub


赞(52) 打赏
未经允许不得转载:优客志 » 前端设计
分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏