Teknik Dailog_javascript berdasarkan BootStarp

Pengenalan kepada BootStrip

Bootstrap, daripada Twitter, ialah rangka kerja bahagian hadapan yang sangat popular.

Bootstrap adalah berdasarkan HTML, CSS dan JAVASCRIPT Ia ringkas dan fleksibel, menjadikan pembangunan web lebih pantas. Ia dibangunkan oleh pereka Twitter Mark Otto dan Jacob Thornton dan merupakan rangka kerja CSS/HTML.

Bootstrap menyediakan spesifikasi HTML dan CSS yang elegan, yang ditulis dalam bahasa CSS dinamik Less. Bootstrap telah menjadi sangat popular sejak dilancarkan dan telah menjadi projek sumber terbuka yang popular di GitHub, termasuk Berita Terkini MSNBC (Microsoft National Broadcasting Company) NASA. Beberapa rangka kerja yang biasa kepada pembangun mudah alih domestik, seperti rangka kerja sumber terbuka bahagian hadapan hadapan WeX5, juga berdasarkan kod sumber Bootstrap untuk pengoptimuman prestasi.

1.1. Bantu dokumen kata kunci

kotak modal boosttrap oaoDailog

1.2. Senario penggunaan

Apabila mengklik butang pada halaman web, pengguna perlu digesa untuk pengesahan Pengguna boleh mengklik butang pengesahan untuk meneruskan pelaksanaan, atau pengguna mengklik butang batal untuk membatalkan operasi pelaksanaan

Apabila anda mengklik untuk melihat halaman web dan data yang dipaparkan perlu dipaparkan menggunakan kotak pop timbul, anda boleh menggunakan oaoDailog

1.3 Skema

Modal berdasarkan boostrap3.0, jquery1.9

1.4. Arahan penggunaan

Mengapa anda memerlukan oaoDailog?

a. Disebabkan oleh modal yang disediakan oleh boostrap3.0, anda mesti mentakrifkan kod tersembunyi mod div pada halaman dan pengguna menulis kandungan yang perlu dipaparkan ke dalam div Jika halaman mempunyai berbilang kotak modal , maka Ia adalah perlu untuk menulis berbilang kotak modal tersembunyi div kod tersembunyi, yang sudah pasti berlebihan.

b. Memandangkan mod lalai tidak mempunyai butang pengesahan dan batal, sudah tentu kita boleh menulis dua butang dalam div tersembunyi kotak modal, tetapi kita juga perlu menulis js untuk memantau operasi yang dilakukan selepas butang pengesahan adalah diklik, dan pada masa yang sama Operasi yang dilakukan oleh butang pengesahan adalah berkaitan dengan data yang diklik oleh pengguna apabila ia muncul tidak memberikan kami cara untuk memindahkan data.

c. oaoDailog versi 1.0.0 terutamanya menyelesaikan masalah penggunaan kotak modal bootstrap dan redundansi kod yang menyusahkan.

Rendering:

Mulakan

1. Perkenalkan oaoDailog.js

Kod:

<script type="text/javascript" src="${ctx}/static/jquery/jqueryApi/oaoDialog/oao.dialog.js" charset="UTF-8"></script>

2. Panggil kod untuk memaparkan kotak timbul

Kod:

oao.dialog({
title:"删除提示框",
content:"请确认是否真的删除，删除后将无法恢复!",
ok:function(){
oao.dialog.close();
}
});

这就是一个基本也是使用最常见的确认弹出框的使用方法。

1.5. API

oao.dialog()：这个方法是生成弹出框的方法，传入的参数是一个json对象，当然你也可以什么都不传，那样会弹出一个空白的弹出框，这是没有问题的。下面分别介绍每个参数的意思以及默认值。

属性名	属性类型	说明	默认值
title	String	弹出框标题	提示
content	String	弹出框的主要内容，可以是文本和html代码	空
okVal	String	确认按钮的自定义文字	确认
ok	Function/boolean	点击确认执行的方法	关闭功能
cancelVal	String	取消按钮的自定义文字	取消
cancal	Function/boolean	点击取消执行的方法	关闭功能

•oao.dialog.close():关闭模态框

1.6. 待支持的功能 1.目前弹出框的内容只支持文字和静态html，不支持url请求

2.目前最多只能显示两个按钮，不支持自定义按钮，后续支持

3.目前弹出框的位置和大小不支持自定义

4.目前的弹出框一次只能弹出一个，不支持弹出框中再弹出一个模态框(bootstrap modal底层不支持)

敬请期待，下个版本见。

/*!
* oaoDialog 1.0.0
* author:xufei
* Date: 2015-7-9 1:32
* http://www.oaoera.com
* Copyright © 2014 www.oaoera.com Inc. All Rights Reserved. 沪ICP备13024515号-1 上海义信电子商务有限公司 
*
* This is licensed under the GNU LGPL, version 2.1 or later.
* For details, see: http://creativecommons.org/licenses/LGPL/2.1/
*/
//oao命名空间
oao = {};
oao.init = function(settings){
var defaultSettings ={
title : "提示",
content:"",
okVal:"确认",
cancalVal:"取消",
ok:function(){
$("#oaoModal").modal('hide');
},
cancel:function(){
$("#oaoModal").modal('hide');
},
close:false
}
oao.settings = $.extend({}, defaultSettings, settings || {});
return oao.settings;
}
oao.initContent = function(){
var modelHtml = 
"<div id=\"oaoModal\" class=\"modal fade delete_modal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\" >"+
" <div class=\"modal-dialog\">"+
" <div class=\"modal-content\">"+
" <div class=\"modal-header\">"+
" <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">×</span></button>"+
" <h4 class=\"modal-title\"></h4>"+
" </div>"+
" <div class=\"modal-body\" style=\"text-align:center;\">"+
" </div>"+
" <div class=\"modal-footer\">"+
" <button type=\"button\" class=\"btn btn-default modalCancel\"></button>"+
" <button type=\"button\" class=\"btn btn-primary modalOK\"></button>"+
" </div>"+
" </div>"+
" </div>"+
" </div>";
var $modelHtml = $(modelHtml);
$(".modalOK",$modelHtml).text(oao.settings.okVal);
$(".modalCancel",$modelHtml).text(oao.settings.cancalVal);
$(".modal-title",$modelHtml).text(oao.settings.title);
$(".modal-body",$modelHtml).html(oao.settings.content);
if(!oao.settings.ok){
$(".modalOK",$modelHtml).remove();
}
if(!oao.settings.cancel){
$(".modalCancel",$modelHtml).remove();
}
$("body").append($modelHtml);
}
//弹出对话框的方法
oao.dialog = function(settings){
settings = oao.init(settings);
oao.initContent();
//关闭的时候调用方法
$('#oaoModal').on('hidden.bs.modal', function (e) {
if(oao.settings.close){
oao.settings.close();
}
$("#oaoModal").remove();
})
if(oao.settings.ok){
$("#oaoModal .modalOK").click(settings.ok);
}
if(oao.settings.cancel){
$("#oaoModal .modalCancel").click(settings.cancel);
}
$("#oaoModal").modal('show')
.css({
"margin-top": function () {
return ($(this).height() / 2-200);
}
});;
}
//关闭对话框的方法
oao.dialog.close = function(){
$("#oaoModal").modal('hide');
}