jquery.sobox 经典版弹窗控件

sobox 是一款非常实用的,基于 jQuery 的弹窗控件。
功能非常完整,而代码量又非常少(压缩完仅8k不到)的一款弹窗控件,
如果你熟悉ext的弹窗控件,那么sobox的使用对你来说应该是愉悦而完全没有压力。

引入sobox文件

  1. <link type="text/css" rel="stylesheet" media="all" href="style.css" />
  2. <script type="text/javascript" src="jquery1.9.1.min.js"></script>
  3. <script type="text/javascript" src="jquery.sobox.js"></script>

使用方法

  1. $(‘.a-tip‘).click(function () {
  2. $.sobox.tip({
  3. content: ‘爱看不看,上面提示一下~‘
  4. });
  5. return false;
  6. });

sobox 基本参数  下载

  1. //通用方法
  2. $.sobox.pop({
  3. /* 弹出类型及类型参数 */
  4. type : ‘content‘, // 弹窗内容模式:‘content‘,‘target‘,‘ajax‘,‘iframe‘,每个模式分别对应每个参量
  5. target : null, // target方式,target目标,如 ‘.detail‘,‘#contbox‘
  6. content : null, // content方式,支持html
  7. iframe : null, // iframe方式,值为iframe目标页链接,如:http:// www.baidu.com/
  8. ajax:{url:null,data:null,callback:function(){}}, // ajax事件
  9. /* 位置信息 */
  10. posType:‘center‘, // ‘center,win,doc,tc,bc‘ 位置类型,居中 / 距window顶部 / 距离doucment顶部定 / top水平居中 / bottom水平居中,默认居中
  11. pos:[0,0], // [x,y] 距离document左上角坐标,set模式使用
  12. offset:[0,0], // [x,y] 弹窗相对本来设定位置偏移量,center模式只改变y轴
  13. /* 自定义参数 */
  14. cls : null, // 添加自定义类名
  15. width:360,height:null, // 宽高属性,iframe模式下,height为iframe高度
  16. defaultShow:true, // 直接显示pop
  17. visibility:true, // 默认pop执行后显示(用于部分复杂处理场景)
  18. title : ‘提示‘, // 默认标题
  19. showTitle:true, // 标题栏隐藏:默认显示
  20. showMask : true, // 显示遮罩
  21. drag :true, // 是否可拖动
  22. maskClick : true, // 点击背景关闭内容
  23. btn : [], // {cls:,text‘确定‘,link:,removePop: true,callback:}
  24. /* 返回事件 */
  25. beforePop:function(){}, // 弹窗打开之前callback事件
  26. onPop: function(){}, // 页面打开callback事件
  27. closePop: function(){} // 点击标题关闭按钮返回事件
  28. });
  29. btn参数说明:
  30. 默认每个btn元素由一个.a-sopop-btn 的a元素内置一个.s-sopop-btn span元素组成,
  31. {
  32. cls:null, // 添加类名
  33. text:‘确定‘, // 默认按钮文字
  34. link:‘#‘, // 为a添加链接,添加链接后,按钮返回链接指向地址
  35. removePop: true, // 默认点击按钮关闭弹出层
  36. callback:function (removePop){} // 返回事件
  37. }
时间: 2024-10-13 10:41:34

jquery.sobox 经典版弹窗控件的相关文章

多功能弹窗控件layer

开发网站的时候,如何合理运用好各种插件对开发的帮助是很大的. 免去了我们调试各种交互效果, 比如常用的弹窗.气泡.提示.加载.焦点.标签.导航.折叠等等 这里会推荐几个常用的js插件,丰富多样简单易移植很适合我们做前台开发使用 第一个插件:多功能弹窗控件layer-v2.4  下载地址:http://layer.layui.com/ 页面调用js 1 //初体验 2 layer.alert('内容') 3 //第三方扩展皮肤 4 layer.alert('内容', { 5 icon: 1, 6

unity4.6 Beta版 UI控件之Button

最近需求,需要用到4.6版本uGui了,所以抽时间来学习学习,就UI控件在Unity工具里创建预设这块来说相比较于NGUI,我觉得是没有什么太大的区别的. 比如:Canvas--Camera . Text--Label.ImageMask-- Panel 等. 可能是目前4.6版本还不稳定,其UI控件下所挂载的组件脚本代码我们是没法直接点击脚本看到更别说在代码里直接调出修改了,这点就目前来说确实没有NGUI方便. 好了"方不方便"恐怕并不能直接影响每次unity版本的更新带给我们的惊喜

