文章首页 Web开发 Windows开发 编程语言 数据库技术 移动平台 系统服务 微信 设计 布布扣 其他

移动端安卓和IOS开发框架Framework7教程-表单布局

时间：2016-06-18 02:11:19   收藏：0   阅读：296

使用表单布局创建响应式的精美的表单布局。表单布局就是 列表，但是会有一些拓展。

简单的表单布局

让我们看一种最简单的表单布局：

  1. <div?class="list-block">
  2. ??<ul>
  3. ????...
  4. ????<li>
  5. ??????<div?class="item-content">
  6. ????????<div?class="item-media">...?icon?here?...</div>
  7. ????????<div?class="item-inner">
  8. ??????????<div?class="item-title?label">Name</div>
  9. ??????????<div?class="item-input">
  10. ??????????????<input?type="text"?name="name">
  11. ??????????</div>
  12. ????????</div>
  13. ??????</div>
  14. ????</li>
  15. ????...
  16. ??</ul>
  17. </div>
复制

从上面的例子可以看出，表单布局几乎和 列表 一样，但是有如下一些不同：

对表单元素的支持

下面是所有你可以放进?item-input?中的表单元素：

All text inputs

Supported types:?text,?password,?email,?tel,?url,?date,?number,?datetime-local

  1. ...
  2. ??<div?class="item-input">
  3. ????<input?type="text">
  4. ??</div>????????????????????
  5. ...
复制
  1. ...
  2. ??<div?class="item-input">
  3. ????<input?type="email">
  4. ??</div>????????????????????
  5. ...
复制
?

Select
  1. ...
  2. ??<div?class="item-input">
  3. ????<select>...</select">
  4. ??</div>????????????????????
  5. ...
复制
?

Textarea
  1. ...
  2. ??<div?class="item-input">
  3. ????<textarea></textarea>
  4. ??</div>????????????????????
  5. ...
复制

Note that List View element with textarea should have additional "align-top" class on <li>:

  1. <div?class="list-block">
  2. ??<ul>
  3. ????...
  4. ????<!--?Additional?"align-top"?class?for?correct?textarea?alignment?-->
  5. ????<li?class="align-top">
  6. ??????<div?class="item-content">
  7. ????????<div?class="item-inner">
  8. ??????????<div?class="item-title?label">Textarea</div>
  9. ??????????<div?class="item-input">
  10. ??????????????<textarea></textarea>
  11. ??????????</div>
  12. ????????</div>
  13. ??????</div>
  14. ????</li>
  15. ????...
  16. ??</ul>
  17. </div>
复制
?

Resizable Textarea

Resiable textarea. Just add "resizable" class to textarea and it will resize automatically depending on its content

  1. ...
  2. ??<div?class="item-input">
  3. ????<textarea?class="resizable"></textarea>
  4. ??</div>????????????????????
  5. ...
复制
?

Switch (Checkbox)

Switch (Checkbox) requires additional wrapper:

  1. ...
  2. ??<label?class="label-switch">
  3. ????<input?type="checkbox">
  4. ????<div?class="checkbox"></div>
  5. ??</label>
  6. ...
复制
?

Slider (Range input)

Slider (Range input) requires additional wrapper:

  1. ...
  2. ??<div?class="item-input">
  3. ????<div?class="range-slider">
  4. ??????<input?type="range"?min="0"?max="100"?step="0.1">
  5. ????</div>
  6. ??</div>????????????????????
  7. ...
复制
?

示例

