Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Zerolone/alert

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

36 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

##alert fork 自 https://github.com/ydq/alert, 只保留了mob,增加了load弹窗

一款超小体积的手机jQuery(Zepto【未验证】)弹窗插件,可自己修改CSS定制自己的弹窗皮肤

原版在线演示,可自定义皮肤。

增加load弹窗后的在线演示

###使用demo

$.alert('消息弹窗')
$.alert('消息弹窗',function(){
  //点击确定之后执行的回调函数
  //return false 可以阻止对话框关闭
  //this 指向弹窗对象
})
$.confirm('消息弹窗')
$.confirm('消息弹窗',function(e){
  //点击确定或取消后的回调函数,点击确定e = true,点击取消e = false
  //return false 可以阻止对话框关闭
  //this 指向弹窗对象
})
$.tips('弹出一条2秒后自动消失的悬浮提示');
$.load('加载中提示');
$.load();   //支持默认的提示语句
$.loaded(); //加载完成后调用

###插件API

版本 API 说明
mob $.alert(msg[,fn]) 弹出一个仅包含确定按钮的对话框,msg为内容,fn(可空)为回调函数
mob $.confirm(msg[,fn]) 弹出一个确定/取消按钮的对话框,msg为内容,fn(可空)为回调函数
mob $.tips(msg,second) 屏幕中间弹出一个自动消失的悬浮提示,默认为2秒
mob $.load(msg) 屏幕中间弹出一个加载中的对话框

###插件方法

var dialog = $.alert('下面方法API中的dialog对象是这么获得的')
$.confirm('回调中的this也是dialog对象',function(e){
  //这里的this也是dialog对象
  e||this.content('这样可以改变中间的内容')
  return e;
})
版本 方法 说明
mob dialog.content(str) 修改对话框对象的内容
mob dialog.ok(str) 修改确定按钮的文本
mob dialog.cancel(str) 修改取消按钮的文本
mob dialog.close() 关闭并销毁对话框

####说明:

  • confirm的回调函数默认有一个参数,参数值为boolean,当点击确定时参数为ture,当点击取消时参数为false
  • alertconfirm的回调函数如果return false,则可以阻止对话框关闭,在某些情况下比较有用
  • 不管是alertconfirm还是tips,参数中的msg必须设置,否则没有任何效果
  • alertconfirm中的回调函数中的this对象指向当前对话框对象,例如在回调函数中使用:this.content('这样可以直接修改对话框中间的内容'),再配合return false可以自己做更丰富的消息展示

###弹窗出现后的Dom结构如下:

<div class="alert_overlay">
  <div class="alert_msg">
    <div class="alert_content">你的内容,可以是HTML</div>
    <div class="alert_buttons">
      <button class="alert_btn alert_btn_ok">确定</button>
      <button class="alert_btn alert_btn_cancel">取消</button>
    </div>
  </div>
</div>

###兼容性

  • mob版本已经在ios6、7、8、9上面测试, 相应css文件已经修改

About

一款小巧精致的jquery/zepto弹窗插件

Resources

License

Stars

Watchers

Forks

Packages

No packages published