前端开发者| 前端开发获取手机验证码 |
| 手机前端开发rem转换 |
| 前端开发手机测试 |
作为一名前端开发，大家应该都知道在浏览器中存在一些内置的控件：Alert，Confirm等，但是这些控件通常根据浏览器产商的不同而形态各异，视觉效果往往达不到UI设计师的要求。更重要的是，这类内置控件的风格很难与形形色色的各种风格迥异的互联网产品的设计风格统一。因此，优秀的前端开发者们各自开发自己的个性化控件来替代浏览器内置的这些控件。当然，这类组件在网络上已经有不计其数相当优秀的，写这篇文章的目的不是为了说明我开发的这个组件有多优秀，也不是为了炫耀什么，只是希望通过这种方式，与更多的开发者互相交流，互相学习，共同进步。好，废话不多说，言归正传。
功能介绍
取代浏览器自带的Alert、Confirm控件
自定义界面样式
使用方式与内置控件基本保持一致
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Winpop组件Demo</title>
<style>
body {
font: 14px/1.5 ‘\5fae\8f6f\96c5\9ed1’, Arial, Tahoma, sans-serif;
}
.winpop-mask,
.winpop-box {
display: none;
position: fixed;
}
.winpop-mask {
left: 0;
top: 0;
z-index: 999;
width: 100%;
height: 100%;
background-color: #000;
opacity: .3;
filter: alpha(opacity=30);
}
.winpop-box {
left: 50%;
top: 50%;
z-index: 1000;
margin-top: -100px;
margin-left: -160px;
width: 320px;
height: 200px;
background-color: #fff;
}
.winpop-box .winpop-main {
padding: 62px 20px;
height: 32px;
line-height: 32px;
text-align: center;
color: #666;
font-size: 16px;
}
.winpop-box .winpop-btns {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
overflow: hidden;
}
.winpop-box .pop-btn {
float: left;
position: relative;
/*margin-left: -1px;*/
width: 50%;
height: 44px;
border: 1px solid #555;
background-color: #555;
color: #fff;
font: 14px/1.5 ‘\5fae\8f6f\96c5\9ed1’, Arial, Tahoma, sans-serif;
font-size: 18px;
cursor: pointer;
}
.winpop-box .pop-btn:hover {
background-color: #403F40;
color: #FFF219;
}
.winpop-box .confirm-true {
/*margin-left: -1px\9;*/
border-left-color: #333;
}
.winpop-box .alert-button {
width: 100%;
}
/*.winpop-box .alert-button,
.winpop-box .confirm-true {
background-color: #73b9ff;
}
.winpop-box .alert-button:hover,
.winpop-box .confirm-true:hover {
background-color: #58a7f6;
}
.winpop-box .confirm-true {
margin-left: 50px;
}*/
</style>
</head>
<body>
<div class=”container”>
<a class=”btn btn-info” href=”javascript:alert(‘自定义Alert控件’)”>自定义Alert控件</a>
<a class=”btn btn-success” href=”javascript:confirm(‘关闭自定义Confirm组件吗？’, function(flag){if(flag){alert(‘True’);}else{alert(‘False’);}})”>自定义Confirm组件</a>
</div>
<script>
(function (window, jQuery, undefined) {
var HTMLS = {
ovl: ‘<div class=”J_WinpopMask winpop-mask” id=”J_WinpopMask”></div>’ + ‘<div class=”J_WinpopBox winpop-box” id=”J_WinpopBox”>’ + ‘<div class=”J_WinpopMain winpop-main”></div>’ + ‘<div class=”J_WinpopBtns winpop-btns”></div>’ + ‘</div>’,
alert: ‘<input type=”button” class=”J_AltBtn pop-btn alert-button” value=”确定”>’,
confirm: ‘<input type=”button” class=”J_CfmFalse pop-btn confirm-false” value=”取消”>’ + ‘<input type=”button” class=”J_CfmTrue pop-btn confirm-true” value=”确定”>’
}
function Winpop() {
var config = {};
this.get = function (n) {
return config[n];
}
this.set = function (n, v) {
config[n] = v;
}
this.init();
}
Winpop.prototype = {
init: function () {
this.createDom();
this.bindEvent();
},
createDom: function () {
var body = jQuery(“body”),
ovl = jQuery(“#J_WinpopBox”);
if (ovl.length === 0) {
body.append(HTMLS.ovl);
}
this.set(“ovl”, jQuery(“#J_WinpopBox”));
this.set(“mask”, jQuery(“#J_WinpopMask”));
},
bindEvent: function () {
var _this = this,
ovl = _this.get(“ovl”),
mask = _this.get(“mask”);
ovl.on(“click”, “.J_AltBtn”, function (e) {
_this.hide();
});
ovl.on(“click”, “.J_CfmTrue”, function (e) {
var cb = _this.get(“confirmBack”);
_this.hide();
cb && cb(true);
});
ovl.on(“click”, “.J_CfmFalse”, function (e) {
var cb = _this.get(“confirmBack”);
_this.hide();
cb && cb(false);
});
mask.on(“click”, function (e) {
_this.hide();
});
jQuery(document).on(“keyup”, function (e) {
var kc = e.keyCode,
cb = _this.get(“confirmBack”);;
if (kc === 27) {
_this.hide();
} else if (kc === 13) {
_this.hide();
if (_this.get(“type”) === “confirm”) {
cb && cb(true);
}
}
});
},
alert: function (str, btnstr) {
var str = typeof str === ‘string’ ? str : str.toString(),
ovl = this.get(“ovl”);
this.set(“type”, “alert”);
ovl.find(“.J_WinpopMain”).html(str);
if (typeof btnstr == “undefined”) {
ovl.find(“.J_WinpopBtns”).html(HTMLS.alert);
} else {
ovl.find(“.J_WinpopBtns”).html(btnstr);
}
this.show();
},
confirm: function (str, callback) {
var str = typeof str === ‘string’ ? str : str.toString(),
ovl = this.get(“ovl”);
this.set(“type”, “confirm”);
ovl.find(“.J_WinpopMain”).html(str);
ovl.find(“.J_WinpopBtns”).html(HTMLS.confirm);
this.set(“confirmBack”, (callback || function () { }));
this.show();
},
show: function () {
this.get(“ovl”).show();
this.get(“mask”).show();
},
hide: function () {
var ovl = this.get(“ovl”);
ovl.find(“.J_WinpopMain”).html(“”);
ovl.find(“.J_WinpopBtns”).html(“”);
ovl.hide();
this.get(“mask”).hide();
},
destory: function () {
this.get(“ovl”).remove();
this.get(“mask”).remove();
delete window.alert;
delete window.confirm;
}
};
var obj = new Winpop();
window.alert = function (str) {
obj.alert.call(obj, str);
};
window.confirm = function (str, cb) {
obj.confirm.call(obj, str, cb);
};
})(window, jQuery);
</script>
</body>
</html>
代码略多，关键做以下几点说明：
1、笔者偷了懒，使用了jQuery，使用之前请先保证已经引入了jQuery
2、自定义组件结构最终是追加到body中的，所以在引入以上js之前，请先确保文档已经加载完成
3、组件添加了按ESC、点遮罩层隐藏组件功能
注意：虽然本例中未用到 destory 方法，但读者朋友可以注意一下该方法中的 delete window.alert 和 delete window.confirm ，这样写的目的是保证在自定义组件销毁后，将Alert、Confirm控件恢复到浏览器内置效果
4、组件最后如果加上 window.Winpop = Winpop ，就可以将对象全局化供其他类调用了
作为一个前端开发工程师，个人觉得Javascript组件开发是一件很有意思的事情，其中乐趣只有自己亲自动手尝试了才会体会得到。前端组件开发往往需要Javascript、css和html相互配合，才能事半功倍，上面提到的Winpop也不例外，这里给大家提供一个完整的demo压缩包，有兴趣的读者朋友，欢迎传播。
| 前端开发 手机端 |
| 前端开发在手机上直接显示的吗 |
| web前端开发手机模拟器 |
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册