码迷,mamicode.com
首页 > Web开发 > 详细

基于jquery扩展的弹层控件

时间:2016-06-28 10:52:55      阅读:249      评论:0      收藏:0      [点我收藏+]

标签:

  漂亮且超好用的弹出层事件类JS代码,支持各种对话框、弹出层等,弹出层可拖拽移动且拖拽流畅,浏览器兼容良好。可自定义内容、标题、宽高、按钮、和绑定相对应的事件简单方便的实现弹层,实现添加数据或显示详细信息等功能。

下面跟着我的步伐走

(1)准备好要显示的内容,这不仅仅是内容,也可以是html代码

(2)准备好内容之后,要记得给它取个响亮的标题,明确下主题,当然也可以不需要 

(3)是不是觉得有些时候确定和取消这两个家伙没必要出现,如果不用它们可以将舍弃,不填他们就好了  

是不是很简单,还在等什么,快来试一下吧!!

效果如下:

技术分享

以下是示例教程:

PopupDiv(options)

id

弹层的id

title

弹层的标题

width

弹层的宽度

height

弹层的高度

content

弹层的内容

ckBtnText

确认按钮文本内容

normalText

取消按钮文本内容

readyFn()

弹出层后执行的后续操作

示例:

var pd_detail = new PopupDiv({
   title: "标题",
   width: 400,
   okBtnText: "确定",
   normalText: "否",
   content: "内容",
   readyFn: function () {
      alert("弹出层后执行的后续操作");
   }
});

展示效果:

技术分享
okFn()

确定回调事件

示例:

var pd_detail = new PopupDiv({
   title: "标题",
   width: 400,
   okBtnText: "确定",
   normalText: "否",
   content: "内容",
   okFn: function () {
      alert("确定回调事件");
   }
});

展示效果:

技术分享
closeFn()

点击否的后续操作

示例:

var pd_detail = new PopupDiv({
   title: "标题",
   width: 400,
   okBtnText: "确定",
   normalText: "否",
   content: "内容",
   closeFn: function () {
      alert("点击否的后续操作");
   }
});

展示效果:

技术分享
closeMainFn()

关闭弹层后的后续操作

示例:

var pd_detail = new PopupDiv({
   title: "标题",
   width: 400,
   okBtnText: "确定",
   normalText: "否",
   content: "内容",
   closeMainFn: function () {
      alert("关闭弹层后的后续操作");
   }
});

展示效果:

技术分享

示例:

var pd_detail = new PopupDiv();

展示效果:

技术分享

示例:

var pd_detail = new PopupDiv({
   title: "",
   okBtnText: "",
   normalText: "",
   content: "",
});

展示效果:

技术分享

下载地址:

JavaScript弹层控件

http://www.tiaoceng.com/assemblydetail_34.html

基于jquery扩展的弹层控件

标签:

原文地址:http://www.cnblogs.com/tiaoceng/p/5622442.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!