完整的布局

  1. <div?class="content-block-title">Full?Layout</div>
  2. <div?class="list-block">
  3. ??<ul>
  4. ????<!--?Text?inputs?-->
  5. ????<li>
  6. ??????<div?class="item-content">
  7. ????????<div?class="item-media"><i?class="icon?icon-form-name"></i></div>
  8. ????????<div?class="item-inner">
  9. ??????????<div?class="item-title?label">Name</div>
  10. ??????????<div?class="item-input">
  11. ????????????<input?type="text"?placeholder="Your?name">
  12. ??????????</div>
  13. ????????</div>
  14. ??????</div>
  15. ????</li>
  16. ????<li>
  17. ??????<div?class="item-content">
  18. ????????<div?class="item-media"><i?class="icon?icon-form-email"></i></div>
  19. ????????<div?class="item-inner">
  20. ??????????<div?class="item-title?label">E-mail</div>
  21. ??????????<div?class="item-input">
  22. ????????????<input?type="email"?placeholder="E-mail">
  23. ??????????</div>
  24. ????????</div>
  25. ??????</div>
  26. ????</li>
  27. ????...
  28. ????<!--?Select?-->
  29. ????<li>
  30. ??????<div?class="item-content">
  31. ????????<div?class="item-media"><i?class="icon?icon-form-gender"></i></div>
  32. ????????<div?class="item-inner">
  33. ??????????<div?class="item-title?label">Gender</div>
  34. ??????????<div?class="item-input">
  35. ????????????<select>
  36. ??????????????<option>Male</option>
  37. ??????????????<option>Female</option>
  38. ????????????</select>
  39. ??????????</div>
  40. ????????</div>
  41. ??????</div>
  42. ????</li>
  43. ????<!--?Date?-->
  44. ????<li>
  45. ??????<div?class="item-content">
  46. ????????<div?class="item-media"><i?class="icon?icon-form-calendar"></i></div>
  47. ????????<div?class="item-inner">
  48. ??????????<div?class="item-title?label">Birth?date</div>
  49. ??????????<div?class="item-input">
  50. ????????????<input?type="date"?placeholder="Birth?day"?value="2014-04-30">
  51. ??????????</div>
  52. ????????</div>
  53. ??????</div>
  54. ????</li>
  55. ????<!--?Date?time-->
  56. ????<li>
  57. ??????<div?class="item-content">
  58. ????????<div?class="item-media"><i?class="icon?icon-form-calendar"></i></div>
  59. ????????<div?class="item-inner">
  60. ??????????<div?class="item-title?label">Date?time</div>
  61. ??????????<div?class="item-input">
  62. ????????????<input?type="datetime-local">
  63. ??????????</div>
  64. ????????</div>
  65. ??????</div>
  66. ????</li>
  67. ????<!--?Switch?(Checkbox)?-->
  68. ????<li>
  69. ??????<div?class="item-content">
  70. ????????<div?class="item-media"><i?class="icon?icon-form-toggle"></i></div>
  71. ????????<div?class="item-inner">
  72. ??????????<div?class="item-title?label">Switch</div>
  73. ??????????<div?class="item-input">
  74. ????????????<label?class="label-switch">
  75. ??????????????<input?type="checkbox">
  76. ??????????????<div?class="checkbox"></div>
  77. ????????????</label>
  78. ??????????</div>
  79. ????????</div>
  80. ??????</div>
  81. ????</li>
  82. ????<!--?Slider?(Range?input)?-->
  83. ????<li>
  84. ??????<div?class="item-content">
  85. ????????<div?class="item-media"><i?class="icon?icon-form-settings"></i></div>
  86. ????????<div?class="item-inner">
  87. ??????????<div?class="item-title?label">Slider</div>
  88. ??????????<div?class="item-input">
  89. ????????????<div?class="range-slider">
  90. ??????????????<input?type="range"?min="0"?max="100"?value="50"?step="0.1">
  91. ????????????</div>
  92. ??????????</div>
  93. ????????</div>
  94. ??????</div>
  95. ????</li>
  96. ????<!--?Textarea?-->
  97. ????<li?class="align-top">
  98. ??????<div?class="item-content">
  99. ????????<div?class="item-media"><i?class="icon?icon-form-comment"></i></div>
  100. ????????<div?class="item-inner">
  101. ??????????<div?class="item-title?label">Textarea</div>
  102. ??????????<div?class="item-input">
  103. ????????????<textarea></textarea>
  104. ??????????</div>
  105. ????????</div>
  106. ??????</div>
  107. ????</li>
  108. ??</ul>
  109. </div>
复制

实例预览

图标和输入框

