首頁 > web前端 > js教程 > 主體

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

零下一度
發布: 2017-06-19 15:17:17
原創
2242 人瀏覽過

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板