jQuery UI 使用之dialog的使用教學課程

本人有點懶，所以關於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中文網其他相關文章！