首页 > 移动平台 > 详细

移动端安卓和IOS开发框架Framework7教程-Smart Select

时间：2016-06-23 02:07:07      阅读：369      评论：0      收藏：0      [点我收藏+]

Smart Select 可以自动帮你把原生的select变成一个由 分组单选按钮 构成的动态页面。在很多iOs native应用中你可以看到这种特性。

Smart Select 布局

Smart Select 布局非常简单，只需要在 列表 中插入?<select>，并且给 item-link 加上 "smart-select" class即可。

  1. <div?class="list-block">
  2. ??<ul>
  3. ????<!--?Smart?select?item?-->
  4. ????<li>
  5. ??????<!--?Additional?"smart-select"?class?-->
  6. ??????<a?href="#"?class="item-link?smart-select">
  7. ????????<!--?select?-->
  8. ????????<select?name="fruits">
  9. ??????????<option?value="apple"?selected>Apple</option>
  10. ??????????<option?value="pineapple">Pineapple</option>
  11. ??????????...
  12. ????????</select>
  13. ????????<div?class="item-content">
  14. ??????????<div?class="item-inner">
  15. ????????????<!--?Select?label?-->
  16. ????????????<div?class="item-title">Fruit</div>
  17. ????????????<!--?Selected?value,?not?required?-->
  18. ????????????<div?class="item-after">Apple</div>
  19. ??????????</div>
  20. ????????</div>
  21. ??????</a>
  22. ????</li>
  23. ????<!--?Another?smart?selects?or?list?view?elements?-->
  24. ????...
  25. ??</ul>
  26. </div>
复制

实例预览

注意，smart select 只有在 初始化 之后的View中才可用。

带有搜索栏的Smart Select

Smart select 可以结合 搜索栏 使用。如果你希望所有的 Smart Select 都带有搜索栏，你可以在初始化 的时候传入一个smartSelectSearchbar: true?参数。

也可以通过 "data-" 属性来启用搜索栏:

  1. <div?class="list-block">
  2. ??<ul>
  3. ????<!--?Smart?select?item?-->
  4. ????<li>
  5. ??????<a?href="#"?class="item-link?smart-select"?data-searchbar="true"?data-searchbar-placeholder="Search?fruits">
  6. ????????...?same?Smart?select?Fruits?structure?as?in?previous?example?...
  7. ??????</a>
  8. ????</li>
  9. ????<li>
  10. ??????<a?href="#"?class="item-link?smart-select"?data-searchbar="true"?data-searchbar-placeholder="Search?cars">
  11. ????????...?same?Smart?select?Cars?structure?as?in?previous?example?...
  12. ??????</a>
  13. ????</li>
  14. ??</ul>
  15. </div>
复制

其中

  • data-searchbar?- 对当前的Smart Select启用搜索栏（或者可以通过全局的 smartSelectSearchbar 参数来启用
  • data-searchbar-placeholder?- 搜索栏输入框的占位符，可选。默认是 "Search"

  • data-searchbar-cancel?- 取消按钮的文案，可选。 默认是 "cancel"

实例预览

自定义页面的title和返回按钮的文案

默认情况下，Smart Select 页面的标题总是和被点击条目的 "item-title" 文案一直，返回按钮的文案总是和 "smartSelectBackText" 中设置的文案一直。

有时候你需要自定义文案，可以通过在 Smart Select 链接上使用 "data-page-title" 和 "data-back-text" 来设置

  1. <div?class="list-block">
  2. ??<ul>
  3. ????<!--?Smart?select?item?-->
  4. ????<li>
  5. ??????<a?href="#"?class="item-link?smart-select"?data-page-title="Awesome?Fruits"?data-back-text="Go?back">
  6. ????????...?same?Smart?select?Fruits?structure?as?in?previous?example?...
  7. ??????</a>
  8. ????</li>
  9. ????<li>
  10. ??????<a?href="#"?class="item-link?smart-select"?data-page-title="Super?Cars"?data-back-text="Go?back">
  11. ????????...?same?Smart?select?Cars?structure?as?in?previous?example?...
  12. ??????</a>
  13. ????</li>
  14. ??</ul>
  15. </div>
复制

?实例预览

在弹层中打开

Smart select 可以在弹层中打开，而不是新页面。如果你希望所有的Smart select 都在弹层中打开，那么你可以在 App 初始化 的时候设置smartSelectInPopup:true参数。

另外，他也可以通过 "data-open-in" 属性来配置：

  1. <div?class="list-block">
  2. ??<ul>
  3. ????<li>
  4. ??????<!--?Smart?select,?will?be?opened?in?Popup?-->
  5. ??????<a?href="#"?class="item-link?smart-select"?data-open-in="popup">
  6. ????????...?same?Smart?select?Fruits?structure?as?in?previous?example?...
  7. ??????</a>
  8. ????</li>
  9. ????<li>
  10. ??????<!--?Smart?select,?will?be?opened?in?Popup?with?custom?"Close"?text?-->
  11. ??????<a?href="#"?class="item-link?smart-select"?data-open-in="popup"?data-popup-close-text="Close?Cars">
  12. ????????...?same?Smart?select?Cars?structure?as?in?previous?example?...
  13. ??????</a>
  14. ????</li>
  15. ??</ul>
  16. </div>
