JqueryUI入門

Jquery UI 是一套開源免費的、基于Jquery的插件,在這里記錄下Jquery UI 的初步使用。

第一、下載安裝

    下載Jquery,官網:http://jquery.com;  下載Jquery UI,官網:http://jqueryui.com/

    Jquery的部署就不說了,說下Jquery UI的部署;以jquery-ui-1.9.1為例,如果只是簡單使用Jquery UI的話,導入jquery-ui-1.9.1.custom.min.js和jquery-ui-1.9.1.custom.min.css就夠了,想更深入了解的話,建議使用theme方式:解壓下載的Jquery UI后,找到themes目錄,把它copy到項目中,然后找到ui目錄,把ui目錄copy到themes目錄下。如圖:

  基本準備完成。

第二、初步使用

  下面我們創建一個頁面,演示一個手風琴的效果(accordion組件)

  1、引用css

<link rel="Stylesheet" type="text/css" href="themes/base/jquery.ui.all.css" />

?

  2、引用Js

<script type="text/javascript" src="themes/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="themes/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="themes/ui/jquery.ui.accordion.js"></script>

?

  3、實現代碼

?

<!-- Html代碼 -->
<div id="accordion" class="ui-widget-content"   style="height: 80%;"><h6><a href="#">用戶管理</a></h6><div>...</div><h6><a href="#">商品管理</a></h6><div>...</div><h6><a href="#">訂單管理</a></h6><div><ul><li><a href="#">訂單管理</a></li><li><a href="#">收貨地址管理</a></li><li><a href="#">退貨管理</a></li></ul></div><h6><a href="#">統計</a></h6><div>...</div>
</div>
<!-- JavaScript代碼 -->
<SCRIPT type=text/javascript>//初始化手風琴function initAccordion(){$( "#accordion" ).accordion({collapsible: true});}$(document).ready(function() {//手風琴initAccordion();});
</SCRIPT>

?  4、實現效果

第三、主題風格的使用

?  可能有人說上面的例子做出來的色調和我的不一樣,那是因為我們用的主題風格不一樣。下面我們來做一個更換主題的應用。

  1、下載主題

    可以進官網的Themes頁面選擇需要的主題下載,如圖:

  不過我個人不推薦這種方式(下載不方便、會有很多重復的東西)。我更喜歡一次性下載所有主題,簡單快捷還沒有重復的東西,一次性下載,可以進首頁底端找到Themes下載,如圖:

  2、部署

    下載完后解壓,在themes目錄下有各個主題對應的目錄,打開這些目錄,你會發現各個主題就是用了不同圖片和jquery.ui.theme.css這個樣式文件。好了,找到關鍵了,那我們看一下jquery.ui.theme.css文件是在哪里引用的呢?打開jquery.ui.all.css文件就知道是這里引用了

@import "jquery.ui.base.css";
@import "jquery.ui.theme.css";

    接下來就好辦了,首先,我們在項目的themes目錄下建立一個目錄,把base目錄下的除jquery.ui.theme.css、jquery-ui.css外的css樣式文件全放進去

    然后打開jquery.ui.all.css文件,把@import "jquery.ui.theme.css";這句干掉;然后把各個主題的目錄copy到themes目錄下

    到此,部署完畢。

?

  3、實現更換主題代碼

<link id="theme" rel=stylesheet type=text/css  href="themes/dot-luv/jquery.ui.theme.css">
<link rel=stylesheet type=text/css  href="themes/all/jquery.ui.all.css">

?  

<!-- Html代碼 -->
<select id="theme_changer"><option value="themes/dot-luv/jquery.ui.theme.css" selected="selected">Dot-luv Theme</option><option value="themes/hot-sneaks/jquery.ui.theme.css" >Hot-sneaks Theme</option><option value="themes/flick/jquery.ui.theme.css" >Flick Theme</option><option value="themes/ui-darkness/jquery.ui.theme.css" >Ui-darkness Theme</option><option value="themes/vader/jquery.ui.theme.css" >Vader Theme</option></select>
JavaScript代碼<!-- JavaScript代碼 -->    //更改主題function initTheme(){$('#theme_changer').change(function() {// alert("changer theme");var theme = $(this).find("option:selected").val();// alert(theme);$('#theme').attr('href', theme);});}$(document).ready(function() {//主題
        initTheme();//手風琴
        initAccordion();});

