semantic ui框架學習筆記一

面包屑導航

面包屑導航經常用於多個欄目下的內容管理，是web頁面里比較常用的組合。例如：

<div class="ui breadcrumb">
  <a class="section">主頁</a>
  <span class="divider">/</span>
  <a class="section">商店</a>
  <span class="divider">/</span>
  <div class="active section">水果</div>
</div>

如果想用箭頭表示層級關系的話，要注意把themes文件夾放在css文件夾下。

<div class="ui breadcrumb">
  <a class="section">主頁</a>
  <i class="right angle icon divider"></i>
  <a class="section">商店</a>
  <i class="right angle icon divider"></i>
  <div class="active section">水果</div>
</div>

尺寸
在父div上加上mini，tiny，small，large，big，huge，massive就可以實現你想要的大小了。

表單

登陸注冊頁面

開發網站的第一步就是要寫登錄注冊頁面了。

<form class="ui form">
  <div class="required field">
    <label>用戶昵稱</label>
    <input type="text" name="username" placeholder="請輸入用戶名">
  </div>
  <div class="required field">
    <label>電子郵箱</label>
    <input type="email" name="email" placeholder="請輸入郵箱">
  </div>
  <div class="required field">
    <label>密碼</label>
    <input type="password" name="password" placeholder="請輸入密碼">
  </div>
  <div class="required field">
    <label>確認密碼</label>
    <input type="password" name="repassword" placeholder="請再次輸入密碼">
  </div>
  <button class="ui button primary" type="submit">提交</button>
</form>

若要改變表單的尺寸，同樣也是在form標簽的class里面加上mini，tiny，small，large，big，huge，massive就可以了。
記住密碼復選框
用戶在登錄的時候，經常會有一個復選框，提示用戶要不要記住密碼，或者是一周內自動登陸。

<div class="field">
  <div class="ui checkbox">
    <input type="checkbox" name="autoLogin" value="true">
    <label>7天內自動登陸</label>
  </div>
</div>

表單提示信息
用戶在input失去焦點時，通常會有個簡單的格式驗證，如果不成功的話，頁面上會有個明顯的提醒來告知用戶輸入格式不正確。例如：

#register-form-input input {
  width: 320px;
}

<form class="ui form" id="register-form-input">
  <div class="inline fields">
    <div class="two wide field">
      <label>用戶名</label>
    </div>
    <div class="fourteen wide field">
      <div class="inline field error">
        <input type="text" placeholder="用戶名">
        <div class="ui left pointing red basic label">
          這個名字已被占用
        </div>
      </div>
    </div>
  </div>
</form>

這個例子里面的label與input標簽是左右分布的。顏色可以在主題里面找到，另外需要注意的是Semantic的網格系統默認主題有16列。

通常注冊完成之后，會有一個頁面通知，提醒已經注冊成功。

成功消息：
<div class="ui success message">
  <div class="header">表單完成</div>
  <p>你已經注冊成功</p>
</div>

失敗消息：
<div class="ui error message">
  <p>用戶不存在</p>
</div>

更新信息頁面

通常情況下用戶可以更新個人資料，比如：頭像，名字，所在城市，個人網站，個性簽名，個人介紹等等。

<form class="ui form">
  <div class="field">
    <label>用戶名</label>
    <input type="text" readonly="" value="dreamsline">
  </div>
  <div class="field">
    <label>電子郵箱</label>
    <input type="email" readonly="" value="[e-mail]">
  </div>
  <div class="field">
    <label>性別</label>
    <div class="ui selection dropdown">
      <input type="hidden" name="gender">
      <i class="dropdown icon"></i>
      <div class="default text">性別</div>
      <div class="menu">
        <div class="item" data-value="1">男</div>
        <div class="item" data-value="0">女</div>
      </div>
    </div>
  </div>
  <div class="field">
    <label>省份</label>
    <select class="ui search dropdown">
      <option value="beijing">北京市</option>
      <option value="hebei">河北省</option>
      <option value="shanxi">山西省</option>
      <option value="shandong">山東省</option>
    </select>
  </div>
  <div class="field">
    <label>Github</label>
    <div class="ui labeled input">
      <div class="ui label">
          https://github.com/
      </div>
      <input type="text" name="github" placeholder="yourname">
    </div>
  </div>
  <div class="field">
    <label>微博</label>
    <div class="ui labeled input">
      <div class="ui label">
          http://weibo.com/
      </div>
      <input type="text" name="weibo" placeholder="yourname">
    </div>
  </div>
  <div class="field">
    <label>個人網站</label>
    <input type="url" name="userUrl" placeholder="e.g.http://aaa.com">
  </div>
  <div class="field">
    <label>聯系方式</label>
    <div class="inline fields">
      <div class="field">
        <input type="text" placeholder="(xxx)">
      </div>
      <div class="field">
        <input type="text" placeholder="xxx">
      </div>
      <div class="field">
        <input type="text" placeholder="xxxx">
      </div>
    </div>
  </div>
  <div class="field">
    <label>個人介紹</label>
    <textarea rows="3"></textarea>
  </div>
