SUI

快速入门

本教程是创建一个非常简单的”新建待办事项”页面，可以填写待办事项的名称、时间和补充说明，可以显示创建结果。
此页面共涉及到了三个组件：面包屑、提示消息、表单。
最终页面效果见 新建待办事项。
所有组件文档见 组件库。

第一步，下载文件

SUI 文件主要有两个，分别是：

引用CDN文件

建议不要直接下载，而是直接引用我们的CDN文件:

下载文件

如果不想引用CDN文件，可以直接去github上clone源代码，也可以下载打包后的ZIP文件。

更多关于如何获取代码的说明，请访问 下载页面

第二步，引用文件

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

<!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>
</body>
</html>

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

我们使用三个css组件来生成这个页面，分别是面包屑、提示消息和表单。对应的代码如下

面包屑代码

<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即可。

<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>

第五步，完成

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

<!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>