行使JQuery实现Web弹出编辑框
|
一．配景(Background) 跟着Ajax（Asynchronous Javascript And XML）的逐渐风行，我们可以通过Ajax实现一些以往只能在WinForm中才气做到的UI结果，最经典的就是弹出的模式对话框(Modal Dialog)了。基于Ajax的Web中模式对话框不单可以进步用户的UI体 验，更可以镌汰页面的不须要革新，镌汰与Web处事器的数据交互，从而镌汰不须要的Web处事器负载。 在猛火网的打点平台中，我们充实操作JQuery和Ajax实现了Web弹出对话框，代替了先前的弹出页面和页面跳转，进步了相应速率，增长了用户体验。 二．相干技能(Techniques) jQuery是继prototype之后又一个优越的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的工作。 它是轻量级的js库(压缩后只有21k) ，这是其余的js库所不及的，它兼容CSS3，还兼容各类赏识器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 jQuery是一个快速的，简捷的javaScript库，行使户能 更利便地处理赏罚HTML documents、events、实现动画结果，而且利便地为网站提供AJAX交互。在许多的电子商务网站（如猛火网）和派别网站中，都大量行使了JQuery完成一些殊效和交互，以补充HTML静态页面的不敷。 2. Ajax 猛火网中的顶部导航就是用Ajax技能来实现的。 三．实现弹出 对话框 传统的编辑单条数据的UI实现，一样平常为弹出一个对话框页面可能转到一个新页面，在修改完成后，封锁对话框页面可能跳转 回原页面，两种方法都有一些不行停止的缺陷： 1）弹出对话框页面的方法，常常会被赏识器所屏障（榨取弹出窗口），并且，假如封锁对话框之前在母页面上做了其他的操纵可能母页面已经被转到其他页面，那么对话 框封锁后的革新母页面要领就会失效，导致javascript错误乃至执行错误的操纵。 2）转到新页面的方法，是最为安详的做法，一样平常不会呈现逻辑错误，可是就意味着每次修改数据之 后，必需从头加载母页面，从头获取所稀有据的列表，这就无形中增进了不须要的处事器负载。 因此，我们回收Jquery实现基于Ajax的弹出对话框来实现编辑成果，它具有无需弹出新页面，无需从头加载列表，最小化与处事器数 据交互的特征。 2.JQuery实现基于Ajax的弹出对话框 起首，我们界说Ajax的处事器端处理赏罚页面，好比Ajax.aspx，而且界说好相干的处理赏罚函数，给客户端返回JSON数据，虽然，尚有执行某些数 据修改的Ajax要领的界说： protected void Page_Load(object sender, EventArgs e) { Response.Charset = "utf-8"; Response.ContentType = "text/plain"; string action = Request["a"].Trim(); switch (action.ToLower()) { case "method1": Method1(); break; …… private void method1() { …… Response.Write(JsonConvert.SerializeObject(ret)); } 然后，我们在客户端界说好所必要对话框的HTML，而且计划好样式， <div class="jqmWindow" id="dialog"> <div class="jqDrag modalPopupTitle" id="pnlTitle"> <span id="popupWinTitle">正在编辑XXX：</span> <input type="image" src="../imgs/closebutton.gif" class="closeButton jqmClose" title="封锁窗口" id="imgbtnClose" name="imgbtnClose" /> </div> <div class="holderDiv" id="Panel3">{这里是详细的编辑的内容}</div> <div style="padding: 10px; text-align: center;"> <input type="button" id="btnSave" value="生涯" /> <input type="button" id="btnCancel" value="打消" class="jqmClose" /> </div> </div> 接下来，我们就可以在javascript文件中完成JQuery的代码了。 $(document).ready(function() { $("#dialog").jqm({ modal: true }).jqDrag(".jqDrag"); …… $("a.edit").click(function(event) { initModal(); var id = $(this).parent().next().html(); // block界面，防备用户多次点击 $.blockUI({ message: '<h1><img src="../imgs/busy.gif" /> 请稍候...</h1>' }); $.ajax({ type: "POST", dataType: "json", url: "../Ajax.aspx?a=method1", data: { "Id": id }, success: function(data) { // 这里就可以插手填凑数据到对话框的代码了 }); // 表现对话框 $('#dialog').jqmShow(); event.preventDefault(); }); 同样地，也可以在JQuery中代码实现修改数据和删除数据的成果。 3.一些增补 （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
