前端初階jQuery UI實用教學-基礎篇
作者/顏怡宏 Bob
Yen
精誠資訊/恆逸教育訓練中心-資深講師
jQuery UI是以 jQuery為基礎的開源JavaScript 網頁用戶界面程式碼，jQuery UI互動元件架構在廣受好評的jQuery之上，因此擁有最佳的效能與相容度，目前也是相關元件開發工具的首選，只要善加使用jQuery UI這個強大又輕巧的工具，就能在開發網站時如虎添翼，輕易完成許多互動的效果、甚至加入動畫，更別說是常見的日期選擇器、表單、滑棒、手風琴與自動填表等網頁中必要的功能。
jQuery UI中各種便利的功能。透過範例中簡單的步驟，就能產生美觀的元件，使製作的網頁更加精采。而在網頁中一些常見的互動指令如拖曳、排列、縮放等行為，在jQuery UI中只需要一行指令，再透過簡單設定就能夠完美呈現，完全不需要像使用單純JavaScript開發般的冗長與困難。以下我們透過一個簡單的例子-使用jQuery UI打造檢色器，來示範jQuery UI快速易上手的特性。
【
相信很多寫程式的朋友，當使用輕量級的文字編輯器編寫程式時，會有需要選取出顏色的需求，但是工具中並沒有提供可以挑選顏色的檢色器功能，此時就能夠使用這個小程式來自行製造檢色器。我們可以藉由jQuery UI的滑棒元件，以短短幾行程式，依照下面的步驟，就能夠輕易做出檢色器。
1、首先只要在<body>區塊中，首先建立五個元件，第一個h1物件能夠讓數值以文字的方式輸出。然後放置三個jQuery UI的滑棒，分別代表紅Red、綠Green、藍Blue三個顏色，最後再放一個Div成為顏色視覺呈現的區域。設定如下：
2、接著在<style>區塊中設定這些元件的CSS外觀屬性
3、然後先引入jQuery.js這個javascript檔案來使用，可以由jQuery官方網站下載。
4、接著於下方引入jQueryUI.js與jQueryUI.css這兩個檔案來使用，可以由jQueryUI官方網站下載。
5、最後於<script>標籤中再加入以下javascript程式碼就可以完成了。
6、如此就能夠成功做出檢色器，並且能夠拷貝上方數值，在程式中使用。
如果想要設計出一個互動良好的網站，也希望能有各種美觀的互動元件來豐富網頁，但是又不想深入學習複雜的JavaScript；或是希望能夠大幅縮短開發時間，提升生產力，jQuery UI都是不可或缺的絕妙工具。
🔰相關網站
✅jQuery UI 官網：http://jqueryui.com/
🔰除了以上資源，您還可以在「優勢多媒體前端互動設計課程」學習更多專業技巧：
✅【AACC】Sass與SCSS快速上手
0 意見:
張貼留言