jQuery UI基本使用方法

時間  2019-11-17
標籤 jquery 基本 使用方法 欄目 JQuery 简体版
原文   原文鏈接

其實jQuery UI早就在個人學習計劃中，只不過由於計劃安排始終處於待命狀態，最近項目要用到jQuery UI，就提早學習一下，也想可以封裝本身的UI庫，這樣就不用老按照別人的套路走了，像使用jQuery UI的時候，連DOM結構都要按照他們寫的來，一個div裏面必須包含一個h3纔有用，用h2就沒用了，這樣的框架延伸性太差了吧，仍是本身的東西好用！css

 

本篇筆記爲jQuery UI的使用筆記，深刻到具體封裝層面的待我之後讀了源碼再來寫更深刻的筆記，目前僅爲快速學習，爲了跟上項目。html

 

1.如何引入jquery

涉及到UI的框架，老是會涉及到行爲和樣式，正如jQuery Mobile同樣，在使用jQuery UI時也要引入一個適用版本的jQuery.js(通常會自帶)和一個框架的js文件和一個css文件，目前我用的版本是1.11.4。瀏覽器

 

廢話很少說，如何使用，看代碼就知道了框架

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">
    </head>
    <body>
        <script src="js/jquery-ui-1.11.4/jquery.js"></script>
        <script src="js/jquery-ui-1.11.4/jquery-ui.js"></script>
        <script>
            //write your custome code
        </script>
    </body>
</html>

網上大多數教程都是這麼說的，可是做爲一個強迫症患者，我仍是建議把images文件夾引入進來，這樣的話在寫test程序的時候不會報錯，這樣也能夠更清晰的知道哪些控件使用了哪些圖片，是如何使用的。函數

 

必要的解釋，到官網上下載了jQuery UI後是一個壓縮包，解壓開來是一個範例的程序，像我這種白癡是確定不知道哪些文件是有用的，哪些文件是沒用的，不過打開範例程序的index.html後分別搜索<link>/<script>你會發現哪幾個文件是有用到的，至於其餘幾個css文件爲何沒用到，我的猜測structure應該是基礎版的沒有主題的css，若是要開發主題就用這個css，而theme應該是已經作好了主題的css。佈局

另外，jQuery UI的官網還提供主題的下載，下好了之後用什麼方法連接進去好像就能起效果。說實話我我的以爲，站在學習的角度上來講，這個東西很沒意思。學習

還有一件很煩的事情是，jQuery UI分爲四個部分：核心（UI Core）、交互部件（Interactions）、小部件（Widgets）和效果庫（Effects），真心搞不清這幾個東西的區別，也懶得搞清了，仍是趕忙開始寫點東西出來，比什麼炒概念都要強。字體

 

2.基本使用方法ui

創建組件

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">
    </head>
    <body>
        <div id="test_progressbar"></div>
        <script src="js/jquery-ui-1.11.4/jquery.js"></script>
        <script src="js/jquery-ui-1.11.4/jquery-ui.js"></script>
        <script>
            //調用方法創建組件
            $("#test_progressbar").progressbar();
        </script>
    </body>
</html>

效果以下

獲取參數

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">
    </head>
    <body>
        <div id="test_progressbar"></div>
        <script src="js/jquery-ui-1.11.4/jquery.js"></script>
        <script src="js/jquery-ui-1.11.4/jquery-ui.js"></script>
        <script>
            //帶參數調用方法創建組件
            $("#test_progressbar").progressbar({value:20});
            //獲取
            document.write($("#test_progressbar").progressbar("value"));
        </script>
    </body>
</html>

效果圖以下

設置參數

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">
    </head>
    <body>
        <div id="test_progressbar"></div>
        <script src="js/jquery-ui-1.11.4/jquery.js"></script>
        <script src="js/jquery-ui-1.11.4/jquery-ui.js"></script>
        <script>
            $("#test_progressbar").progressbar();
            //設置
            $("#test_progressbar").progressbar("value",40);
        </script>
    </body>
</html>

效果圖以下

改變樣式

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">
        <style>
            .test_class{width:50%;}
        </style>
    </head>
    <body>
        <div id="test_progressbar"></div>
        <script src="js/jquery-ui-1.11.4/jquery.js"></script>
        <script src="js/jquery-ui-1.11.4/jquery-ui.js"></script>
        <script>
            $("#test_progressbar").progressbar();
            //設置
            $("#test_progressbar")
                .progressbar("value",40)
                .addClass("test_class");
        </script>
    </body>
</html>

使用option方法改變和獲取參數值

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">
        <style>
            .test_class{width:50%;}
        </style>
    </head>
    <body>
        <div id="test_progressbar"></div>
        <script src="js/jquery-ui-1.11.4/jquery.js"></script>
        <script src="js/jquery-ui-1.11.4/jquery-ui.js"></script>
        <script>
            $("#test_progressbar").progressbar();
            //使用option方法改變參數值
            $("#test_progressbar").progressbar("option","value",90);
            //使用option方法獲取參數值
            document.write($("#test_progressbar").progressbar("option","value"));
        </script>
    </body>
</html>

效果圖以下

利用option方法傳多個參數

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">
        <style>
            .test_class{width:50%;}
        </style>
    </head>
    <body>
        <div id="test_progressbar"></div>
        <script src="js/jquery-ui-1.11.4/jquery.js"></script>
        <script src="js/jquery-ui-1.11.4/jquery-ui.js"></script>
        <script>
            $("#test_progressbar").progressbar();
            $("#test_progressbar").progressbar( "option", {
                value: 100,
                disabled: true
            });
        </script>
    </body>
