WEUI应用，用JS封装常用信息提示的弹层—Msg
来源：互联网 发布：类似天蝎的美剧 知乎 编辑：程序博客网 时间：2024/05/16 07:58
WEUI应用，用JS封装常用信息提示的弹层—Msg
结果页通常来说可以认为进行一系列操作步骤后，作为流程结束的总结性页面。结果页的作用主要是告知用户操作处理结果以及必要的相关细节（可用于确认之前的操作是否有误）等信息；若该流程用于开启或关闭某些重要功能，可在结果页增加与该功能相关的描述性内容；除此之外，结果页也可以承载一些附加价值操作，例如提供抽奖、关注公众号等功能入口。
一、精简的MSG (实际就是最下面没有查看详情的文字链接)
<!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"><title>WeUI</title><link rel="stylesheet" href="style/weui.min.css"/><link rel="stylesheet" href="example/example.css"/><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script> $(function(){ $('#showMsg').click(function(){ weuiMsg('操作成功文字','内容详情可根据实际需要安排文字',function(){ alert("这里放你想做的相应操作！"); $('#weuiMsg').remove(); }); }); function weuiMsg(title, desc, callback){ var msgStr; msgStr = '\ <div class="weui_msg" id="weuiMsg" style="display: none;">\ <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>\ <div class="weui_text_area">\ <h2 class="weui_msg_title">' + title + '</h2>\ <p class="weui_msg_desc">' + desc + '</p>\ </div>\ <div class="weui_opr_area">\ <p class="weui_btn_area">\ <a href="javascript:;" class="weui_btn weui_btn_primary">确定</a>\ <a href="javascript:;" class="weui_btn weui_btn_default">取消</a>\ </p>\ </div>\ </div>\ '; $('body').append(msgStr); $('#weuiMsg').fadeIn('fast'); $('#weuiMsg .weui_btn_primary').on('click',function(){ callback(); }); $('#weuiMsg .weui_btn_default').on('click',function(){ $('#weuiMsg').fadeOut('fast',function(){ $('#weuiMsg').remove(); }); }); }})</script></head><body ontouchstart> <div class="bd"> <h1 class="page_title">MSG</h1> </div> <div class="bd spacing"> <div class="weui_cells"> <div class="weui_cell"> <button href="javascript:;" class="weui_btn weui_btn_primary" id="showMsg">点击弹出Msg简洁版</button> </div> </div> </div></body></html>二、完全的MSG (实际就是最下面包含有查看详情的文字链接)
<!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"><title>WeUI</title><link rel="stylesheet" href="style/weui.min.css"/><link rel="stylesheet" href="example/example.css"/><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script> $(function(){ $('#showMsgFull').click(function(){ weuiMsgAll('操作成功文字Full','内容详情可根据实际需要安排文字Full','查看详情','http://www.baidu.com',function(){ alert("这里放你想做的相应操作Full！"); $('#weuiMsgAll').remove(); }); }); function weuiMsgAll(title, desc, extraText, extraLink, callback){ var msgStr; msgStr = '\ <div class="weui_msg" id="weuiMsgAll" style="display: none;">\ <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>\ <div class="weui_text_area">\ <h2 class="weui_msg_title">' + title + '</h2>\ <p class="weui_msg_desc">' + desc + '</p>\ </div>\ <div class="weui_opr_area">\ <p class="weui_btn_area">\ <a href="javascript:;" class="weui_btn weui_btn_primary">确定</a>\ <a href="javascript:;" class="weui_btn weui_btn_default">取消</a>\ </p>\ </div>\ <div class="weui_extra_area">\ <a href="' + extraLink + '">' + extraText + '</a>\ </div>\ </div>\ '; $('body').append(msgStr); $('#weuiMsgAll').fadeIn('fast'); $('#weuiMsgAll .weui_btn_primary').on('click',function(){ callback(); }); $('#weuiMsgAll .weui_btn_default').on('click',function(){ $('#weuiMsgAll').fadeOut('fast',function(){ $('#weuiMsgAll').remove(); }); }); }})</script></head><body ontouchstart> <div class="bd"> <h1 class="page_title">MSG</h1> </div> <div class="bd spacing"> <div class="weui_cells"> <div class="weui_cell"> <button href="javascript:;" class="weui_btn weui_btn_primary" id="showMsgFull">点击弹出Msg完全版</button> </div> </div> </div></body></html>三、MSG整合简单和完全，统计调用，根据调用时的参数来定，三个参数是简单版，五个参数是完全版
<!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"><title>WeUI</title><link rel="stylesheet" href="style/weui.min.css"/><link rel="stylesheet" href="example/example.css"/><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><script> $(function(){ $('#showMsg').click(function(){ weuiMsg('操作成功文字','内容详情可根据实际需要安排文字',function(){ alert("这里放你想做的相应操作！"); $('#weuiMsg').remove(); }); }); $('#showMsgFull').click(function(){ weuiMsg('操作成功FULL','内容详情可根据实际需要安排文字FULL',function(){ alert("这里放你想做的相应操作FULL！"); $('#weuiMsgFull').remove(); },'查看详情','http://www.baidu.com'); }); function weuiMsg(title, desc, callback, extraText, extraLink){ var msgStr, msgStrFull; msgStr = '\ <div class="weui_msg" id="weuiMsg" style="display: none;">\ <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>\ <div class="weui_text_area">\ <h2 class="weui_msg_title">' + title + '</h2>\ <p class="weui_msg_desc">' + desc + '</p>\ </div>\ <div class="weui_opr_area">\ <p class="weui_btn_area">\ <a href="javascript:;" class="weui_btn weui_btn_primary">确定</a>\ <a href="javascript:;" class="weui_btn weui_btn_default">取消</a>\ </p>\ </div>\ </div>\ '; msgStrFull = '\ <div class="weui_msg" id="weuiMsgFull" style="display: none;">\ <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>\ <div class="weui_text_area">\ <h2 class="weui_msg_title">' + title + '</h2>\ <p class="weui_msg_desc">' + desc + '</p>\ </div>\ <div class="weui_opr_area">\ <p class="weui_btn_area">\ <a href="javascript:;" class="weui_btn weui_btn_primary">确定</a>\ <a href="javascript:;" class="weui_btn weui_btn_default">取消</a>\ </p>\ </div>\ <div class="weui_extra_area">\ <a href="' + extraLink + '">' + extraText + '</a>\ </div>\ </div>\ '; if(arguments[4]){ $('body').append(msgStrFull); $('#weuiMsgFull').fadeIn('fast'); $('#weuiMsgFull .weui_btn_primary').on('click',function(){ callback(); }); $('#weuiMsgFull .weui_btn_default').on('click',function(){ $('#weuiMsgFull').fadeOut('fast',function(){ $('#weuiMsgFull').remove(); }); }); }else if(arguments[2]){ $('body').append(msgStr); $('#weuiMsg').fadeIn('fast'); $('#weuiMsg .weui_btn_primary').on('click',function(){ callback(); }); $('#weuiMsg .weui_btn_default').on('click',function(){ $('#weuiMsg').fadeOut('fast',function(){ $('#weuiMsg').remove(); }); }); } }})</script></head><body ontouchstart> <div class="bd"> <h1 class="page_title">MSG</h1> </div> <div class="bd spacing"> <div class="weui_cells"> <div class="weui_cell"> <button href="javascript:;" class="weui_btn weui_btn_primary" id="showMsg">点击弹出Msg简洁版</button> </div> <div class="weui_cell"> <button href="javascript:;" class="weui_btn weui_btn_primary" id="showMsgFull">点击弹出Msg完全版</button> </div> </div> </div></body></html> 0 0
- WEUI应用，用JS封装常用信息提示的弹层—Msg
- WEUI应用，用JS封装常用信息提示的弹层—Toast
- WEUI应用，用JS封装常用信息提示的弹层—Dialog
- weUI应用，用JS封装了几个常用的信息提示的弹层
- WEUI应用，用JS封装常用信息—Progress
- WEUI应用，用JS封装常用信息—ActionSheet
- weui学习总结——1、weui表单常用标签
- js提示信息的写法
- ROS中几种常用的msg
- ExtJs 提示信息封装
- 常用js方法的封装
- weui.js slider的使用笔记
- WEUI弹出层
- Android中几种常用的弹窗信息提示方式
- js封装提示对话框
- JS在用户离开页面时提示信息&常用的弹出窗口用法
- jquery信息提示框——clueTip的应用
- 获取应用的常用信息
- poj 3013 Big Christmas Tree （最短路）
- Java 数组的四种排序方法 代码
- 几个靠谱的maven仓库镜像地址
- python -u predict.py --gpus 1 --img 1.jpg and python -u predict.py --gpus 0 --img 1.jpg
- raptor程序:三色球
- WEUI应用，用JS封装常用信息提示的弹层—Msg
- scrollView 与autolayout
- 标准文件I/O操作
- 二、软交换技术
- CodeCover初体验
- Set Matrix Zeroes
- Android TextView 长按复制到剪切板，粘贴
- 64位windows上用mingw编译32位程序的一种方法
- Scrapy No module named _sqlite3 错误
