jQuery UI 主題

有的 jQuery UI 插件都允許開發人員無縫集成 UI 小部件到他們網站或應用程序的外觀和感觀。每個插件通過 CSS 定義樣式，且包含了兩層樣式信息：標準的 jQuery UI CSS 框架樣式和具體的插件樣式。

jQuery UI CSS 框架提供了語義表示的類，用來表明小部件內元素的角色，比如標題、內容或可點擊區域。這些在所有的小部件中都是一致的，一個可點擊的 tab（標簽頁）、accordion（折疊面板）或 button（按鈕）都有相同的 ui-state-defaultclass，用來表明它們是可點擊的。當用戶鼠標懸浮在這些元素上面時，這個 class 就變成 ui-state-hover，當選中這些元素時則變成 ui-state-active。這些 class 的一致性使得所有部件中具有相似角色或交互狀態的元素在外觀表現上一致。

CSS 框架樣式封裝在一個單獨的文件中，名為 ui.theme.css。這個文件時通過 ThemeRoller 應用程序來修改的。框架樣式只包含影響外觀和感觀的屬性，只要是顏色、背景圖像、圖標等。所以這些是 "安全的" 樣式，不會影響到插件的功能。這種分隔意味著開發人員可以通過在 theme.css 文件中修改顏色和圖像來創建一個自定義的外觀和感觀。由于未來的插件或者 bug 修復將是可用的，這些不通過修改即可與主題一起使用。

由于框架樣式只覆蓋了外觀和感觀，所以還需要包含具體的插件樣式表，這些樣式表包括了所有額外的讓小部件具有功能性的結構樣式規則，比如尺寸、內邊距、外邊距、定位、浮動。每個插件的樣式表位于 themes/base 文件夾內，且配合插件進行命名，比如 "jquery.ui.accordion.css"。這些樣式必須認真編輯，因為它們與腳本一起提供了框架樣式的覆蓋。

我們鼓勵所有的開發人員創建 jQuery 插件，jQuery UI CSS 框架使得最終用戶更容易定制主題和使用插件。

主題化

下面列出了三種主題化 jQuery UI 插件的一般方法：

下載 ThemeRoller 主題：最早的創建主題的方式是使用 ThemeRoller 來生成和下載一個主題。這個應用程序將創建一個新的 ui.theme.css 文件和一個包含了所有必需的背景圖像及圖標精靈的 images 文件夾。這個方法是最早的創建和維護主題的方式，但是它對 ThemeRoller 中提供的選項限制了自定義。
修改 CSS 文件：為了對外觀和感觀做進一步的控制，您可以選擇從默認主題（Smoothness）開始，或者從一個由 ThemeRoller 生成的主題開始，然后調整 ui.theme.css 文件，或者任意一個獨立插件的樣式表。例如，您可以很容易地調整所有按鈕的角半徑為不同于其他 UI 組件的值，或者使用自定義設置為圖標精靈改變路徑。通過一點點的樣式范圍，您甚至可以在一個 UI 中同時使用多個主題。為了易于維護，建議只更改 ui.theme.css 文件和圖像。
重新編寫自定義的 CSS：為了最大程度地控制外觀和感觀，可以重新開始編寫每個插件的 CSS，而不使用框架類或者特定的插件樣式表。如果想要的外觀和感觀不能通過修改 CSS 來實現或者使用高度自定義的標記，那么就可以采用這個方法。這個方法要求在 CSS 方面有深厚的專業知識，且要求手動更新未來的插件。

使用 ThemeRoller、jQuery UI CSS 框架，以及設計自定義主題

jQuery UI ThemeRoller
jQuery UI CSS 框架 API
設計主題

　大家好，圖標在UI設計中占了一席之地，不同風格的圖標會影響頁面整體風格效果。前面2篇文章分別介紹了《線性圖標》、《面性圖標》，今天我跟大家分享一下線面結合圖標的一些設計樣式。

于Element UI

Element UI是一套采用 Vue 2.0 作為基礎框架實現的組件庫，一套為開發者、設計師和產品經理準備的基于 Vue 2.0 的組件庫，提供了配套設計資源，幫助網站快速成型。

Element UI的官方網址是：https://element.eleme.cn/

