生活随笔
收集整理的這篇文章主要介紹了
深入浅出jQuery (五) 如何自定义UI-Dialog？
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
前言 隨著Web網頁的開速度，jQuery庫越來越不能滿足開發人員的需要，慢慢的有人開發出來了jQuery-UI庫，專門用來設計Web前端的界面庫，我們只需在程序中引入這個庫即可輕松便捷的設計出各種絢麗的界面效果。簡介 jQuery-UI（User Interface）是在jQuery庫的基礎之上開發的，因此它依賴于jQuery，目前jQuery-UI已經開發到了1-9-0版本，里面提供了平時開發中常用的大部分界面效果，比如按鈕、滾動條、GridView、彈出框等等，另外如果你水平夠高，還可以自己開發UI控件，目前很多公司里面都在用它來開發前臺。一種最簡單的例子--Dialog 如果想在Web頁面上出現一個提示信息對話框，一般有兩種方法，一是在JavaScript中內置的???? Confirm()、Alert()之類的；另一種是Web頁面，設置它的大小改變的和對話框類似，但這兩種對話框局限性比較大，滿足不了我們開發中的需求，至少你不能在上面自定義按鈕、顯示圖片、視頻等等，而Dialog可以，它不僅僅提供了很多默認屬性，還可以自定義新屬性，大大擴展了對話框的功能，下面先看一下它常用的屬性、方法。應用 引入用到的UI庫以及CSS，如下 <link rel="stylesheet" href="css/jquery.ui.all.css"><script src="script/jquery-1.4.4.js"></script><script src="script/external/jquery.bgiframe-2.1.2.js"></script><script src="script/jquery.ui.core.js"></script><script src="script/jquery.ui.widget.js"></script><script src="script/jquery.ui.mouse.js"></script><script src="script/jquery.ui.button.js"></script><script src="script/jquery.ui.draggable.js"></script><script src="script/jquery.ui.position.js"></script><script src="script/jquery.ui.resizable.js"></script><script src="script/jquery.ui.dialog.js"></script><link rel="stylesheet" href="css/demos.css">
建立一個DIV標簽，如下 <body>//打開對話框按鈕<input id="btn" type="button" value="打開對話框" />//DIV標簽<div id="dialog" title="信息提示框"><p>你好！李龍生</p></div>
</body>
現在就可以建立對話框了，然后，我們可以根據自己需要定制一些屬性值 <script type="text/javascript">$(function() {//單擊確定按鈕時，從對話框中取得數據var getResponse=function(){//更新數據庫操作var value;value=$("p").val();alert(value);//關閉對話框$( this?).dialog( "close" );};//單擊取消按鈕var doCancel=function(){$( this?).dialog( "close" );};//設置對話框的默認值var dialogOpts={
//添加按鈕buttons:{Ok:getResponse,cancel:Cancel},//禁止自動開發autoOpen:false,//關閉時效果hide:true};//加載對話框$( "#dialog" ).dialog(dialogOpts);//按鈕的單擊事件$("#btn").click(function(){//打開對話框$( "#dialog" ).dialog("open");});});</script>默認值dialogOpts通過聲明一個對象數組，并賦初值來綁定自己寫插件默認值可以通過$.extend 來自定義Button，通過Key/Value方式設定，Value值表示一個CallBack回調函數，當單擊某一個按鈕時相應的回調函數就會觸發，然后，執行代碼。 例如：當對話框是一個刪除提示時，單擊了確定按鈕，就會執行給確定按鈕設置的回調函數，更新數據庫操作等需要注意的是當自己寫函數之后，后面需要用到的函數要寫在前面，否則經常找不到它的各種樣式，背景、顏色等可以自定義，需要在CSS文件里面修改??4區別
jQuery UI實際上是jQuery插件，專指由jQuery官方維護的UI方向的插件jQuery UI 與 jquery 的主要區別是：jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。jQuery UI則是在jQuery的基礎上，利用jQuery的擴展性，設計的插件。提供了一些常用的界面元素，諸如對話框、拖動行為、改變大小行為等等。jQuery本身注重于后臺，沒有漂亮的界面，而jQuery UI則補充了前者的不足，他提供了華麗的展示界面，使人更容易接受。既有強大的后臺，又有華麗的前臺。? 5.下載
???????? 關于jQuery-UI以及更多內容可以看這個網站http://www.packtpub.com/
?
?
轉載于:https://www.cnblogs.com/lilongsheng/archive/2013/03/20/3226055.html
總結
以上是生活随笔為你收集整理的深入浅出jQuery (五) 如何自定义UI-Dialog？的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
