js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例


Posted in Javascript onApril 29, 2015

本文实例讲述了js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件。分享给大家供大家参考。具体如下:

完整实例代码点击此处本站下载。

用法

<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()
  设置位置居中

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
五个jQuery图片画廊插件 推荐
May 12 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
基于javascript编写简单日历
May 02 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
vue2 中如何实现动态表单增删改查实例
Jun 09 Javascript
js下拉菜单生成器dropMenu使用方法详解
Aug 01 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
JavaScript前端实现压缩图片功能
Mar 06 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 #Javascript
jQuery实现冻结表格行和列
Apr 29 #Javascript
Js实现无刷新删除内容
Apr 29 #Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 #Javascript
jQuery()方法的第二个参数详解
Apr 29 #Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 #Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 #Javascript
You might like
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
ajax接收后台数据在html页面显示
2017/02/19 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
在Vue项目中,防止页面被缩放和放大示例
2019/10/28 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
python登录QQ邮箱发信的实现代码
2013/02/10 Python
Python单链表的简单实现方法
2014/09/23 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
公积金转移接收函
2014/01/11 职场文书
医药个人求职信范文
2014/01/29 职场文书
教师自我反思材料
2014/02/14 职场文书
质量承诺书格式
2014/05/20 职场文书
单位接收函格式
2015/01/30 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
消防验收申请报告
2015/05/15 职场文书
Golang 结构体数据集合
2022/04/22 Golang