Element UI預定義了幾乎所有標簽的常規設計樣式，在絕大部分情況下，你不需要考慮例如按鈕的寬度、高度、背景顏色、文本大小、文本顏色等樣式規則，只需要直接使用即可，例如Element UI提供的按鈕：

按鈕

當然，除了按鈕以外，對于表格、表單、表單中各控件、彈出框等常見的頁面元素，Element UI都設計了非常簡約美觀的樣式，例如：

表單

Element UI之所以被稱之為“組件庫”，是因為它不再使用傳統的HTML 標簽，而是自行定制了一系列的標簽（包括標簽屬性），以按鈕為例，其源代碼大概是這樣的：

<el-button type="primary">主要按鈕</el-button>

除了樣式以外，Element UI還提供了便利的表單控件的驗證方式，執行效果例如：

驗證

由于Element UI定義了大量的組件，每個組件都有許多屬性，所以，學習Element UI時需要記憶大量的組件特征，這將是一個非常漫長的過程，通常不建議刻意的死記硬背，應該重點關注Element UI可以做到什么，例如有哪些樣式，各組件的核心屬性等用法，然后結合官方文檔（https://element.eleme.cn/#/zh-CN/component/）進行開發。

安裝Element UI

首先進入工程文件夾（如果使用IntelliJ IDEA打開了此工程，直接點擊 IntelliJ IDEA下面的Terminal即可）：

//我的項目是放在這個位置，你們根據自己項目進入工程即可
cd d:/Vue-Workspace/vue-project-02

然后使用npm命令安裝Element UI，以下2條命令是等效的（注意：以下命令區分大小寫，例如最后的-S的字母是大寫的）

//推薦第一種安裝命令
npm i element-ui -S
//或者下面這種寫法
npm install --save element-ui

安裝完成后，在工程的main.js中導入并使用Element UI：

// main.js  文件配置中加入下面三行
import ElementUI from 'element-ui'; 
import 'element-ui/lib/theme-chalk/index.css'; 
Vue.use(ElementUI);

配置

在頁面中顯示Element UI組件

1)：通過此前的學習，你應該知道有些文件在此工程中是可以不必保留的，應該將這些文件刪除，例如：

– 刪除router/index.js中不必要的配置，

– 刪除import HomeView from '../views/HomeView.vue'

– 刪除routes常量中各對象（值為空數組即可）

– 刪除src/components/HelloWorld.vue
– 刪除src/views/HomeView.vue
– 刪除src/views/AboutView.vue

2)：如果你認為這些頁面元素占據了100%寬度，并且默認是靠左對齊的（當占據100%寬度時你可能看不出來），這樣的顯示效果不夠美觀，你可以自行做一些調整：

//使用你已經掌握的CSS樣式進行調整，例如：
<div style="width: 500px; margin: 0 auto;"> <!-- 頁面元素 --> </div>
  //學習更多的Element UI的做法，例如：
  <div style="width: 500px; margin: 0 auto;"> 
    <!-- 頁面元素 --> 
    </div> 
<el-row type="flex" justify="center"> 
  <el-col :span="12"> 
    <!-- 頁面元素 --> 
    </el-col> 
</el-row>

設計登錄視圖Demo

修改APP.vue頁面，代碼如下：

<template>
  <div id="app">
    <el-row type="flex" justify="center">
      <el-col :span="8">
        <h3>用戶登錄</h3>
<el-divider></el-divider>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="用戶名" prop="username">
    <el-input v-model="ruleForm.username"></el-input>
</el-form-item>
<el-form-item label="密碼" prop="pass">
  <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>

<script>
      export default {
data() {
  var checkUsername=(rule, value, callback)=> {
    if (!value) {
      return callback(new Error('用戶名不能為空'));
    }
    callback();
  };
  var validatePass=(rule, value, callback)=> {
    if (value==='') {
      callback(new Error('請輸入密碼'));
    }
    callback();
  };
  return {
    ruleForm: {
      pass: '',
      username: ''
    },
    rules: {
      pass: [
        { validator: validatePass, trigger: 'blur' }
      ],
      username: [
        { validator: checkUsername, trigger: 'blur' }
      ]
    }
  };
},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid)=> {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  }
}
  </script>

學習記錄，如有侵權請聯系刪除

在線咨詢

上一篇：在Win 8中找回消失的Metro版IE10
下一篇：css3炫酷動效傾斜翻頁效果

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

jQuery UI 主題

您的項目需求