jQuery,實現想彈出什麼,彈出什麼(彈出提示、彈出一個新的頁面等等)
阿新 • • 發佈:2019-02-14
先要明白,彈窗的原理是什麼,
彈出是假,重繪是真。其實是出發某個JavaScript之後,對當前頁面進行了重繪(即重新組合html頁面給瀏覽器,瀏覽器重新解析,給人一種彈出的感覺)。
-------因此,彈出其實是重繪。
框架一般都提供了重繪的方法,來實現彈出效果,如jQuery的 model({ })方法。
參考文件:http://www.jq22.com/jquery-info505
----------------------親手實踐
使用基於jQuery的amazeui框架,實現過程如下:
function alerttest(t) {//點選,查詢該識別號,有多少個船;彈出列表
if ($('*[index-alert]').length > 0) {
$('*[index-alert]').each(function(i, n) {
$(n).remove();
})
}
var numberNo= $("#numberNo").val();
var data = {};
data["numberNo"] = numberNo;
var win = [];
win.push('<div class="am-modal am-modal-alert" index-alert tabindex="-1" style="width:600px;height:400px">');//這裡標紅class用來通過css控制這個div不顯示,如果沒有這個話,隨著後面 $('body').append($win);的執行,會
win.push('<div class="am-modal-dialog" style="border:1px solid #000;">'); win.push('<div class="am-modal-hd" style="text-align:left">'); win.push('<div data-am-widget="titlebar" class="am-titlebar am-titlebar-default" >'); win.push('<h2
class="am-titlebar-title">'); win.push("列表"); win.push('</h2>'); win.push('</div>'); win.push('</div>'); win.push('<div class="am-modal-bd am-scrollable-horizontal">'); win.push('<table class="am-table am-table-bordered am-text-nowrap">'); win.push('<thead>');
win.push('<tr>'); win.push('<th type="indexcolumn" style="text-align: center; width: 60px">序號</th>'); win.push('<th type="checkcolumn" field="NAME" style="width: 40px;">名稱</th>'); win.push('<th type="checkcolumn" field="TIME" style="width: 40px;">時間</th>');
win.push('<th style="width: 160px">等級</th>'); win.push('<th style="width: 160px">型別</th>'); win.push('</tr>');; win.push('</thead>'); win.push('<tbody>'); var href = serviceUrl.url1 + "/ship/getShipByNo"; $.ajax( { url : href, async : false, data : data, type
: "post", cache : false, dataType : "json", success : function(F, D, C) { var xqo = eval(F); var s = xqo.data; for (var i in s) { win.push('<tr>'); win.push('<td>'); win.push(Number(i) + 1); win.push('</td>'); win.push('<td>'); win.push(s[i].NAME); win.push('</td>');
win.push('<td>'); win.push(s[i].TIME); win.push('</td>'); win.push('<td>'); win.push(s[i].GRADE); win.push('</td>'); win.push('<td>'); win.push(s[i].TYPE); win.push('</td>'); win.push('</tr>') } }}) ; win.push('</tbody>') win.push('</table>'); win.push('</div>');
win.push('<div class="am-modal-footer">'); win.push('<span class="am-modal-btn">關閉</span>') win.push('</div>'); win.push('</div>'); win.push('</div>'); var $win = $(win.join('')); $('body').append($win);//先新增到body的最後,即所有html程式碼的最後。 var $modal = $('*[index-alert]');//找到我要彈出的html程式碼
$modal.modal( {});//關鍵是這個,實現彈出效果;即jQuery的重繪,給人彈出的效果}
如果不加" am-modal am-modal-alert" ,效果是這樣的,不但彈出顯示,在灰色的的區域也顯示:
model({})中大括號是用來設定,寬度,在頁面中的彈出位置等使用的。
http://www.jq22.com/jquery-info505
可以看出,jQuery的model,任意彈出,實現原理是,先將要彈出的程式碼放在html頁面中,並隱藏起來,然後通過model({})彈出來(其實是重繪出來)。