聂文文学习笔记-SUI快速入门

阅读数：2214 发布时间：2016-06-06 23:41:53

作者：zzl005 标签： 聂文文 委培班 w1 SUI

SUI快速入门

SUI 是一套基于bootstrap开发的前端组件库，同时她也是一套设计规范。

目标：创建一个简单的”新建待办事项”页面,对SUI有个感性的认识。

使用的三个组件：面包屑、提示消息、表单。

最终效果。

第一步，下载文件

SUI主要有两个，分别是：

sui.min.css样式文件，必须。
sui.min.jsJS组件。因为sui的js组件依赖jquery，所以必须在sui.js之前引入jquery。
引用CDN文件

g.alicdn.com/sj/dpl/1.5.1/css/sui.min.css  
g.alicdn.com/sj/dpl/1.5.1/js/sui.min.js

下载文件

可以直接去github上clone　源代码
也可以去　下载页面
下载下来了，但还不会用

第二步，引用文件

在head中依次引入sui.css和sui.js文件,代码如下：

  <link href="http://g.alicdn.com/sj/dpl/1.5.1/css/sui.min.css" rel="stylesheet">
  <script type="text/javascript" src="http://g.alicdn.com/sj/lib/jquery/dist/jquery.min.js"></script>
  <script type="text/javascript" src="http://g.alicdn.com/sj/dpl/1.5.1/js/sui.min.js"></script>

第三步，添加面包屑、提示消息和表单

面包屑代码

<ul class="sui-breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">手机数码、电脑办公</a></li>
  <li class="active">智能手机</li>
</ul>

提示消息代码

<div class="sui-msg msg-large msg-block msg-success">
  <div class="msg-con">
  新的待办事项”晚上9点拿夜宵”创建成功！
  </div>
  <s class="msg-icon"></s>
</div>

表单代码

<form class="sui-form form-horizontal" action="" method="post" id="servingForm">
  <div class="control-group">
    <label class="control-label">名称：</label>
    <div class="controls">
      <input class="input-xlarge" type='text' />
    </div>
  </div>
  <div class="control-group"
    <label class="control-label">时间：</label>
    <div class="controls">
      <select class="input-medium " name='month'>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">8</option>
        <option value="8">9</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
      </select>
      月
      <select class="input-medium " name='date'>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">8</option>
        <option value="8">9</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
      </select>
      日
    </div>
  </div>
  <div class="control-group">
    <label class="control-label">补充说明：</label>
    <div class="controls">
      <textarea class='input-xlarge'></textarea>
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <button class="sui-btn btn-primary btn-xlarge">创建待办事项</button>
    </div>
  </div>
</form>

第四步，添加表单校验

有现成的表单校验组件可以直接用。简单修改表单的html即可。详细的之后再说。

第五步，完成

经过上面几步我们就完成了一个简单的创建待办事项的页面，完整代码如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <title>新建待办事项</title>
  <link href="http://g.alicdn.com/sj/dpl/1.5.1/css/sui.min.css" rel="stylesheet">
  <script type="text/javascript" src="http://g.alicdn.com/sj/lib/jquery/dist/jquery.min.js"></script>
  <script type="text/javascript" src="http://g.alicdn.com/sj/dpl/1.5.1/js/sui.min.js"></script>
</head>
<body>
  <div class="sui-container">
    <ul class="sui-breadcrumb">
      <li><a href="#">待办事项</a></li>
      <li class="active">添加待办事项</li>
    </ul>
    <div class="sui-msg msg-large msg-block msg-success">
      <div class="msg-con">
        新的待办事项”晚上9点拿夜宵”创建成功！
      </div>
      <s class="msg-icon"></s>
    </div>
    <form class="sui-form form-horizontal sui-validate" action="" method="post" id="servingForm">
      <div class="control-group">
        <label class="control-label">名称：</label>
        <div class="controls">
          <input class="input-xlarge" type='text' data-rules="required|minlength=2|maxlength=50" />
        </div>
      </div>
      <div class="control-group">
        <label class="control-label">时间：</label>
        <div class="controls">
          <select class="input-medium " name='month' data-rules='required'>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">8</option>
            <option value="8">9</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
          </select>
          月
          <select class="input-medium " name='date' data-rules='required'>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">8</option>
            <option value="8">9</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
          </select>
          日
        </div>
      </div>
      <div class="control-group">
        <label class="control-label">补充说明：</label>
        <div class="controls">
          <textarea class='input-xlarge' data-rules='maxlength=100'></textarea>
        </div>
      </div>
      <div class="control-group">
        <div class="controls">
          <button class="sui-btn btn-primary btn-xlarge">创建待办事项</button>
        </div>
      </div>
    </form> 

  </div>
</body>
</html>

重新看下最终效果。