You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

324 lines
8.3 KiB

  1. ---
  2. layout : 'default'
  3. css : 'checkbox'
  4. title : 'Checkbox'
  5. description : "A checkbox visually indicates the status of a user's selection"
  6. type : 'UI Module'
  7. ---
  8. <script src="/javascript/checkbox.js"></script>
  9. <%- @partial('header') %>
  10. <div class="main container">
  11. <div class="peek">
  12. <div class="ui vertical pointing secondary menu">
  13. <a class="active item">Usage</a>
  14. <a class="item">Types</a>
  15. <a class="item">Variations</a>
  16. <a class="item">Behavior</a>
  17. <a class="item">Examples</a>
  18. </div>
  19. </div>
  20. <h2 class="ui dividing header">Usage</h2>
  21. <div class="example">
  22. <h4 class="ui header">Check Box</h4>
  23. <p>A standard checkbox</p>
  24. <div class="ui language label">Javascript</div>
  25. <div class="code">
  26. $('.ui.checkbox')
  27. .checkbox()
  28. ;
  29. </div>
  30. <div class="ui language label">HTML</div>
  31. <div class="code" data-type="html" data-preview="true">
  32. <div class="ui checkbox">
  33. <input type="checkbox">
  34. <label>Poodle</label>
  35. </div>
  36. </div>
  37. <div class="static example">
  38. <h4 class="ui header">Static Check Box</h4>
  39. <p>A checkbox can also be used without using javascript by creating the check box as a label with a for tag matching the <code>id</code> attribute of the input field.</p>
  40. <div class="ui language label">HTML Only</div>
  41. <div class="code" data-type="html" data-preview="true">
  42. <div class="ui checkbox">
  43. <input type="checkbox" id="unique-id" />
  44. <label for="unique-id">Poodle</label>
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. <h2 class="ui dividing header">Types</h2>
  50. <div class="example">
  51. <h4 class="ui header">Slider</h4>
  52. <p>A checkbox can be formatted to show user selection as a slider</p>
  53. <div class="ui slider checkbox">
  54. <input type="checkbox" name="walk" />
  55. <label>Allow others to see when your dog is on a walk</label>
  56. </div>
  57. </div>
  58. <div class="example">
  59. <h4 class="ui header">Toggle</h4>
  60. <p>A checkbox can be formatted to show user selection as a toggle</p>
  61. <div class="ui toggle checkbox">
  62. <input type="checkbox" name="pet" />
  63. <label>Allow other people to pet my dog</label>
  64. </div>
  65. </div>
  66. <div class="example">
  67. <h4 class="ui header">Radio Box</h4>
  68. <p>A checkbox can be formatted as a radio element. This means it is an exclusive option.</p>
  69. <div class="ui form">
  70. <div class="grouped inline fields">
  71. <div class="field">
  72. <div class="ui radio checkbox">
  73. <input type="radio" name="fruit" checked="checked" />
  74. <label>Apples</label>
  75. </div>
  76. </div>
  77. <div class="field">
  78. <div class="ui radio checkbox">
  79. <input type="radio" name="fruit" />
  80. <label>Oranges</label>
  81. </div>
  82. </div>
  83. <div class="field">
  84. <div class="ui radio checkbox">
  85. <input type="radio" name="fruit" />
  86. <label>Pears</label>
  87. </div>
  88. </div>
  89. <div class="field">
  90. <div class="ui radio checkbox">
  91. <input type="radio" name="fruit" />
  92. <label>Grapefruit</label>
  93. </div>
  94. </div>
  95. </div>
  96. </div>
  97. </div>
  98. <h2 class="ui dividing header">Variations</h2>
  99. <div class="example">
  100. <h4 class="ui header">Size</h4>
  101. <p>A checkbox can be a different size.</p>
  102. <div class="ui large checkbox">
  103. <input type="checkbox" />
  104. <label>Add a pro membership</label>
  105. </div>
  106. </div>
  107. <div class="another example">
  108. <div class="ui huge checkbox">
  109. <input type="checkbox" />
  110. <label>Signup for our mailing list</label>
  111. </div>
  112. </div>
  113. <h2 class="ui dividing header">Behavior</h2>
  114. <div class="example">
  115. <p>A checkbox can change to show a user has selected it</p>
  116. <div class="ignore code">
  117. $('.ui.checkbox')
  118. .checkbox('enable')
  119. ;
  120. </div>
  121. </div>
  122. <div class="example">
  123. <p>A checkbox can change to show a user has not selected it</p>
  124. <div class="ignore code">
  125. $('.ui.checkbox')
  126. .checkbox('disable')
  127. ;
  128. </div>
  129. </div>
  130. <div class="example">
  131. <p>A checkbox can toggle between states</p>
  132. <div class="ignore code">
  133. $('.ui.checkbox')
  134. .checkbox('toggle')
  135. ;
  136. </div>
  137. </div>
  138. <h2>Examples</h2>
  139. <div class="example">
  140. <p>Example of using checkbox states to alter multiple checkboxes</p>
  141. <div class="evaluated code">
  142. $('.enable.button')
  143. .on('click', function() {
  144. $(this)
  145. .parent()
  146. .nextAll('.checkbox')
  147. .checkbox('enable')
  148. ;
  149. })
  150. ;
  151. $('.disable.button')
  152. .on('click', function() {
  153. $(this)
  154. .parent()
  155. .nextAll('.checkbox')
  156. .checkbox('disable')
  157. ;
  158. })
  159. ;
  160. $('.toggle.button')
  161. .on('click', function() {
  162. $(this)
  163. .parent()
  164. .nextAll('.checkbox')
  165. .checkbox('toggle')
  166. ;
  167. })
  168. ;
  169. </div>
  170. <div class="ui buttons">
  171. <div class="ui enable button">Enable</div>
  172. <div class="ui disable button">Disable</div>
  173. <div class="ui toggle button">Toggle</div>
  174. </div>
  175. <br><br>
  176. <div class="ui slider checkbox">
  177. <input type="checkbox" />
  178. <div class="box"></div>
  179. </div>
  180. <div class="ui slider checkbox">
  181. <input type="checkbox" checked="checked" />
  182. <div class="box"></div>
  183. </div>
  184. <div class="ui slider checkbox">
  185. <input type="checkbox" />
  186. <div class="box"></div>
  187. </div>
  188. <div class="ui slider checkbox">
  189. <input type="checkbox" checked="checked" />
  190. <div class="box"></div>
  191. </div>
  192. <div class="ui slider checkbox">
  193. <input type="checkbox" />
  194. <div class="box"></div>
  195. </div>
  196. <div class="ui slider checkbox">
  197. <input type="checkbox" />
  198. <div class="box"></div>
  199. </div>
  200. <div class="ui slider checkbox">
  201. <input type="checkbox" checked="checked" />
  202. <div class="box"></div>
  203. </div>
  204. <div class="ui slider checkbox">
  205. <input type="checkbox" />
  206. <div class="box"></div>
  207. </div>
  208. <div class="ui slider checkbox">
  209. <input type="checkbox" checked="checked" />
  210. <div class="box"></div>
  211. </div>
  212. <div class="ui slider checkbox">
  213. <input type="checkbox" />
  214. <div class="box"></div>
  215. </div>
  216. </div>
  217. <h3 class="ui header">Settings</h3>
  218. <table class="ui red celled definition table segment">
  219. <thead>
  220. <th colspan="3">Checkbox Settings</th>
  221. </thead>
  222. <tbody>
  223. <tr>
  224. <td>required</td>
  225. <td>auto</td>
  226. <td>Setting to true/false will determine whether an input will allow no selection. Auto will set disallow this behavior only for radio boxes</td>
  227. </tr>
  228. <tr>
  229. <td>context</td>
  230. <td>false</td>
  231. <td>A selector or jQuery object to use as a delegated event context</td>
  232. </tr>
  233. </tbody>
  234. </table>
  235. <table class="ui teal celled definition table segment">
  236. <thead>
  237. <th colspan="3">Callbacks</th>
  238. </thead>
  239. <tbody>
  240. <tr>
  241. <td>onChange</td>
  242. <td>None</td>
  243. <td>Callback after a checkbox is either disabled or enabled.</td>
  244. </tr>
  245. <tr>
  246. <td>onEnable</td>
  247. <td>None</td>
  248. <td>Callback after a checkbox is enabled.</td>
  249. </tr>
  250. <tr>
  251. <td>onDisable</td>
  252. <td>None</td>
  253. <td>Callback after a checkbox is disabled.</td>
  254. </tr>
  255. </tbody>
  256. </table>
  257. <h4 class="ui header">DOM Settings</h4>
  258. <p>DOM settings specify how this module should interface with the DOM</p>
  259. <table class="ui celled definition table segment">
  260. <thead>
  261. <th>Setting</th>
  262. <th class="four wide">Default</th>
  263. <th>Description</th>
  264. </thead>
  265. <tbody>
  266. <tr>
  267. <td>namespace</td>
  268. <td>checkbox</td>
  269. <td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
  270. </tr>
  271. <tr>
  272. <td>selector</td>
  273. <td colspan="2">
  274. <div class="code">
  275. selector : {
  276. input : 'input',
  277. label : 'label'
  278. }
  279. </div>
  280. </td>
  281. </tr>
  282. <tr>
  283. <td>className</td>
  284. <td colspan="2">
  285. <div class="code">
  286. className : {
  287. radio : 'radio'
  288. }
  289. </div>
  290. </td>
  291. </tr>
  292. </tbody>
  293. </table>
  294. </div>
  295. </body>
  296. </html>