</form>
<script>
  $('.ui.dropdown').dropdown();
</script>

效果如下所示：

菜單

菜單也是一個網站中必不可少的一項。

下拉菜單

<div class="ui dropdown">
  <div class="text">更多</div>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item"><i class="edit icon grey"></i>編輯</div>
    <div class="item"><i class="delete icon olive"></i>刪除</div>
    <div class="item"><i class="share icon"></i>
      <i class="dropdown icon"></i>
      分享到
      <div class="menu">
        <div class="item"><i class="medium icon"></i>Medium</div>
        <div class="item"><i class="weibo icon"></i>微博</div>
        <div class="item"><i class="wechat icon"></i>微信</div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  $(document).ready(function () {
    // 點擊按鈕彈出下拉框
    $('.ui.dropdown').dropdown(); //默認是點擊，可以在dropdown()里面添加一個對象：{on: 'hover'}來行為方式。
  })
</script>

這是一個簡單的與文章相關的下拉菜單，Semantic UI還為我們提供了不少的圖標，還可以自定義圖標顏色。

水平菜單

二級菜單

下面是我結合條目仿照簡書上某個主題下面顯示的樣式：

<div class="ui container">
  <div class="ui secondary pointing menu">
    <a class="item">
      主頁
    </a>
    <a class="item">
      信息
    </a>
    <a class="item active">
      朋友
    </a>
  </div>
  <div class="ui divided items">
    <div class="item">
        <div class="image">
            <img src="../images/avatar/1.jpg">
        </div>
      <div class="content">
        <a class="header">說說 Vue.js 組件的高級特性</a>
        <div class="description">
          <p>1 遞歸為組件設置 name 屬性，這個組件就可以在自身的模板內遞歸調用自己。
              可以利用組件的可遞歸特性，來實現一些具有不確定層級的組件，比如級聯選擇器和樹型組件。
          </p>
        </div>
        <div class="extra">
          dreamsline
        </div>
      </div>
    </div>
    <div class="item">
        <div class="image">
            <img src="../images/avatar/1.jpg">
        </div>
      <div class="content">
        <a class="header">排序優化</a>
        <div class="description">
          <p>一、如何選擇化的排序算法為什選擇快速排序？
              線性排序時間復雜度很低但使用場景特殊，如果要寫一個通用排序函數，不能選擇線性排序。
          </p>
        </div>
        <div class="extra">
          dreamsline
        </div>
      </div>
    </div>
    <div class="ui divider"></div>
  </div>
</div>
<script type="text/javascript">
  $(document).ready(function () {
    $('.ui.menu .item').click(function() {
      $(this).siblings().removeClass('active');
      $(this).addClass('active');
    });
  });
</script>

這里我用自己的想法寫了一段jquery代碼，是切換水平菜單選項卡的邏輯。我看了文檔，沒找到怎么用它規定的格式寫。下面是效果圖：

二級菜單一共有secondary，pointing，secondary pointing，tabular，text等這幾種。

分頁菜單

<div class="ui pagination menu">
  <a class="disabled item">
    <i class="angle double left icon"></i>
  </a>
  <a class="active item">
    1
  </a>
  <a class="item">
    2
  </a>
  <a class="item">
    3
  </a>
  <div class="disabled item">
    ...
  </div>
  <a class="item">
    <i class="angle double right icon"></i>
  </a>
</div>

反色菜單

在Semantic UI庫里面有反色這一顏色設定。下面是我模仿node.js官網做的一個反色菜單示例：

<div class="ui attached stackable inverted borderless menu">
  <div class="ui container">
    <div class="left menu">
      <a class="item brand">
        <img src="../images/cnodejs_light.svg" id="brand-image">
      </a>
      <div class="item">
        <form class="ui search" action="/search">
          <div class="ui icon input">
            <input type="text" class="prompt" placeholder="搜索..." name="search">
            <i class="search icon"></i>
          </div>
        </form>
      </div>
    </div>
    <div class="right menu">
      <a class="item">
        首頁
      </a>
      <a class="item">
        新手入門
      </a>
      <a class="item">
        關於
      </a>
      <a class="item">
        注冊
      </a>
      <a class="item">
        登錄
      </a>
    </div>
  </div>
</div>

當然光有這些還是不夠的，還須添加一些css:

.ui.input>input {
  padding: .3em 1em !important;
}
#brand-image {
  width: 120px;
  margin-top: -10px;
}
.brand:hover {
  background: none !important;
}/*取消brand的背景顏色*/

#brand-image,.brand是我添加上去的id,和類名。

效果圖如下：

stackable是Semantic UI設置的響應方式里面的一個屬性：可堆疊，元素在移動端會自動占一行寬度。這里的container容器可以使網站的內容集中在中間區域顯示。
如果想讓它固定在頂部的話，可以根div里把stackable換成fixed。borderless表示無邊框。

給菜單加上消息吧

在menu下面的item里面添加消息

<a class="item">
  未讀消息
  <div class="ui grey circular label">2</div>
</a>