复制

?实例预览

注意，如果你通过设置smartSelectInPopup:true使所有的 Smart select 都以弹层的方式打开，你依然可通过设置?data-open-in="page"?属性来设置以页面方式打开。

自定义图标和图片

你可以自定义Smart Select列表中的图标和图片。我们必须通过在smart select 的?<select>或者<option>上设置 "data-option-icon" 或者 "data-option-image"来实现自定义。如果是在<select>上设置的，则对所有的option都生效；如果是在<option>上设置的，则只对当前一条生效。

For single option we may also use?data-option-color?and?data-option-class?attributes to add specific option color or css class for additional styling

  1. <a?href="#"?class="item-link?smart-select">
  2. ??<select?name="fruits">
  3. ????<option?value="apple"?selected?data-option-image="http://lorempixel.com/29/29/">Apple</option>
  4. ????<option?value="pineapple"?data-option-image="http://lorempixel.com/29/29/?2">Pineapple</option>
  5. ????<option?value="pear"?data-option-color="orange"?data-option-image="http://lorempixel.com/29/29/?3">Pear</option>
  6. ????...
  7. ??</select>
  8. ??<div?class="item-content">
  9. ????<div?class="item-inner">
  10. ??????<div?class="item-title">Fruit</div>
  11. ????</div>
  12. ??</div>
  13. </a>
复制

?实例预览

多选和分组

  1. <div?class="list-block">
  2. ??<ul>
  3. ????<li><a?href="#"?class="item-link?smart-select">
  4. ????????<!--?"multiple"?attribute?for?multiple?select-->
  5. ????????<select?name="car"?multiple>
  6. ??????????<!--?options?grouped?within?"optgroup"?tag-->
  7. ??????????<optgroup?label="Japanese">
  8. ????????????<option?value="honda"?selected>Honda</option>
  9. ????????????<option?value="lexus">Lexus</option>
  10. ????????????<option?value="mazda">Mazda</option>
  11. ????????????<option?value="nissan">Nissan</option>
  12. ????????????<option?value="toyota">Toyota</option>
  13. ??????????</optgroup>
  14. ??????????<optgroup?label="German">
  15. ????????????<option?value="audi"?selected>Audi</option>
  16. ????????????<option?value="bmw">BMW</option>
  17. ????????????<option?value="mercedes">Mercedes</option>
  18. ????????????<option?value="vw">Volkswagen</option>
  19. ????????????<option?value="volvo">Volvo</option>
  20. ??????????</optgroup>
  21. ??????????<optgroup?label="American">
  22. ????????????<option?value="cadillac">Cadillac</option>
  23. ????????????<option?value="chrysler">Chrysler</option>
  24. ????????????<option?value="dodge">Dodge</option>
  25. ????????????<option?value="ford"?selected>Ford</option>
  26. ??????????</optgroup>
  27. ????????</select>
  28. ????????<div?class="item-content">
  29. ??????????<div?class="item-inner">
  30. ????????????<div?class="item-title">Car</div>
  31. ??????????</div>
  32. ????????</div></a></li>
  33. ??</ul>
  34. </div>
复制

?实例预览

我们可以通过 <optgroup> 来使用分组，可以通过在 select 上设置 "multiple" 属性来使用多选（页面会自动换成checkbox)。

用户选择之后自动关闭

可以设置用户选择之后自动关闭页面。只需要设置?data-back-on-select?属性即可：

  1. <div?class="list-block">
  2. ??<ul>
  3. ????<!--?data-back-on-select="true"?to?close?page?automatically?-->
  4. ????<li><a?href="#"?class="item-link?smart-select"?data-back-on-select="true">
  5. ????????<select?name="car"?multiple>
  6. ??????????...
  7. ????????</select>
  8. ????????<div?class="item-content">
  9. ??????????<div?class="item-inner">
  10. ????????????<div?class="item-title">Car</div>
  11. ??????????</div>
  12. ????????</div></a></li>
  13. ??</ul>
  14. </div>
复制

你可以在 初始化 的时候设置?smartSelectBackOnSelect?来使所有的Smart Select 都能点击之后自动关闭。

Smart Select 结合 虚拟列表

如果你的 smart select 有大量的数据（成百上千），你可以对其启用虚拟列表。这种情况下，我们只需要添加在smart select 上?data-virtual-list?属性即可：

  1. <div?class="list-block">
  2. ????<ul>
  3. ????????<li>
  4. ????????????<!--?data-virtual-list="true"?attribute?to?enable?virtual?list??-->
  5. ????????????<a?href="#"?class="item-link?smart-select"?data-virtual-list="true">
  6. ????????????????<select?name="numbers">
  7. ????????????????????<option?value="1">1</option>
  8. ????????????????????<option?value="2">2</option>
  9. ????????????????????...
  10. ????????????????????<option?value="100000">100000</option>
  11. ????????????????</select>
  12. ????????????????<div?class="item-content">
  13. ????????????????????<div?class="item-inner">
  14. ????????????????????????<div?class="item-title">Numbers</div>
  15. ????????????????????</div>
  16. ????????????????</div>
  17. ????????????</a>
  18. ????????</li>
  19. ????</ul>
  20. </div>
