【jQueryUI】相容IE6的前端框架jQueryUI的Helloworld，對話面板，修改其所有元件的字型大小
jQueryUI與ExtJs是非常出名的UI，這兩個UI還有更大的一個好處就是相容IE6。雖然jQueryUI一直被人說醜，但是，一直是最受歡迎的前端框架之一。
雖然一個網站全部都用jQueryUI佈局很少，但是或多或少會用到裡面一些實用的元件的。
jQueryUI的下載，先到其官網http://jqueryui.com/（點選開啟連結），選擇Download，下載最經典的jquery-ui-1.9.2版，因為這是相容IE6的最後一版。
同時下載Legacy，這是一個自帶基本主題的核心包，同時下載Themes主題包，可以隨便替換。
下載之後解壓jquery-ui-1.9.2.zip，根據喜好解壓jquery-ui-themes-1.9.2.zip。
在你的站點目錄下新建一個資料夾，這裡是jquery-ui-1.9.2，將解壓後的jquery-ui-1.9.2.zip裡面的themes資料夾、ui資料夾與jquery-1.8.3.js拿走，如下圖：
順帶說一句，這個資料夾中的demo基本相當於API了，有很多例子，慢慢看。核心包的themes資料夾裡面就一種主題base，看你可以到將主題包jquery-ui-themes-1.9.2.zip解壓取其它，到時候引入注意修改路徑。
之後，由於原生的jQueryUI雖然自適應螢幕的，但是字型太大導致看起來很醜，所以我們固定其為12px。
具體是開啟themes/base（主題名）/jquery.ui.theme.css如下圖，將第17行的font-size從原來的1.1em改成12px。
之後開一個helloworld.html寫入如下程式碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Helloworld</title> <!--引入jQueryUI資源--> <link rel="stylesheet" href="jquery-ui-1.9.2/themes/base/jquery.ui.all.css"> <script type="text/javascript" src="jquery-ui-1.9.2/jquery-1.8.3.js"></script> <script type="text/javascript" src="jquery-ui-1.9.2/ui/jquery-ui.js"></script> <script type="text/javascript"> $(function(){ $("#button1").button();//宣告id=button1的button是一個jQueryUI的按鈕 $("#dialog1").dialog({//宣告id=dialog1是一個jQueryUI的對話面板 autoOpen:false//而且初始的時候，不要自動開啟。 }); }); function open_dialog(){ $("#dialog1").dialog("open");//開啟id=dialog1這個jQueryUI的對話面板 } </script> </head> <body> <!--對話面板的內容在這裡寫--> <div id="dialog1" title="對話方塊" style="width:100px"> <p>你好，世界！</p> </div> <!--按鈕--> <button id="button1" onclick="open_dialog()">開啟對話方塊</button> </body> </html>
便得到如下的效果，這是在IE6下測試的：
對比於ExtJS的UI《【ExtJs】ExtJs4.2.1的配置與Helloworld》（點選開啟連結），雖然jQueryUI沒有ExtJS那種非常適合做OA的效果，也沒有這麼多元件。
然而其使用HTML、CSS與JavaScript的混合，比起ExtJs純Javascript佈局好看得多，也好維護得多。ExtJs經常是出現沒完沒了的Javascript Json陣列巢狀又巢狀，而jQueryUI僅僅需要在你初始化的時候，宣告一下這個元件就可以了。
同時jQueryUI在其元件上的擴充性，修改方便程度，比ExtJs要好，比如上圖，完全可以在這對話方塊裡面，再放一個通過Ajax完成的表單。
相關推薦
【jQueryUI】相容IE6的前端框架jQueryUI的Helloworld，對話面板，修改其所有元件的字型大小
jQueryUI與ExtJs是非常出名的UI，這兩個UI還有更大的一個好處就是相容IE6。雖然jQueryUI一直被人說醜，但是，一直是最受歡迎的前端框架之一。 雖然一個網站全部都用jQueryUI佈局很少，但是或多或少會用到裡面一些實用的元件的。 jQueryUI的下載，
【JavaScript】相容IE6的JS模板化
所謂的JS模板化並不是什麼遙遠的東西，在Ajax運用越來越多的今天，這基本都快成為了一種基本訴求了。這東西離前端工程師們並不遙遠，舉個例子。 如下的一個簡單不能再簡單的效果，這個a=2，其中這個2的資料來自於Ajax返回。至於不知道什麼是Ajax的同學，可以參考《【Serv
【jQuery】相容IE6的圖表外掛Highcharts
在網頁中有時候需要畫出統計圖，尤其是一些OA系統中，這樣能夠給各位看官一個直觀的資料顯示。圖表用很多東西都能畫出來，比如JSP可以利用JAVA本身就有的繪圖函式，php有jpgraph外掛，具體請看《【php】使用jpgraph完成投票系統的普通使用者部分》（點選開啟連結）
【CSS】相容IE7的各個各樣的標題面板
在《【CSS】相容IE6的卡片式佈局》（點選開啟連結）已經介紹過如果用CSS畫出一塊一塊的卡片，現在介紹如何為這些卡片添磚加瓦，為這些卡片的加上標題。 如下圖所示，這是在現在部分網站很常用的兩種標題： 先是在IE8的效果 之後是在IE7的效果： 都是沒有什麼問題的，最後
【原創】Zend Framework 2框架之MVC
spa lov gef rst 當前 mage 匿名函數 skeleton 一個 ZendFramework 2框架之MVC作者：sys（360電商技術組）1.前言Zend Framework 2是zend官方推出的php開源框架，基於php5.3。他全然採用面向對象的代
【quickhybrid】架構一個Hybrid框架
體系 處理 cnblogs 瀏覽器 導航 重點 自定義 android 機制 前言 雖然說本系列中架構篇是第一章，但實際過程中是在慢慢演化的第二版中才有這個概念， 經過不斷的叠代，演化才逐步穩定 明確目標 首先明確需要做成一個什麽樣的框架？ 大致就是： 一套API規範（統
python web框架【補充】自定義web框架
數據大小 路徑 .py 用戶 ipa clr 接受 values 規範 http協議 HTTP簡介 HTTP協議是Hyper Text Transfer Protocol（超文本傳輸協議）的縮寫,是用於從萬維網（WWW:World Wide Web ）服務器傳輸超文本到本
【轉】在使用實體框架（Entity Framework）的應用中加入審計信息（Audit trail）跟蹤數據的變動
要求 date ted hang ng- tar () eat code 在一些比較重要的業務系統中，通常會要求系統跟蹤數據記錄的變動情況。系統要記錄什麽時間，什麽人，對那些信息進行了變動。 比較簡單的實現方式是在每個表中加入兩個字段CreatedBy和CreatedA
【node】----mocha單元測試框架-----【格爾尼卡ぃ】
ins number ber moc tutorial ride 對象 單元測試框架 cal 一、mocha簡介 單元測試是用來對一個模塊、一個函數、或者一個類來進行正確性的檢測工作 特點： 既可以測試簡單的JavaScript函數，又可以測試異步代碼，
【轉載】軟體架構與框架
參考文章連結：https://blog.csdn.net/weixin_36317299/article/details/80558632 https://blog.csdn.net/qq_33559972/article/details/80559846 https://blog.csdn.net/Go
【kafka】二、kafka框架介紹（消費者篇）：
本人菜雞，正在努力學習，記錄知識以備後患！ 該文章承接上文（kafka系列），暫有兩篇： 【kafka】一、kafka框架介紹（生產者篇）：https://blog.csdn.net/lsr40/article/details/84029034 【kafka】二、kafka框架介紹（消費
【kafka】一、kafka框架介紹（生產者篇）
嗯，菜雞是我，驕傲在敗壞以先，狂心在跌倒之前。所以有什麼說錯的地方，還請大家指出批評！ 繼爬蟲之後，kafka的介紹。 該系列文章暫時更新兩篇： 【kafka】一、kafka框架介紹（消費者篇）：https://blog.csdn.net/lsr40/article/details/84
【HTML】跳轉至框架內的一個指定的節
1、主檔案 <html> <frameset cols="20%,80%"> <frame src="HTML框架-跳轉至框架內的一個指定的節-a.html"></frame> <frame src="HTML框架-跳轉至
【Hadoop】MapReduce平行計算框架
MapReduce平行計算框架 基本知識 前言 核心概念 計算模型 系統架構 作業配置 計算流程與機制 作業提交和初始化 Mapper Reducer
【JAVA】幾個collection框架
arrays 影響 copy sort void array fill class pyo Arrays public static void main(String[] args) { //binarySearch,註意二分查找要求數組有序
【selenium】selenium 自動化測試框架部署1：selenium + JUnit + eclipse + testNG 環境部署
目錄 二、Firefox：Selenium IDE 安裝 三、jdk：下載和安裝 四、eclipse：下載和安裝 五、必要的jar包下載 六、eclipse：自動化測試框架環境部署 七、Firefox：Try Xpath 安裝 八、eclipse：安裝testNG外掛
【Android】影象濾鏡框架GPUImage從配置到應用
GPUImage簡介 GPUImage 是iOS下一個開源的基於GPU的影象處理庫，提供各種各樣的影象處理濾鏡，並且支援照相機和攝像機的實時濾鏡。GPUImage for Android是它在Android下的實現，同樣也是開源的。其中提供了幾十多種常見的圖片濾鏡API，且
【原創】基於NodeJS Express框架開發的一個VIP視訊網站專案及原始碼分享
專案名稱：視訊網站專案 開發語言：HTML，CSS（前端），JavaScript，NODEJS（expres）（後臺） 資料庫：MySQL 開發環境：Win7，Webstorm 上線部署環境：Linux伺服器 主要功能我們先來看一下最終的效果：使用者主頁的搭建： 實現了主頁輪播圖的顯示和切換，使用者可以從
【轉】詳述 Spring MVC 框架中攔截器 Interceptor 的使用方法
1 前言 昨天新接了一個需要，“攔截 XXX，然後 OOO”，好吧，說白了就是要用攔截器乾點事（實現一個具體的功能）。之前，也在網路上搜了很多關於Interceptor的文章，但感覺內容都大同小異，而且知識點零零散散，不太方便閱讀。因此，正好藉此機會，整理一篇關於攔截器
【分享】高效能的PHP框架 Yii PHP Framework
Yii 是什麼Yii 是一個基於元件、用於開發大型 Web 應用的高效能 PHP 框架。它將 Web 程式設計中的可重用性發揮到極致，能夠顯著加速開發程序。Yii（讀作“易”）代表簡單(easy)、高效(efficient)、可擴充套件(extensible)。需求要執行一個基