本人有點懶,所以關於jquery ui 的教程一直都沒更新,見諒了,jquery ui 入門為大家大概講解了下jquery ui 的概念、用途以及大致的結構,從這篇文章開始,我們就要開始講解jquery ui 中的具體的一些組件的使用方法,本文講解jquery ui dialog 的使用:
我們在做互動的時候常常要用到對話框,沒錯jquery ui dialog 就是為此而生的,jquery ui dialog 為我們提供了一個簡單的介面#來實現平常需要大量javascript 程式碼來實現的效果,我們可以使用jquery ui dialog 實現很多的功能,例如做登入、註冊和訊息提示等功能。
在使用dialog 元件前,先將dialog 所依賴的js 文件引入頁面中,這些文件包括js 文件和css 文件,所有的dialog 樣式的實例代碼,在/development-bundle/demos /dialog/目錄下,打開原始碼看到一種類型的dialog 的使用方法,如果是不明白我在說什麼,就先去看看,下載了jquery UI 後如何使用。如果你還沒有jquery ui 程式碼包,那你就先去下載:各版本jquery UI 下載
我們以/development-bundle/demos/dialog/default.html 為例看下jquery ui dialog 的頭部文件引入情況
<!--载入主题样式--> <script type="text/javascript" src="../../jquery-1.6.2.js"></script> <!--载入 jquery 核心类库--> <script type="text/javascript" src="../../external/jquery.bgiframe-2.1.2.js"></script> <!--这个主要是为了兼容 IE6 而载入的一个插件--> <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <!--载入 jquery ui 核心类库--> <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <!--载入 jquery ui 组件核心类库--> <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> <!--载入 jquery ui 鼠标相关组件--> <script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script> <!--载入 jquery ui 拖动相关组件,主要是为了让 dialog 能够被拖动--> <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> <!--载入 jquery ui 位置相关组件,主要是为了让 dialog 能够居中或者控制位置--> <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> <!--载入 jquery ui 调整大小相关组件,主要是为了让 dialog 的大小能够通过鼠标来调整--> <script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script> <!--载入 jquery ui 对话框组件-->
這些引入的文件,有些不是必要的,需要根據dialog 的參數來定,比如你不需要調整dialog 的大小,你就沒有必要載入jquery.ui.resizable. js 這個文件,再看看dialog 是如何被彈出的,
<script type="text/javascript"> $(function() { $( "#dialog" ).dialog(); }); </script>
沒錯,dialog 的使用就是這麼簡單,當然dialog 還有很多的參數來幫助你實現很多複雜的功能,我們在後面還會給大家講解,這些參數的使用基本上都很簡單。
以上是jQuery UI 使用之dialog的使用教學課程的詳細內容。更多資訊請關注PHP中文網其他相關文章!