麦草CMS(MyCMS),简约而不简单。
MyPopup,做的很少。MyPopup就像alert、confirm、propmt等控件一样仅仅弹出一个对话框,其他的交给回调函数yes和no甚至你绑定的事件处理函数,由你随意支配。MyPopup,做的很多。大多数情况下,你不用去管MyPopup弹出的位置、宽度、高度等等,MyPopup都会智能做出判断、渲染。
MyPopup是一个JavaScript(js)弹出层、弹窗、对话框组件。MyPopup不仅模拟了alert、confirm、propmt等等控件,还扩展出tip(小提示框)、loading(加载中)、iframe(框架)、open(常规弹窗)、blank(空白弹出层)等等常用的弹出层。让我最满意的是tip()方法,它依附于目标弹出一个小提示框。tip()方法会根据目标元素智能渲染小提示框的位置和弹出方向。依据MyPopup的tip()方法可以轻松扩展出下拉菜单组件。小提示框有zhi(带直角尾巴)、zhi1(带边框的直角尾巴)、jian(带尖角尾巴)、noTail(不带尾巴)四种样式,调用方法是MyCMS.popup.tip("麦草CMS问候您",{tipStyle: "zhi"})。
在页面中引入myPopup.js主文件,可以注释掉myPopup.js中的MyCMS.popup.init(),然后在页面中引入myPopup/theme/default/myPopup.css样式表。
//MyPopup调用:
MyCMS.popup.alert("麦草CMS向你打招呼!", {width: "100%", top: 0, left: 0, 等等等等});
MyCMS.popup.propmt("麦草CMS向你打招呼!", options);//options就是{width: "100%", top: 0, left: 0, 等等等等}(^~^)
MyCMS.popup.confirm("麦草CMS向你打招呼!");
//把MyCMS变短点:
var p = MyCMS.popup;
p.tip("麦草CMS向你打招呼!", {border: "1px solid red"});//内容是一个字符串
p.tip(document.getElementById("myDiv"), {tipStyle: "zhi1"});//内容捕获自一个HTML元素
var c = document.createElement("div");
var d = document.createElement("div");
var t = document.createTextNode("麦草CMS向你打招呼!");
d.appendChild(t);//内容捕获自一个动态创建的元素
c.appendChild(d);
p.tip(c);
//MyPopup弹出层返回弹出层的引用,你可以调用MyCMS.popup.colse()关闭弹出层。
var p = MyCMS.popup.loading();
MyCMS.popup.close(p);
MyPopup提供了尺寸参数width、height,定位参数position("fix","absolute")、top("30px")、right("10%")、bottom、left、direction("vertical","horizontal"等参数决定小提示框是从目标的上下左右弹出)、tipPosition("follow","target"决定当鼠标事件触发小提示框时,小提示框是依附于鼠标弹出还是依附于目标弹出),样式参数color、bgColor、titleColor、titleBgColor、contentBgColor、buttonColor、buttonBgcolor、border、tipStyle,回调函数yes、no,按钮参数buttons({buttons: ["你好", "你坏"]}或{buttons: "你好"}或{buttons: ["", ""]}不显示按钮,目前只处理最多两个数组项,多余的项忽略,只穿一个值(字符串或控数组项)时是“确定”按钮值)、closeBtn(是否显示关闭按钮,true或false),定时关闭参数time({time: 5.8},参数是浮点数,单位是秒),标题title,是否带遮罩shade,是否点击弹出层关闭弹出层outerClick(除了alert,confirm,propmt外默认值true),移动端特殊效果tipType({tipType: "lager"},tip专用),弹出层的外观风格theme({theme: "myThenme"},自定义弹出层风格),如果空白弹出层是捕获自DOM元素是否拖离出来isOut({isOut: true},默认值false,即不拖离)。目前只这么多接口,至于弹出层样式若提供的接口不能满足,你可以直接修改弹出层样式表。
关于自定义风格,存放于myPopup的theme文件夹下,文件夹名即为风格名称(如myTheme),样式表名称为myPopup.css,所有的样式声明在以风格名称未名的类下(如.myTheme .popup{...})。调用方式如下:
//全局调用(调用后整个页面应用该风格):
MyCMS.popup.init("myTheme");
MyCMS.popup.alert("全局配置我的弹出层风格");
//局部调用(只需要在具体弹出层的options配置项中加入theme参数即可,如{theme: "myTheme"}):
MyCMS.popup.alert("我要显得出众点", {theme: "myTheme"});
MyPopup同时兼容PC端和移动端。MyCMS智能判断系统类型,渲染相应风格。MyPopup不依赖任何js库。
暂时只这么介绍一下,会陆续完善文档。
在互联网高速发展的今天,Web前端弹出层组件多如牛毛,这只是我个人兴趣之作。在这个万物即将互联的时代,阅读方式不发生根本改变,javascript乃至整个web前端只会蓬勃发展。
MyPopup使用Apache开源协议发布。后续会逐渐完善功能,解决兼容问题。那个悬浮的圆形关闭按钮是最后于匆忙中完成,未做细致调整美化,不是那么美观协调,请见谅。在阅读使用过程中有任何BUG、建议,请至QQ群154340308留言指教。
下载:
MyPopup