selectator, Selectator是一个基于jQuery的选择框替换

分享于 

11分钟阅读

GitHub

  繁體 雙語
Selectator is a jQuery-based replacement for select boxes
  • 源代码名称:selectator
  • 源代码网址:http://www.github.com/QODIO/selectator
  • selectator源代码文档
  • selectator源代码下载
  • Git URL:
    git://www.github.com/QODIO/selectator.git
    Git Clone代码到本地:
    git clone http://www.github.com/QODIO/selectator
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/QODIO/selectator
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    Selectator

    Selectator是一个基于jquery的选择框替换。 它支持搜索,自定义呈现器,远程数据( ajax ),搜索延迟,最小搜索长度,选择删除/清除和占位符。 它直接影响原始选择框,它被用作数据容器。 你可以在这里看到一个演示。

    用法

    包括在头部:
    <linkrel="stylesheet"href="fm.selectator.jquery.css"/>
    <scriptsrc="jquery-1.11.0.min.js"></script>
    <scriptsrc="fm.selectator.jquery.js"></script>
    激活替换:
    $('#selectBox').selectator();

    如果不想使用脚本,那么可以使用 inline 标记来激活替换。

    <selectmultipleclass="selectator"data-selectator-keep-open="true">
    如果要更改设置,请执行下列操作:
    $('#selectBox').selectator({
     prefix:'selectator_', // CSS class prefix height:'auto', // Auto or element useDimmer:false, // Dims the screen when option list is visible useSearch:true, // If false, the search boxes are removed and // `showAllOptionsOnFocus` is forced to true showAllOptionsOnFocus:false, // Show the dropdown immediately when the control receives focus selectFirstOptionOnSearch:true, // Selects the topmost option on every search keepOpen:false, // If true, then the dropdown will not close when // selecting options, but stay open until losing focussubmitCallback:function(value){}, // Callback function when enter is pressed and // no option is active in multi select box placeholder:'', // Placeholder text for the select, can also be // set on select elementload:function(search, callback){ // Callback function when using remote datacallback(results);
     },
     delay:0, // The amount of milleseconds to wait for doing a search minSearchLength:0, // Mininum length of search string required for searching valueField:'value', // The name of the property to use as the"value"// (not needed when custom rendering functions are defined) textField:'text', // The name of the property to use as the"text"// (not needed when custom rendering functions are defined) searchFields: ['value', 'test'], // The fields to search in render: {
     selected_item:function (_item, escape) {
     var html ='';
     if (typeof_item.left!=='undefined') 
     html +='<div class="'+self.options.prefix+'selected_item_left"><img src="'+escape(_item.left) +'"></div>';
     if (typeof_item.right!=='undefined') 
     html +='<div class="'+self.options.prefix+'selected_item_right">'+escape(_item.right) +'</div>';
     html +='<div class="'+self.options.prefix+'selected_item_title">'+ ((typeof_item.text!=='undefined') ?escape(_item.text) :'') +'</div>';
     if (typeof_item.subtitle!=='undefined') 
     html +='<div class="'+self.options.prefix+'selected_item_subtitle">'+escape(_item.subtitle) +'</div>';
     html +='<div class="'+self.options.prefix+'selected_item_remove">X</div>';
     return html;
     },
     option:function (_item, escape) {
     var html ='';
     if (typeof_item.left!=='undefined') 
     html +='<div class="'+self.options.prefix+'option_left"><img src="'+escape(_item.left) +'"></div>';
     if (typeof_item.right!=='undefined') 
     html +='<div class="'+self.options.prefix+'option_right">'+escape(_item.right) +'</div>';
     html +='<div class="'+self.options.prefix+'option_title">'+ ((typeof_item.text!=='undefined') ?escape(_item.text) :'') +'</div>';
     if (typeof_item.subtitle!=='undefined') 
     html +='<div class="'+self.options.prefix+'option_subtitle">'+escape(_item.subtitle) +'</div>';
     return html;
     }
     },
     labels: {
     search:'Search...'// Placeholder text in search box in single select box }
    });
    选项标记的额外属性

    通过使用 data-leftdata-rightdata-subtitle 或者任何其他属性,可以扩展呈现器提供的信息。 默认的leftrightsubtitle 可以通过css进行样式化,并命名为 prefix_ 标题。prefix_ 左侧。prefix_ 右侧和 prefix_ 副标题。 原始选项和optgroup元素的class 属性也被添加到genererated元素中

    <selectid="selectBox">
     <!-- Normal option tag --> <optionvalue="1">This is the title</option>
     <!-- Extended option tag --> <optionvalue="2"data-left="This is the left section"data-right="This is the right section"data-subtitle="This is the section under the title">This is the title</option>
    </select>

    将显示如下所示的内容:

    左边标题右边
    副标题

    CSS类

    下面是所有css类的列表

    类描述
    prefix_ 元素这是新的选择框。 它有一些名为 singlemultiple的类,它知道是否是多选择或者单选选择框。 同时 options-visibleoptions-hidden 表示选项列表是否可见或者不可见。
    prefix_ selected_items选定项目的持有者。
    prefix_ selected_item选定项目的持有者。
    prefix_ selected_item_title选定项目的标题。
    prefix_ selected_item_left选定项的左部分。
    prefix_ selected_item_right选定项的右侧部分。
    prefix_ selected_item_subtitle选定项的底部部分。
    prefix_ selected_item_remove选定项的删除按钮。
    prefix_ 输入这是selectator的输入框。 如果是多个选择框或者单个选择框,则将它的与 options-visible 或者 options-hidden 一起使用,以不同的方式显示和样式化。
    prefix_ textlength这用于计算多个选择框的输入框的大小。
    prefix_ 选项选项列表持有者。它与 options-visible 或者 options-hidden 一起使用以显示或者隐藏选项。
    prefix_ group_header这是组标题选项。
    prefix_这是组选项持有者。
    prefix_ 选项这是一个结果选项。 它有一个名为 active的额外类,它告诉我们这个选项是否是活动的。
    prefix_ option_title结果选项的标题。
    prefix_ option_left结果选项的左部分。
    prefix_ option_right结果选项的右部分。
    prefix_ option_subtitle结果选项的底部部分。
    prefix_ 调光这是 dimmer

    DOM结构

    • 调光
    • 元素:包含 single | multiple 类和 options-visible | options-hidden 类。
      • textlength
      • selected_items
        • selected_item
          • selected_item_left
          • selected_item_right
          • selected_item_title
          • selected_item_subtitle
          • selected_item_remove
        • selected_item。
      • 输入
      • 选项
        • group_header
        • 群组组
          • 选项:包含 active 类。
            • option_left
            • option_right
            • option_title
            • option_subtitle
          • 选项。
        • 选项:包含 active 类。
          • option_left
          • option_right
          • option_title
          • option_subtitle
        • 选项。

    jQuery方法

    方法说明
    刷新这里方法用于刷新插件。 如果原始选择框中的数据是由它的他脚本更改的,那么这种情况是有用的。
    销毁这里方法用于从选择框移除插件的实例并将它的还原为原始状态。
    方法用法
    $('#selectBox').selectator('refresh');

    或者

    $('#selectBox').selectator('destroy');

    浏览器兼容性

    • IE 8 +
    • Chrome 2 +
    • Firefox 3.5 +
    • Safari 4 +
    • Opera 11 +

    国际化

    Selectator通过在插件选项中设置标签来支持语言。

    版权和许可证

    麻省理工学院许可证( MIT )

    版权所有( c ) 2013 Qodio

    若要在取得该软件副本时免费授予任何人,如有下列条件的软件,请免费授予该软件的副本,并与相关的文档文件("软件") 进行许可,包括不受限制的权利,包括以下条件:

    上述版权声明和本许可声明须包括在所有的副本或实质性部分的软件。

    软件是"是",没有任何保证,表示或者隐含,包括但不限于销售,适合特定用途和 NONINFRINGEMENT。 作者或者版权持有人在合同。侵权或者它的他与软件或者它的他用户交易的行为。


    BASE  rep  Select  repl  BOX  替换  
    相关文章