因为?item-title?是可选元素，所以可以不写:

  1. <div?class="content-block-title">Icons?and?inputs</div>
  2. <div?class="list-block">
  3. ??<ul>
  4. ????<!--?Text?inputs?-->
  5. ????<li>
  6. ??????<div?class="item-content">
  7. ????????<div?class="item-media"><i?class="icon?icon-form-name"></i></div>
  8. ????????<div?class="item-inner">
  9. ??????????<div?class="item-input">
  10. ????????????<input?type="text"?placeholder="Your?name">
  11. ??????????</div>
  12. ????????</div>
  13. ??????</div>
  14. ????</li>
  15. ????<li>
  16. ??????<div?class="item-content">
  17. ????????<div?class="item-media"><i?class="icon?icon-form-email"></i></div>
  18. ????????<div?class="item-inner">
  19. ??????????<div?class="item-input">
  20. ????????????<input?type="email"?placeholder="E-mail">
  21. ??????????</div>
  22. ????????</div>
  23. ??????</div>
  24. ????</li>
  25. ????
  26. ????<!--?Select?-->
  27. ????<li>
  28. ??????<div?class="item-content">
  29. ????????<div?class="item-media"><i?class="icon?icon-form-gender"></i></div>
  30. ????????<div?class="item-inner">
  31. ??????????<div?class="item-input">
  32. ????????????<select>
  33. ??????????????<option>Male</option>
  34. ??????????????<option>Female</option>
  35. ????????????</select>
  36. ??????????</div>
  37. ????????</div>
  38. ??????</div>
  39. ????</li>
  40. ????
  41. ????<!--?Date?-->
  42. ????<li>
  43. ??????<div?class="item-content">
  44. ????????<div?class="item-media"><i?class="icon?icon-form-calendar"></i></div>
  45. ????????<div?class="item-inner">
  46. ??????????<div?class="item-input">
  47. ????????????<input?type="date"?placeholder="Birth?day"?value="2014-04-30">
  48. ??????????</div>
  49. ????????</div>
  50. ??????</div>
  51. ????</li>
  52. ????
  53. ????<!--?Switch?(Checkbox)?-->
  54. ????<li>
  55. ??????<div?class="item-content">
  56. ????????<div?class="item-media"><i?class="icon?icon-form-toggle"></i></div>
  57. ????????<div?class="item-inner">
  58. ??????????<div?class="item-input">
  59. ????????????<label?class="label-switch">
  60. ??????????????<input?type="checkbox">
  61. ??????????????<div?class="checkbox"></div>
  62. ????????????</label>
  63. ??????????</div>
  64. ????????</div>
  65. ??????</div>
  66. ????</li>
  67. ????
  68. ????<!--?Slider?(Range?input)?-->
  69. ????<li>
  70. ??????<div?class="item-content">
  71. ????????<div?class="item-media"><i?class="icon?icon-form-settings"></i></div>
  72. ????????<div?class="item-inner">
  73. ??????????<div?class="item-input">
  74. ????????????<div?class="range-slider">
  75. ??????????????<input?type="range"?min="0"?max="100"?value="50"?step="0.1">
  76. ????????????</div>
  77. ??????????</div>
  78. ????????</div>
  79. ??????</div>
  80. ????</li>
  81. ??</ul>
  82. </div>
复制

实例预览

label和输入框

