移动端安卓和IOS开发框架Framework7教程-单选和复选按钮

复选按钮组

1. <div?class="list-block">
2. ??<ul>
3. ????<!--?Single?chekbox?item?-->
4. ????<li>
5. ??????<label?class="label-checkbox?item-content">
6. ????????<!--?Checked?by?default?-->
7. ????????<input?type="checkbox"?name="my-checkbox"?value="Books"?checked="checked">
8. ????????<div?class="item-media">
9. ??????????<i?class="icon?icon-form-checkbox"></i>
10. ????????</div>
11. ????????<div?class="item-inner">
12. ??????????<div?class="item-title">Books</div>
13. ????????</div>
14. ??????</label>
15. ????</li>
16. ????<!--?Another?chekbox?item?-->
17. ????<li>
18. ??????<label?class="label-checkbox?item-content">
19. ????????<input?type="checkbox"?name="my-checkbox"?value="Movies">
20. ????????<div?class="item-media">
21. ??????????<i?class="icon?icon-form-checkbox"></i>
22. ????????</div>
23. ????????<div?class="item-inner">
24. ??????????<div?class="item-title">Movies</div>
25. ????????</div>
26. ??????</label>
27. ????</li>
28. ????...
29. ??</ul>
30. </div>

Radios group iOS

Let‘s look at radio inputs group layout:

1. <div?class="list-block">
2. ??<ul>
3. ????<!--?Single?radio?input?-->
4. ????<li>
5. ??????<label?class="label-radio?item-content">
6. ????????<!--?Checked?by?default?-->
7. ????????<input?type="radio"?name="my-radio"?value="Books"?checked="checked">
8. ????????<div?class="item-inner">
9. ??????????<div?class="item-title">Books</div>
10. ????????</div>
11. ??????</label>
12. ????</li>
13. ????<!--?Another?radio?input?-->
14. ????<li>
15. ??????<label?class="label-radio?item-content">
16. ????????<input?type="radio"?name="my-radio"?value="Movies">
17. ????????<div?class="item-inner">
18. ??????????<div?class="item-title">Movies</div>
19. ????????</div>
20. ??????</label>
21. ????</li>
22. ????...
23. ??</ul>
24. </div>

Radios group Material

1. <div?class="list-block">
2. ??<ul>
3. ????<!--?Single?radio?input?-->
4. ????<li>
5. ??????<label?class="label-radio?item-content">
6. ????????<!--?Checked?by?default?-->
7. ????????<input?type="radio"?name="my-radio"?value="Books"?checked="checked">
8. ????????<div?class="item-media">
9. ??????????<i?class="icon?icon-form-radio"></i>
10. ????????</div>
11. ????????<div?class="item-inner">
12. ??????????<div?class="item-title">Books</div>
13. ????????</div>
14. ??????</label>
15. ????</li>
16. ????<!--?Another?radio?input?-->
17. ????<li>
18. ??????<label?class="label-radio?item-content">
19. ????????<input?type="radio"?name="my-radio"?value="Movies">
20. ????????<div?class="item-media">
21. ??????????<i?class="icon?icon-form-radio"></i>
22. ????????</div>
23. ????????<div?class="item-inner">
24. ??????????<div?class="item-title">Movies</div>
25. ????????</div>
26. ??????</label>
27. ????</li>
28. ????...
29. ??</ul>
30. </div>

实例预览

With media list view

You can use checkboxes and radios groups with media list view:

1. <div?class="content-block-title">Select?Message</div>
2. <div?class="list-block?media-list">
3. ??<ul>
4. ????<li>
5. ??????<label?class="label-checkbox?item-content">
6. ????????<input?type="checkbox"?name="my-checkbox">
7. ????????<div?class="item-media"><i?class="icon?icon-form-checkbox"></i></div>
8. ????????<div?class="item-inner">
9. ??????????<div?class="item-title-row">
10. ????????????<div?class="item-title">Facebook</div>
11. ????????????<div?class="item-after">17:14</div>
12. ??????????</div>
13. ??????????<div?class="item-subtitle">New?messages?from?John?Doe</div>
14. ??????????<div?class="item-text">Lorem?ipsum?dolor?sit?amet...</div>
15. ????????</div>
16. ??????</label>
17. ????</li>
18. ????...
19. ??</ul>
20. </div>
21. ?
22. <div?class="content-block-title">What?is?your?favourite?song?</div>
23. <div?class="list-block?media-list">
24. ??<ul>
25. ????<li>
26. ??????<label?class="label-radio?item-content">
27. ????????<input?type="radio"?name="my-radio"?checked>
28. ????????<div?class="item-media"><img?src="..."?width="80"></div>
29. ????????<div?class="item-inner">
30. ??????????<div?class="item-title-row">
31. ????????????<div?class="item-title">Yellow?Submarine</div>
32. ????????????<div?class="item-after">$15</div>
33. ??????????</div>
34. ??????????<div?class="item-subtitle">Beatles</div>
35. ??????????<div?class="item-text">Lorem?ipsum?dolor?...</div>
36. ????????</div>
37. ??????</label>
38. ????</li>
39. ????...
40. ??</ul>
41. </div>

实例预览

?

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