.NET试用版授权控件WinLicense

Themida是先进的微软视窗软件保护系统,专为了那WinLicense 结合了 Themida 保护功能以及高级注册管制.它提供了最强和具伸缩性的技术,使开发者可以安全地分发他们软件的试用版和完全版. 具体功能: 作为软件保护层的WinLicense WinLicense是一个强劲的保护系统, 专为了那些想保护自己的程序不被先进的反向工程和黑客软件破解的软件开发者而开发的.开发者不需要更改任何的原代码,和不需要程序编制的经验使用WinLicense. WinLicense使用SecureEng

《zw版&#183;delphi与halcon系列原创教程》zw版_THImagex控件函数列表

<zw版·delphi与halcon系列原创教程>zw版_THImagex控件函数列表 Halcon虽然庞大,光HALCONXLib_TLB.pas文件,源码就要7w多行,但核心控件就是两个: THImagex,图像数据控件,v11版,包括488个函数和子程序 THOperatorSetX,操作主接口控件,v11版,包括1929个子程序 以上两大核心控件,已经删除个别delphi内部属性函数,不影响日常使用. 其他控件,基本上,都是为配合两个控件,提供数据类型支持.辅助功能.已经一些特殊应用(

IE将开始屏蔽旧版ActiveX控件

?? 根据用户的反馈情况,我们决定等到2014年9月9日再开始屏蔽那些旧版本的ActiveX控件.然而,旧版ActiveX控件的屏蔽功能和相关的组策略设置,仍然在2014年8月12日就可以开始使用. IE的此次变动会对您的企业带来哪些影响呢? 从2014年9月9日起,如果您的企业在使用IE访问的Internet网站仍然依赖于旧版本的JAVA,那么您将受到这次改动的影响. 用户将会看到屏蔽的通知界面(点击此处可预览界面),但其可以通过点击相应的按钮坚持允许旧版ActiveX控件运行. 如果对您的企

jquery messagetip信息语提示控件

编写原因: 作为提示框,jquery有个messagebox的控件,也就是弹出的提示框.但这个控件如果不是用在需要确认的时候,单单警告提示.消息提示.失败提示时,用户还需要去点下确认,有时这操作还是挺烦的(尽管可以设置timeout,会自动消失). 控件需求: 现在需要一个简洁消息提示控件,不需确认. 1.提示框可以从顶部或底部滑入,在失效后滑出. 2.可以设置滑入时间,内容停留时间.滑出时间. PS:比较简单的控件 效果如下 编写过程: 1.在无文档的情况下, 我建议将用户能传的参数的定义写在

仿jquery mobile中的select控件效果

不说废话,直接上代码,最好将on.png和off.png也使用jquery mobile里的图片 //仿jQuery mobile Select控件 //用法box为容器id,_id指控件id,selectvalue为选中值,Value为当前值 function SelectBox(box,_id,selectvalue,Value) { if(Value != selectvalue) { $("#" + box).html("<input type=hidden v

【javascript】分享一款经典的日期控件 My97DatePicker

最近在做平台项目,其中有用到日期选择,相对于 jqueryui 的 datepicker 我更喜欢 My97DatePicker. 理由 体积小,相对于 jqueryui 的 datepicker 的百来 K,My97DatePicker 只有 50K 不到: My97DatePicker 是用原生 js 编写的,能够用在任何环境下: My97DatePicker 功能非常强大全面,能够满足使用者的绝大部分需求. 如何使用 首先需要引用日期控件库: <script src="My97Dat

jquery文件批量上传控件Uploadify3.2(java springMVC)

人比較懒  有用为主 不怎么排版了 先放上Uploadify的官网链接:http://www.uploadify.com/  -->里面能够看到PHP的演示样例,属性说明,以及控件下载地址.分flash版(免费)和html5版(收费). 官网上能够看到效果演示. 另外在网上找到了一份Uploadify3.2的中文API文档.能够在我上传的资源里面下载. 以下就是一个基于springMVC的文件上传演示样例,看起来可能比文档更直观一些··· 1.下载插件放到项目中 2.在jsp页面中引入下面JS和