本教程是创建一个非常简单的”新建待办事项”页面,可以填写待办事项的名称、时间和补充说明,可以显示创建结果。
此页面共涉及到了三个组件:面包屑、提示消息、表单。
最终页面效果见 新建待办事项。
所有组件文档见 组件库。
SUI 文件主要有两个,分别是:
建议不要直接下载,而是直接引用我们的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>