"jQuery" perrašo "Bootstrap" stiliaus įspėjimo / patvirtinimo pranešimo langą

Admin · Paskelbta 2015-11-05 16:30:50

Manau, kad daugeliui žmonių atsibodo įspėjimų ir patvirtinimų atsiradimas, ir neseniai dirbo prie projekto, naudojančio bootstrap, ir, beje, jie inkapsuliavo bootstrap stiliaus pranešimų laukelį.

Tai labai paprasta įgyvendinti, bootstrap pats ateina su modaliniu modaliniu langeliu, kuris atrodo gana gerai:) tiesiog inkapsuliuoti jį ir naudoti.

Jokio kodo, jokios tiesos, mažiau kalbėti ir daugiau daryti, ir kodas.

Projektas yra Asp.net MVC architektūrą, kad būtų lengva skambinti, aš tiesiogiai pridėti šį HTML į visuotinį išdėstymo puslapį:

<div id="ycf-alert" class="modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h5 class="modal-title"><i class="fa fa-exclamation-circle"></i> [Title]</h5>
</div>
<div class="modal-body small">
<p>[Message]</p>
</div>
<div class="modal-footer" >
<button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>
<button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>
</div>
</div>
</div>
</div>

Kopijuoti kodą

Nedaug ką pasakyti, tai visi bootstrap modaliniai stiliai, draugai, kurie nėra susipažinę su juo, gali patikrinti bootstrap css, skliausteliuose [....] Turinys galiausiai bus pakeistas parametrų rodymu, kurį praleidome.

JS paketas atrodo taip:

$(function () {
window.Modal = function () {
var reg = new RegExp("\[([^\[\]]*?)\]", 'igm');
var alr = $("#ycf-alert");
var ahtml = alr.html();
//关闭时恢复 modal html 原样，供下次调用时 replace 用
//var _init = function () {
// alr.on("hidden.bs.modal", function (e) {
// $(this).html(ahtml);
// });
//}();
/* html 复原不在 _init() 里面做了，重复调用时会有问题，直接在 _alert/_confirm 里面做 */
var _alert = function (options) {
alr.html(ahtml); // 复原
alr.find('.ok').removeClass('btn-success').addClass('btn-primary');
alr.find('.cancel').hide();
_dialog(options);
return {
on: function (callback) {
if (callback && callback instanceof Function) {
alr.find('.ok').click(function () { callback(true) });
}
}
};
};
var _confirm = function (options) {
alr.html(ahtml); // 复原
alr.find('.ok').removeClass('btn-primary').addClass('btn-success');
alr.find('.cancel').show();
_dialog(options);
return {
on: function (callback) {
if (callback && callback instanceof Function) {
alr.find('.ok').click(function () { callback(true) });
alr.find('.cancel').click(function () { callback(false) });
}
}
};
};
var _dialog = function (options) {
var ops = {
msg: "提示内容",
title: "操作提示",
btnok: "确定",
btncl: "取消"
};
$.extend(ops, options);
console.log(alr);
var html = alr.html().replace(reg, function (node, key) {
return {
Title: ops.title,
Message: ops.msg,
BtnOk: ops.btnok,
BtnCancel: ops.btncl
}[key];
});
alr.html(html);
alr.modal({
width: 500,
backdrop: 'static'
});
}
return {
alert: _alert,
confirm: _confirm
}
}();
});

Kopijuoti kodą

// 四个选项都是可选参数
Modal.alert(
{
msg: '内容',
title: '标题',
btnok: '确定',
btncl:'取消'
});
// 如需增加回调函数，后面直接加 .on( function(e){} );
// 点击“确定” e: true
// 点击“取消” e: false
Modal.confirm(
{
msg: "是否删除角色？"
})
.on( function (e) {
alert("返回结果：" + e);
});

Kopijuoti kodą

Tinkas:

Taip pat yra keletas detalių, kurias reikia patobulinti, pvz., blockUI ir kt., Jei vėlu, pirmiausia eikite miegoti.

Užpildykite, kai turite laiko.

Originali nuoroda: http://www.tuicool.com/articles/mMNrIr

[Jquery] "jQuery" perrašo "Bootstrap" stiliaus įspėjimo / patvirtinimo pranešimo langą

Susijusios žinutės

Peržiūrėtos sekcijos