[js开源组件开发]js手机端浮层控件,并有多种弹出小提示,兼容pc端浏览器
2015-04-02 10:11
1006 查看
js dialog组件,包含alert和confirm的实现
本组件所有的资源均在github上可以查看源代码 GitHub本dialog的组件的例子请在这里查看 demo
dialog
js dialog弹窗用法
这是内容<input type="button" id="btn_dialog" value="打开浮层"/> <div id="dialog-content" style="display:none;">这是内容</div> <script src="../src/jquery-1.9.1.min.js"></script> <script src="../src/dialog.js"></script> <script> var dialog = new Dialog(); dialog.init({target:"#dialog-content",trigger:"#btn_dialog",mask:true,width:500,height:300,title:'标题'}); </script>
或者用jquery方式调用:
<input type="button" id="btn_dialogjquery" value="jq打开浮层"/> <div id="dialog-contentjq" style="display:none;">这是内容22</div> <script src="../src/dialog-jquery.js"></script> <script> $('#btn_dialogjquery').Dialog({target:"#dialog-contentjq",mask:true,width:500,height:300,title:'标题'}) </script>
继承类alert和confirm提示(jquery模式下):
*html: <input type="button" id="btn_alert" value="alert"/> <input type="button" id="btn_alert2" value="alert定时关闭"/> <input type="button" id="btn_confirm" value="confirm三种按钮"/> <input type="button" id="btn_confirmdefault" value="confirm默认"/> *js: $('#btn_alert').click(function(){ $.alert('选好商品才能上传素材哦',true,function(){ alert('你点击了ok') }) }); $('#btn_alert2').click(function(){ $.alert('选好商品才能上传素材哦') }); $('#btn_confirm').click(function(){ $.confirm('下载全部 9 张图片至本地相册?<div class="confirm-title2">文字内容已复制</div>',[{yes:"是"},{no:'否'},{close:'关闭'}],function(type){ $.alert('您点击了'+type); this.hide(); }); }) $('#btn_confirmdefault').click(function(){ $.confirm('你确定要删除这条消息吗? ',null,function(type){ $.alert('您点击了'+type); this.hide(); }); })
属性或方法
属性
trigger:
触发对象
target:
弹出内容,可以为#id,或者jquery对象
mask:
是否有遮罩层
title:
标题
zIndex:
z-index
closeTpl:
关闭html(默认:<span class="ui-dialog-close js-dialog-close">x</span>)
titleTpl:
标题html(默认:<div class="ui-dialog-title"></div>)
方法及回调
show:
显示弹层
hide:
隐藏
beforeShow:function(content)
显示前的方法回调,content是浮层内容对象
beforeHide:function(content)
隐藏前的方法回调,content是浮层内容对象
setPosition:function()
设置位置居中
相关文章推荐
- js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
- js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
- js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
- js获得指定控件光标的坐标,兼容IE,Chrome,火狐等多种主流浏览器
- js获得指定控件光标的坐标,兼容IE,Chrome,火狐等多种主流浏览器
- [js开源组件开发]-手机端照片预览组件
- [js开源组件开发]tip提示组件
- [js开源组件开发]js多选日期控件
- 【开发过程问题汇总系列】【JS控制 iframe跳转】兼容 FireFox和IE内核的浏览器
- 【js与jquery】javascript开源项目收藏(如:弹出框、日历控件)
- JavaScript 日期时间控件,兼容所有浏览器,界面友好,支持多格式,支持多种触发,改进版
- 《庖丁解牛:纵向切入ASP.NET 3.5控件和组件开发技术》 --- 基于VS 2008(兼容VS 2005)/C#
- MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
- Highcharts 功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库
- 开发日志:js当文本框输入非中文字符时,提示只能输入中文并将非中文字符清空【兼容IE、FF,适用于当文本框内容改变就立刻触发事件的其他功能性需求】
- JS开发浏览器兼容问题
- web开发-浏览器兼容策略-js+css
- atitit. applet 浏览器插件 控件 的环境,开发,提示总结o9o
- js验证控件,兼容 IE、火狐firefox、Opera,android 浏览器