基于jQuery的控件:弹框
★页面展示

★属性
|
属性 |
值 |
说明 |
默认值 |
|
div |
Object |
jQuery对象 |
$('body') |
|
width |
Number |
控件的宽度 |
auto |
|
height |
Number |
控件的高度 |
auto |
|
title |
String |
弹框的头 |
‘提示’ |
|
content |
String |
弹框的内容 |
|
|
iframeUrl |
String |
弹出iframe的路径 |
|
|
offsetTop |
Number||String |
绝对定位top 值: top,bottom,数字 |
居中 |
|
offsetLeft |
Number||String |
绝对定位left 值: left,right,数字 |
居中 |
|
isDrop |
Boolean |
是否可拖动 |
true(可拖动) |
|
btnGroupe |
Array[Object] |
脚部的按钮,属性: word:(String)按钮的文字 className:(String)按钮的class,提供grey,green,red,blue onClick:(Function)按钮的点击事件 |
|
|
className |
控件class |
★方法
|
方法 |
参数 |
描述 |
返回值 |
|
Create() |
创建弹出层 |
||
|
Open() |
打开弹框 |
||
|
Close() |
关闭弹框 |
||
|
FastOpen() |
快速打开 |
||
|
FastClose() |
快速关闭 |
||
|
SetWidth(width) |
width:(Number) |
设置控件宽度 |
|
|
SetHeight(height) |
height:(Number) |
设置控件内容高度 |
|
|
Refresh() |
|
如果是iframe,则刷新 |
|
|
SetTop() |
|
弹框置顶 |
|
|
SetMiddle(width,height) |
width:(Number) height:(Number) |
设置弹框宽高,并居中 |
|
|
SetPosition(offsetTop, offsetLeft) |
offsetTop:同data的offsetTop offsetLeft:同data的offsetLeft |
设置弹框的位置,不传值默认是初始化传入的值 |
★事件回调
|
方法 |
参数 |
描述 |
返回值 |
|
onCloseFun() |
关闭弹窗事件 |
★示例
var Popup = new ZJ.JIECL.UI.Popup({
// iframeUrl:"http://www.baidu.com",
content:'22',
width:800,
height:600,
btnGroupe:[{
word:'取消',
className:'grey',
onClick:function(){
Popup.Close();
}
},{
word:'确定',
onClick:function(){
Popup.Open();
}
}],
offsetTop:100,
onCloseFun:function(){
console.log(1)
}
});
Popup.Open();
★源码
Js源码
Css源码
基于jQuery的控件:弹框的更多相关文章
- 基于Jquery 简单实用的弹出提示框
基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...
- 基于jQuery鼠标点击弹出登陆框效果
基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <input type=" ...
- jQuery树形控件zTree使用小结
作者:Fonour 字体:[增加 减小] 类型:转载 时间:2016-08-02我要评论 这篇文章主要为大家详细介绍了jQuery树形控件zTree使用方法,zTree树插件的基本使用方法,感兴趣的小 ...
- Jquery获得控件值的方法
一 Jquery获得服务器控件值的方法 由于ASP.NET网页运行后,服务器控件会随机生成客户端id,jquery获取时候不太好操作,google了下,总结有以下3种方法: 服务器控件代码:<a ...
- 根据条件决定My97DatePicker日期控件弹出的日期格式
代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...
- jquery时间控件
jQuery 时间控件推荐 博客分类: jQuery 时间控件 My97DatePicker My97DatePicker是一个更全面,更人性化,并且速度一流的日期选择控件.具有强大的日期范围限 ...
- Web控件文本框Reset的功能
在前一篇中<怎样实现Web控件文本框Reset的功能>http://www.cnblogs.com/insus/p/4120889.html Insus.NET只实现了文本框的功能.单个或 ...
- jQuery操作控件
在项目中添加前台控件radio,操作两个div的显示和隐藏,其实是一个很简单的问题,但是费了老大劲才完成,也就是jQuery操作控件的一些基础知识.方法有三种,简单介绍: 1.给元素设置style属性 ...
- 精确到秒的JQuery日期控件
项目中需要用到精确到秒的日期控件,到网上搜了一下,发现有一个JQuery控件可以实现该功能---TimerPicker.但是官网上没有提供该控件的完整Demo,而且没有提供汉化包,所以自己汉化了一下, ...
随机推荐
- MariaDB存储过程笔记
FECTH INTO 字段名不能与 CURSOR FOR 中select字段名一致,否则FETCH出的值均为空. DECLARE 字段名不能与 CURSOR FOR 中select语句内where条件 ...
- Eclipse 配置Tomcat 服务器
第一部分:eclipse环境下如何配置tomcat 1.下载并成功安装Eclipse和Tomcat 2.打开Eclipse,单击“window”菜单,选择下方的“Preferences” . 选择好自 ...
- js前台计算两个日期的间隔时间(时间差)
在后台传来两个时间字段,从中解析出两个字符串类型的日期格式 需要在前台解析出两个时间的间隔 这里采用获取两个日期的时间戳进行计算 时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时 ...
- JAVA 封装的简单运用
package Code425;class person{ private String name ; String place; String school; String habits; int ...
- 个人NABCD
采用NABCD模型对我们的团队项目大学生失物招领平台进行了详细的需求分析说明,其中N指(Need需求),A (Approach 做法),B (Benefit好处),C (Competitors 竞争) ...
- Win10 中将网页转换成pdf的简便方法
注意:该方法不是将网页完整地保存下来,而是选取其中主要的文字信息. (1)打开要保存的网页 (2)按快捷键 Ctrl+P 打开打印界面 (3)选择打印机为 “Microsoft Print to PD ...
- 设计模式 — 抽象工厂模式(Abstract Factory)
工厂模式已经分析了简单工厂模式和工厂方法模式.并且了解了工厂方法模式去简单工厂模式的延伸,工厂方法模式如果不把工厂类抽象的话,就是简单工厂模式.由前面两个工厂模式可以猜测出抽象工厂模式应该是这两种工厂 ...
- CAS5.3.0安装部署
部署环境:JDK1.8.x maven-3.5.2 tomcat-8.x.x 1.下载地址 https://github.com/apereo/cas-overlay-template/tree/5. ...
- vim的简单使用以及一些常用的命令
对于第一次用vi,有几点注意要提醒一下:1.用vi打开文件后,是处于「命令行模式(command mode)」,您要切换到「插入模式(Insert mode)」才能够输入文字.切换方法:在「命令行模式 ...
- C# DynamicObject 动态对象
dynamic是FrameWork4.0的新特性.dynamic的出现让C#具有了弱语言类型的特性.编译器在编译的时候不再对类型进行检查,编译期默认dynamic对象支持你想要的任何特性.比如,即使你 ...