快速入门

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

第一步,下载文件

SUI 文件主要有两个,分别是:

引用CDN文件

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

下载文件

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

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

第二步,引用文件

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta name="description" content="">
  7. <title>新建待办事项</title>
  8. <link href="http://g.alicdn.com/sj/dpl/1.5.1/css/sui.min.css" rel="stylesheet">
  9. <script type="text/javascript" src="http://g.alicdn.com/sj/lib/jquery/dist/jquery.min.js"></script>
  10. <script type="text/javascript" src="http://g.alicdn.com/sj/dpl/1.5.1/js/sui.min.js"></script>
  11. </head>
  12. <body>
  13. </body>
  14. </html>

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

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

面包屑代码

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

提示消息代码

  1. <div class="sui-msg msg-large msg-block msg-success">
  2. <div class="msg-con">
  3. 新的待办事项”晚上9点拿夜宵”创建成功!
  4. </div>
  5. <s class="msg-icon"></s>
  6. </div>

表单代码

  1. <form class="sui-form form-horizontal" action="" method="post" id="servingForm">
  2. <div class="control-group">
  3. <label class="control-label">名称:</label>
  4. <div class="controls">
  5. <input class="input-xlarge" type='text' />
  6. </div>
  7. </div>
  8. <div class="control-group">
  9. <label class="control-label">时间:</label>
  10. <div class="controls">
  11. <select class="input-medium " name='month'>
  12. <option value="1">1</option>
  13. <option value="2">2</option>
  14. <option value="3">3</option>
  15. <option value="4">4</option>
  16. <option value="5">5</option>
  17. <option value="6">6</option>
  18. <option value="7">8</option>
  19. <option value="8">9</option>
  20. <option value="9">9</option>
  21. <option value="10">10</option>
  22. <option value="11">11</option>
  23. <option value="12">12</option>
  24. </select>
  25. <select class="input-medium " name='date'>
  26. <option value="1">1</option>
  27. <option value="2">2</option>
  28. <option value="3">3</option>
  29. <option value="4">4</option>
  30. <option value="5">5</option>
  31. <option value="6">6</option>
  32. <option value="7">8</option>
  33. <option value="8">9</option>
  34. <option value="9">9</option>
  35. <option value="10">10</option>
  36. <option value="11">11</option>
  37. <option value="12">12</option>
  38. </select>
  39. </div>
  40. </div>
  41. <div class="control-group">
  42. <label class="control-label">补充说明:</label>
  43. <div class="controls">
  44. <textarea class='input-xlarge'></textarea>
  45. </div>
  46. </div>
  47. <div class="control-group">
  48. <div class="controls">
  49. <button class="sui-btn btn-primary btn-xlarge">创建待办事项</button>
  50. </div>
  51. </div>
  52. </form>

第四步,添加表单校验

我们有现成的表单校验组件可以直接用。简单修改表单的html即可。

  1. <form class="sui-form form-horizontal sui-validate" action="" method="post" id="servingForm">
  2. <div class="control-group">
  3. <label class="control-label">名称:</label>
  4. <div class="controls">
  5. <input class="input-xlarge" type='text' data-rules="required|minlength=2|maxlength=50" />
  6. </div>
  7. </div>
  8. <div class="control-group">
  9. <label class="control-label">时间:</label>
  10. <div class="controls">
  11. <select class="input-medium " name='month' data-rules='required'>
  12. <option value="1">1</option>
  13. <option value="2">2</option>
  14. <option value="3">3</option>
  15. <option value="4">4</option>
  16. <option value="5">5</option>
  17. <option value="6">6</option>
  18. <option value="7">8</option>
  19. <option value="8">9</option>
  20. <option value="9">9</option>
  21. <option value="10">10</option>
  22. <option value="11">11</option>
  23. <option value="12">12</option>
  24. </select>
  25. <select class="input-medium " name='date' data-rules='required'>
  26. <option value="1">1</option>
  27. <option value="2">2</option>
  28. <option value="3">3</option>
  29. <option value="4">4</option>
  30. <option value="5">5</option>
  31. <option value="6">6</option>
  32. <option value="7">8</option>
  33. <option value="8">9</option>
  34. <option value="9">9</option>
  35. <option value="10">10</option>
  36. <option value="11">11</option>
  37. <option value="12">12</option>
  38. </select>
  39. </div>
  40. </div>
  41. <div class="control-group">
  42. <label class="control-label">补充说明:</label>
  43. <div class="controls">
  44. <textarea class='input-xlarge' data-rules='maxlength=100'></textarea>
  45. </div>
  46. </div>
  47. <div class="control-group">
  48. <div class="controls">
  49. <button class="sui-btn btn-primary btn-xlarge">创建待办事项</button>
  50. </div>
  51. </div>
  52. </form>
  53.  

第五步,完成

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta name="description" content="">
  7. <title>新建待办事项</title>
  8. <link href="http://g.alicdn.com/sj/dpl/1.5.1/css/sui.min.css" rel="stylesheet">
  9. <script type="text/javascript" src="http://g.alicdn.com/sj/lib/jquery/dist/jquery.min.js"></script>
  10. <script type="text/javascript" src="http://g.alicdn.com/sj/dpl/1.5.1/js/sui.min.js"></script>
  11. </head>
  12. <body>
  13. <div class="sui-container">
  14. <ul class="sui-breadcrumb">
  15. <li><a href="#">待办事项</a></li>
  16. <li class="active">添加待办事项</li>
  17. </ul>
  18. <div class="sui-msg msg-large msg-block msg-success">
  19. <div class="msg-con">
  20. 新的待办事项”晚上9点拿夜宵”创建成功!
  21. </div>
  22. <s class="msg-icon"></s>
  23. </div>
  24. <form class="sui-form form-horizontal sui-validate" action="" method="post" id="servingForm">
  25. <div class="control-group">
  26. <label class="control-label">名称:</label>
  27. <div class="controls">
  28. <input class="input-xlarge" type='text' data-rules="required|minlength=2|maxlength=50" />
  29. </div>
  30. </div>
  31. <div class="control-group">
  32. <label class="control-label">时间:</label>
  33. <div class="controls">
  34. <select class="input-medium " name='month' data-rules='required'>
  35. <option value="1">1</option>
  36. <option value="2">2</option>
  37. <option value="3">3</option>
  38. <option value="4">4</option>
  39. <option value="5">5</option>
  40. <option value="6">6</option>
  41. <option value="7">8</option>
  42. <option value="8">9</option>
  43. <option value="9">9</option>
  44. <option value="10">10</option>
  45. <option value="11">11</option>
  46. <option value="12">12</option>
  47. </select>
  48. <select class="input-medium " name='date' data-rules='required'>
  49. <option value="1">1</option>
  50. <option value="2">2</option>
  51. <option value="3">3</option>
  52. <option value="4">4</option>
  53. <option value="5">5</option>
  54. <option value="6">6</option>
  55. <option value="7">8</option>
  56. <option value="8">9</option>
  57. <option value="9">9</option>
  58. <option value="10">10</option>
  59. <option value="11">11</option>
  60. <option value="12">12</option>
  61. </select>
  62. </div>
  63. </div>
  64. <div class="control-group">
  65. <label class="control-label">补充说明:</label>
  66. <div class="controls">
  67. <textarea class='input-xlarge' data-rules='maxlength=100'></textarea>
  68. </div>
  69. </div>
  70. <div class="control-group">
  71. <div class="controls">
  72. <button class="sui-btn btn-primary btn-xlarge">创建待办事项</button>
  73. </div>
  74. </div>
  75. </form>
  76. </div>
  77. </body>
  78. </html>