因为?item-media?是可选元素，所以可以不写:

  1. <div?class="content-block-title">Labels?and?inputs</div>
  2. <div?class="list-block">
  3. ??<ul>
  4. ????<!--?Text?inputs?-->
  5. ????<li>
  6. ??????<div?class="item-content">
  7. ????????<div?class="item-inner">
  8. ??????????<div?class="item-title?label">Name</div>
  9. ??????????<div?class="item-input">
  10. ????????????<input?type="text"?placeholder="Your?name">
  11. ??????????</div>
  12. ????????</div>
  13. ??????</div>
  14. ????</li>
  15. ????<li>
  16. ??????<div?class="item-content">
  17. ????????<div?class="item-inner">
  18. ??????????<div?class="item-title?label">E-mail</div>
  19. ??????????<div?class="item-input">
  20. ????????????<input?type="email"?placeholder="E-mail">
  21. ??????????</div>
  22. ????????</div>
  23. ??????</div>
  24. ????</li>
  25. ????
  26. ????<!--?Select?-->
  27. ????<li>
  28. ??????<div?class="item-content">
  29. ????????<div?class="item-inner">
  30. ??????????<div?class="item-title?label">Gender</div>
  31. ??????????<div?class="item-input">
  32. ????????????<select>
  33. ??????????????<option>Male</option>
  34. ??????????????<option>Female</option>
  35. ????????????</select>
  36. ??????????</div>
  37. ????????</div>
  38. ??????</div>
  39. ????</li>
  40. ????
  41. ????<!--?Date?-->
  42. ????<li>
  43. ??????<div?class="item-content">
  44. ????????<div?class="item-inner">
  45. ??????????<div?class="item-title?label">Birth?date</div>
  46. ??????????<div?class="item-input">
  47. ????????????<input?type="date"?placeholder="Birth?day"?value="2014-04-30">
  48. ??????????</div>
  49. ????????</div>
  50. ??????</div>
  51. ????</li>
  52. ????
  53. ????<!--?Switch?(Checkbox)?-->
  54. ????<li>
  55. ??????<div?class="item-content">
  56. ????????<div?class="item-inner">
  57. ??????????<div?class="item-title?label">Switch</div>
  58. ??????????<div?class="item-input">
  59. ????????????<label?class="label-switch">
  60. ??????????????<input?type="checkbox">
  61. ??????????????<div?class="checkbox"></div>
  62. ????????????</label>
  63. ??????????</div>
  64. ????????</div>
  65. ??????</div>
  66. ????</li>
  67. ????
  68. ????<!--?Slider?(Range?input)?-->
  69. ????<li>
  70. ??????<div?class="item-content">
  71. ????????<div?class="item-inner">
  72. ??????????<div?class="item-title?label">Slider</div>
  73. ??????????<div?class="item-input">
  74. ????????????<div?class="range-slider">
  75. ??????????????<input?type="range"?min="0"?max="100"?value="50"?step="0.1">
  76. ????????????</div>
  77. ??????????</div>
  78. ????????</div>
  79. ??????</div>
  80. ????</li>
  81. ??</ul>
  82. </div>
复制

实例预览

只有输入框

  1. <div?class="content-block-title">Just?inputs</div>
  2. <div?class="list-block">
  3. ??<ul>
  4. ????<li>
  5. ??????<div?class="item-content">
  6. ????????<div?class="item-inner">
  7. ??????????<div?class="item-input">
  8. ????????????<input?type="text"?placeholder="Your?name">
  9. ??????????</div>
  10. ????????</div>
  11. ??????</div>
  12. ????</li>
  13. ????<li>
  14. ??????<div?class="item-content">
  15. ????????<div?class="item-inner">
  16. ??????????<div?class="item-input">
  17. ????????????<input?type="email"?placeholder="E-mail">
  18. ??????????</div>
  19. ????????</div>
  20. ??????</div>
  21. ????</li>
  22. ????<li>
  23. ??????<div?class="item-content">
  24. ????????<div?class="item-inner">
  25. ??????????<div?class="item-input">
  26. ????????????<select>
  27. ??????????????<option>Male</option>
  28. ??????????????<option>Female</option>
  29. ????????????</select>
  30. ??????????</div>
  31. ????????</div>
  32. ??????</div>
  33. ????</li>
  34. ????<li>
  35. ??????<div?class="item-content">
  36. ????????<div?class="item-inner">
  37. ??????????<div?class="item-input">
  38. ????????????<input?type="date"?placeholder="Birth?day"?value="2014-04-30">
  39. ??????????</div>
  40. ????????</div>
  41. ??????</div>
  42. ????</li>
  43. ??</ul>
  44. </div>
复制

实例预览

Inset

因为表单也是 列表布局 的一种, 所以可以变成 inset:

  1. <div?class="content-block-title">Just?inputs</div>
  2. <!--?"inset"?class?on?list-block?-->
  3. <div?class="list-block?inset">
  4. ??...
  5. </div>
    复制

实例预览

?

原文：http://zaixianshouce.iteye.com/blog/2305406

评论（0）
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣，分享程序人生！