</html>

效果圖以下

添加事件監聽和內部的回調函數

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="js/jquery-ui-1.11.4/jquery-ui.css" rel="stylesheet">
        <style>
            .test_class{width:50%;}
        </style>
    </head>
    <body>
        <div id="test_progressbar"></div>
        <script src="js/jquery-ui-1.11.4/jquery.js"></script>
        <script src="js/jquery-ui-1.11.4/jquery-ui.js"></script>
        <script>
            $("#test_progressbar").progressbar();
            $("#test_progressbar").progressbar({
                change: function() {
                    alert( "The value has changed!---by callback" );
                }
            });
            $("#test_progressbar").bind( "progressbarchange", function() {
                alert( "The value has changed!---by bind()" );
            });
            $("#test_progressbar").progressbar("option","value",50);
        </script>
    </body>
</html>

 

 

 

CSS框架 API

佈局助手
.ui-helper-hidden：對元素應用 display: none。
.ui-helper-hidden-accessible：對元素應用訪問隱藏（經過頁面絕對定位）。
.ui-helper-reset：UI 元素的基本樣式重置。重置的元素好比：padding、margin、text-decoration、list-style，等等。
.ui-helper-clearfix：對父元素應用浮動包裝屬性。
.ui-helper-zfix：對 <iframe> 元素應用 iframe "fix" CSS。

小部件容器
.ui-widget：對全部小部件的外部容器應用的 Class。對小部件應用字體和字體尺寸，同時也對自表單元素應用相同的字體和 1em 的字體尺寸，以應對 Windows 瀏覽器中的繼承問題。
.ui-widget-header：對標題容器應用的 Class。對元素及其子元素的文本、連接、圖標應用標題容器樣式。
.ui-widget-content：對內容容器應用的 Class。對元素及其子元素的文本、連接、圖標應用內容容器樣式。（可應用到標題的父元素或者同級元素）

交互狀態
.ui-state-default：對可點擊按鈕元素應用的 Class。對元素及其子元素的文本、連接、圖標應用 "clickable default" 容器樣式。
.ui-state-hover：當鼠標懸浮在可點擊按鈕元素上時應用的 Class。對元素及其子元素的文本、連接、圖標應用 "clickable hover" 容器樣式。
.ui-state-focus：當鍵盤聚焦在可點擊按鈕元素上時應用的 Class。對元素及其子元素的文本、連接、圖標應用 "clickable hover" 容器樣式。
.ui-state-active：當鼠標點擊可點擊按鈕元素上時應用的 Class。對元素及其子元素的文本、連接、圖標應用 "clickable active" 容器樣式。

交互提示 Cues
.ui-state-highlight：對高亮或者選中元素應用的 Class。對元素及其子元素的文本、連接、圖標應用 "highlight" 容器樣式。
.ui-state-error：對錯誤消息容器元素應用的 Class。對元素及其子元素的文本、連接、圖標應用 "error" 容器樣式。
.ui-state-error-text：對只有無背景的錯誤文本顏色應用的 Class。可用於表單標籤，也能夠對子圖標應用錯誤圖標顏色。
.ui-state-disabled：對禁用的 UI 元素應用一個暗淡的不透明度。意味着對一個已經定義樣式的元素添加額外的樣式。
.ui-priority-primary：對第一優先權的按鈕應用的 Class。應用粗體文本。
.ui-priority-secondary：對第二優先權的按鈕應用的 Class。應用正常粗細的文本，對元素應用輕微的透明度。

圖標
狀態和圖像
.ui-icon：對圖標元素應用的基本 Class。設置尺寸爲 16px 方塊，隱藏內部文本，對 "content" 狀態的精靈圖像設置背景圖像。注意： .ui-icon class 將根據它的父容器獲得一個不一樣的精靈背景圖像。例如，ui-state-default 容器內的 ui-icon 元素將根據 ui-state-default 的圖標顏色進行着色。
圖標類型
在聲明 .ui-icon class 以後，接着您能夠聲明一個秒速圖標類型的 class。一般狀況下，圖標 class 遵循語法 .ui-icon-{icon type}-{icon sub description}-{direction}。
例如，一個指向右側的三角形圖標，以下所示： .ui-icon-triangle-1-e

其餘視覺效果圓角半徑助手.ui-corner-tl：對元素的左上角應用圓角半徑。.ui-corner-tr：對元素的右上角應用圓角半徑。.ui-corner-bl：對元素的左下角應用圓角半徑。.ui-corner-br：對元素的右下角應用圓角半徑。.ui-corner-top：對元素上邊的左右角應用圓角半徑。.ui-corner-bottom：對元素下邊的左右角應用圓角半徑。.ui-corner-right：對元素右邊的上下角應用圓角半徑。.ui-corner-left：對元素左邊的上下角應用圓角半徑。.ui-corner-all：對元素的全部四個角應用圓角半徑。覆蓋 & 陰影.ui-widget-overlay：對覆蓋屏幕應用 100% 寬度和高度，同時設置背景顏色/紋理和屏幕不透明度。.ui-widget-shadow：對覆蓋應用的 Class，設置了不透明度、上偏移/左偏移，以及陰影的 "厚度"。厚度是經過對陰影全部邊設置內邊距（padding）進行應用的。偏移是經過設置上外邊距（margin）和左外邊距（margin）進行應用的（能夠是正數，也能夠是負數）。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程