复制

如果你需要指定虚拟列表中条目的高度，你可以直接添加一个?data-virtual-list-height?属性：

  1. <div?class="list-block">
  2. ????<ul>
  3. ????????<li>
  4. ????????????<!--?data-virtual-list-height="55"?attribute?to?set?virtual?list?single?item?height?to?55px?-->
  5. ????????????<a?href="#"?class="item-link?smart-select"?data-virtual-list="true"?data-virtual-list-height="55">
  6. ????????????????<select?name="numbers">
  7. ????????????????????<option?value="1">1</option>
  8. ????????????????????<option?value="2">2</option>
  9. ????????????????????...
  10. ????????????????????<option?value="100000">100000</option>
  11. ????????????????</select>
  12. ????????????????<div?class="item-content">
  13. ????????????????????<div?class="item-inner">
  14. ????????????????????????<div?class="item-title">Numbers</div>
  15. ????????????????????</div>
  16. ????????????????</div>
  17. ????????????</a>
  18. ????????</li>
  19. ????</ul>
  20. </div>
复制

Smart Select 颜色主题

You can also specify form and navbar color themes on smart select page or in smart select popup using?data-form-theme?and?data-navbar-theme?attributes:

你可以通过?data-form-theme?和?data-navbar-theme?属性来设置 smart select 页面或者弹层中表单和导航栏的主题。

  1. <div?class="list-block">
  2. ????<ul>
  3. ????????<li>
  4. ????????????<!--?data-navbar-theme="red"?to?set?red?color?theme?for?navbar?-->
  5. ????????????<!--?data-form-theme="green"?to?set?green?color?theme?for?form?-->
  6. ????????????<a?href="#"?class="item-link?smart-select"?data-navbar-theme="red"?data-form-theme="green">
  7. ????????????????<select?name="car">
  8. ????????????????????...
  9. ????????????????</select>
  10. ????????????????<div?class="item-content">
  11. ????????????????????<div?class="item-inner">
  12. ????????????????????????<div?class="item-title">Car</div>
  13. ????????????????????</div>
  14. ????????????????</div>
  15. ????????????</a>
  16. ????????</li>
  17. ????</ul>
  18. </div>
复制

通过可选的文案来设置值

It is possible to set smart select (and its select) value depending on selected option value. For this case we need to add additional"smart-select-value"?class to "item-after":

  1. <div?class="list-block">
  2. ??<ul>
  3. ????<li>
  4. ??????<a?href="#"?class="item-link?smart-select">
  5. ????????<!--?select?-->
  6. ????????<select?name="fruits">
  7. ??????????<option?value="apple">Apple</option>
  8. ??????????<option?value="pineapple">Pineapple</option>
  9. ??????????...
  10. ????????</select>
  11. ????????<div?class="item-content">
  12. ??????????<div?class="item-inner">
  13. ????????????<div?class="item-title">Fruit</div>
  14. ????????????<!--?Additional?"smart-select-value"?class?to?set?selected?option?depending?on?this?text?value?-->
  15. ????????????<div?class="item-after?smart-select-value">Apple</div>
  16. ??????????</div>
  17. ????????</div>
  18. ??????</a>
  19. ????</li>
  20. ??</ul>
  21. </div>
复制

After that?<option>?with "Apple" text value will be set as selected.

通过 JavaScript 打开 smart select

也可以通过 JavaScript 来打开 smart select。我们需要使用这些相关的App方法：

myApp.smartSelectOpen(smartSelect) - 打开指定的 smart select

  • smartSelect - HTMLElement or string (with CSS Selector) of required ".smart-select". Required.

Add options dynamically

It is possible to add Smart Select options later dynamically, if it is even already opened. We need to use appropriate App method:

myApp.smartSelectAddOption(select, optionHTML, index) - add option to select at specified index

  • select - HTMLElement or string (with CSS Selector) of Smart Select‘s?<select>?or?<optgroup>. Required.
  • optionHTML - string with HTML of option to add. Required.
  • index - number index number for new option. If not specified, then option will be added to the end

For example:

  1. //?Append?option
  2. myApp.smartSelectAddOption(‘.smart-select?select‘,?‘<option?value="apple">Apple</option>‘);
  3. ?
  4. //?Add?new?option?as?first?selected?option
  5. myApp.smartSelectAddOption(‘.smart-select?select‘,?‘<option?value="apple"?selected>Apple</option>‘,?0);
  6. ?
  7. //?Append?new?option?to?second?<optgroup>
  8. myApp.smartSelectAddOption($$(‘.smart-select?select?optigroup‘).eq(1),?‘<option?value="apple">Apple</option>‘,?0);
复制
?

移动端安卓和IOS开发框架Framework7教程-Smart Select

原文：http://zaixianshouce.iteye.com/blog/2306024
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！