實現效果如下:

轉載于:https://www.cnblogs.com/exmyth/archive/2012/12/27/2835816.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/376971.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/376971.shtml
英文地址,請注明出處:http://en.pswp.cn/news/376971.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

gp的分布、分區策略(概述)

對于大規模并行處理數據庫來說&#xff0c;一般由單master與多segment組成。 那么數據表的單行會被分配到一個或多個segment上&#xff0c;此時需要想一想分布策略 分布 在gp6中&#xff0c;共有三個策略&#xff1a; 哈希分布 隨機分布 復制分布 哈希分布 就是對分布鍵進行…

[ Java4Android ] Java基本概念

視頻來自&#xff1a;http://www.marschen.com/ 1.什么是環境變量 2.JDK里面有些什么&#xff1f; 3.什么是JRE&#xff1f; 什么是環境變量&#xff1f; 1.環境變量通常是指在操作系統當中&#xff0c;用來指定操作系統運行時需要的一些參數; 2.環境變量通常為一系列的鍵值對&…

_thread_in_vm_Java Thread類的靜態void sleep(long time_in_ms,int time_in_ns)方法,帶示例

_thread_in_vm線程類靜態無效睡眠(long time_in_ms&#xff0c;int time_in_ns) (Thread Class static void sleep(long time_in_ms, int time_in_ns)) This method is available in package java.lang.Thread.sleep(long time_in_ms, int time_in_ns). 軟件包java.lang.Thread…

大規模web服務開發技術(轉)

前段時間趁空把《大規模web服務開發技術》這本書看完了&#xff0c;今天用一下午時間重新翻了一遍&#xff0c;把其中的要點記了下來&#xff0c;權當復習和備忘。由于自己對數據壓縮、全文檢索等還算比較熟&#xff0c;所以筆記內容主要涉及前5章內容&#xff0c;后面的零星記…

IO多路復用的三種機制Select,Poll,Epoll

IO多路復用的本質是通過系統內核緩沖IO數據讓單個進程可以監視多個文件描述符&#xff0c;一旦某個進程描述符就緒(讀/寫就緒)&#xff0c;就能夠通知程序進行相應的讀寫操作。 select poll epoll都是Linux提供的IO復用方式&#xff0c;它們本質上都是同步IO&#xff0c;因為它…

qt中按鈕貼圖

一.QT之QPushButton按鈕貼圖 二.QT之QToolButton按鈕貼圖 一.QT之QPushButton按鈕貼圖具體操作流程 1. Qt Designer中拖入一Tool Button 2. 選擇圖標的圖片放入工程目錄下&#xff0c;如放在Resources內 3. 雙擊工程的Resource Files下的qrc文件&#xff0c;如圖 4. 在彈出的窗…

Ubuntu手動編譯gVim7.3修復終端啟動時與ibus的沖突

個bug伴隨著Ubuntu/ibus的升級苦憋已久&#xff0c;癥狀為終端啟動gvim時卡死&#xff0c;gvim -f可以緩解此問題&#xff0c;但偶爾還是要發作&#xff0c;況且每次末尾托個&也不方便。其實新版gvim已經修復此bug&#xff0c;不過ubuntu安裝包一直沒更新&#xff0c;那我們…

Android Activity類講解(一)

--by CY[kotomifigmail.com] &#xff11;&#xff0e;protected void onCreate(Bundle savedInstanceState) { throw new RuntimeException("Stub!");   } 當創建一個Activity時&#xff0c;系統會自動調用onCreate方法來完成創建工作&#xff0e;該創建工作包括布…

Mysql的undo、redo、bin log分析

目錄關于undo log關于redolog關于binlog一個事務的提交流程undo log :記錄數據被修改之前的樣子 redo log&#xff1a;記錄數據被修改之后的樣子 bin log&#xff1a;記錄整個操作。 關于undo log 關于undo log&#xff1a; 在執行一條涉及數據變更的sql時&#xff0c;在數據…

typedef 字符串_typedef在C中使用字符數組(定義別名來聲明字符串)的示例

typedef 字符串Here, we have to define an alias for a character array with a given number of maximum characters length to read strings? 在這里&#xff0c;我們必須為具有給定最大字符長度數的字符數組定義別名&#xff0c;以讀取字符串 &#xff1f; In the below-…

最小堆實現代碼

參考算法導論、數據結構相關書籍&#xff0c;寫得最小堆實現的源代碼如下&#xff1a; 1 //2 //--最小堆實例3 //4 5 #include <iostream>6 #include <vector>7 #include <string>8 using namespace std;9 10 template<typename Comparable>11 class m…

非常好的在網頁中顯示pdf的方法

今天有一需求&#xff0c;要在網頁中顯示pdf&#xff0c;于是立馬開始搜索解決方案&#xff0c;無意中發現一個非常好的解決方法&#xff0c;詳見http://blogs.adobe.com/pdfdevjunkie/web_designers_guide。 其實就光看這個網站也足夠了&#xff0c;http://www.pdfobject.com/…

Redis字典實現、Hash鍵沖突以及漸進式rehash

本筆記參考《Redis設計與實現》 P24~ 37 目錄Redis字典實現哈希表節點結構哈希表結構字典哈希算法解決hash沖突rehash漸進式hashRedis字典實現 哈希表節點結構 typedef struct dictEntry {// 鍵void *key;// 值 : 可以是一個指針&#xff0c;或者是一個uint64/int64 的整數un…

Java線程類void setContextClassLoader(ClassLoader loader)方法,帶示例

線程類void setContextClassLoader(ClassLoader loader) (Thread Class void setContextClassLoader(ClassLoader loader)) This method is available in package java.lang.Thread.setContextClassLoader(ClassLoader loader). 軟件包java.lang.Thread.setContextClassLoader(…

JPA概要

本文最新版已更新至&#xff1a;http://thinkinside.tk/2012/12/30/JPA.html JPA定義了Java ORM及實體操作API的標準。本文摘錄了JPA的一些關鍵信息以備查閱。 如果有hibernate的基礎&#xff0c;通過本文也可以快速掌握JPA的基本概念及使用。 Table of Contents 1 JPA概述2 實…

如何配置能讓fiddler抓去https的請求?

1、打開fiddler&#xff0c;>>Tools>>Fiddler Options&#xff0c; 打開如圖所示的HTTPS配置項&#xff1a;點擊Export Rppt Certifica to Desktop :桌面上多了一個證書&#xff1a;下面就是將證書導入&#xff1a;點擊開始-運行&#xff0c;輸入&#xff1a;mmc,…

Redis對象的refcount與lru屬性(內存回收、對象共享、空轉時長)

本筆記參考《Redis設計與實現》 P84~P88 內存回收 Redis在對象系統中使用reference counting技術實現了內存回收機制。程序可以通過跟蹤對象的引用計數信息&#xff0c;在適當的時候自動釋放對象并進行內存回收。 typedef struct redisObject {// ...// 引用計數int refcoun…

【閑聊】Baidu Map,excellent !!!Diaoyv island is China 's

【釣魚島】釣魚島是中國的&#xff01;Diaoyu Islands are Chinas! 釣魚島は中國のアール! ————————————youngLaker轉載于:https://www.cnblogs.com/younglaker/archive/2012/12/31/2840190.html

08:vigenère密碼_密碼技術:Vigenére密碼,Playfair密碼,Hill密碼

08:vigenre密碼1)Vigenre密碼 (1) Vigenre Cipher) This technique is an example of Polyalphabetic Substitution technique which uses 26 Caesar ciphers make up the mono-alphabetic substitution rules which follow a count shifting mechanism from 0 to 25. That is,…

Redis的RDB文件與AOF文件

本筆記參考《Redis設計與實現》 P118 ~ P150 RDB文件 1、RDB文件用于保存和還原Redis服務器所有數據庫中的所有鍵值對數據 2、SAVE命令由服務器進程直接執行保存操作&#xff0c;該命令會阻塞服務器 3、BGSAVE命令由子進程執行保存操作&#xff0c;不會阻塞服務器 注意此時服…