欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery?UI組件介紹

 更新時(shí)間：2022年06月02日 10:27:23   作者：springsnow  
這篇文章介紹了jQuery的UI組件，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、jQuery UI簡(jiǎn)介

jQuery UI 是建立在 jQuery JavaScript 庫(kù)上的一組用戶界面交互、特效、小部件及主題。無(wú)論您是創(chuàng)建高度交互的 Web 應(yīng)用程序還是僅僅向窗體控件添加一個(gè)日期選擇器，jQuery UI 都是一個(gè)完美的選擇。

jQuery UI包含了許多維持狀態(tài)的小部件（Widget），因此，它與典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件（Widget）使用相同的模式，所以，只要您學(xué)會(huì)使用其中一個(gè)，您就知道如何使用其他的小部件（Widget）。

二、jQuery UI組件構(gòu)成

jQuery UI 主要分為3個(gè)部分：交互、微件和效果庫(kù)。

1、交互（Interactions）

交互部件是一些與鼠標(biāo)交互相關(guān)的內(nèi)容，包括縮放（Resizable） , 拖動(dòng)（Draggable） , 放置（Droppable） , 選擇（Selectable） , 排序（Sortable）等。

2、小部件（Widgets）

主要是一些界面的擴(kuò)展，包括折疊面板（Accordion） , 自動(dòng)完成（Autocomplete） , 按鈕（Button） , 日期選擇器（Datepicker） , 對(duì)話框（Dialog） , 菜單（Menu） , 進(jìn)度條（Progressbar） , 滑塊（Slider） , 旋轉(zhuǎn)器（Spinner） , 標(biāo)簽頁(yè)（Tabs） , 工具提示框（Tooltip）等，新版本的UI將包含更多的微件。

3、效果庫(kù)（Effects）

用于提供豐富的動(dòng)畫(huà)效果，讓動(dòng)畫(huà)不再局限于jQuery的animate()方法。包括特效（Effect） , 顯示（Show） , 隱藏（Hide） , 切換（Toggle） , 添加 Class（Add Class） , 移除 Class（Remove Class） , 切換 Class（Toggle Class） , 轉(zhuǎn)換 Class（Switch Class） , 顏色動(dòng)畫(huà)（Color Animation）等。

三、jQuery UI下載

jqueryui官網(wǎng) ：https://jqueryui.com/

中文API文檔：

一旦您對(duì) jQuery UI 有了基本了解，您就可以親自嘗試一下。請(qǐng)從 jQuery UI 網(wǎng)站上的 Download Builder（下載生成器） 頁(yè)面下載 jQuery UI 的副本。

四、jQuery UI 使用

一旦您下載了 jQuery UI，您將得到一個(gè) zip 壓縮包，包含下列文件：

  • /css/
  • /development-bundle/
  • /js/
  • index.html

在文本編輯器中打開(kāi) index.html，您將看到引用了一些外部文件：主題、jQuery 和 jQuery UI。通常情況下，您需要在頁(yè)面中引用這三個(gè)文件，以便使用 jQuery UI 的窗體小部件和交互部件：

<link rel="stylesheet" href="css/themename/jquery-ui.custom.css" rel="external nofollow"  />
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.custom.min.js"></script>

一旦您引用了這些必要的文件，您就能向您的頁(yè)面添加一些 jQuery 小部件。比如，要制作一個(gè)日期選擇器（datepicker）小部件，您需要向頁(yè)面添加一個(gè)文本輸入框，然后再調(diào)用 .datepicker()，如下所示：

HTML:

<input type="text" name="date" id="date" />

JavaScript:

$( "#date" ).datepicker();

到此這篇關(guān)于jQuery UI組件的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論