SMDropDownList下拉组件

来源：http://itssh.cn/post/948.html

SMDropDownList

在移动端手持设备中使用原生select下拉控件效果并不尽人意，SMDropDownList下拉弹框(支持多选/单选)，替换移动端下拉控件，依赖Jquery，有问题请发邮件：[email protected]

效果

image.png

实例化组件

//模拟数据
var data = [
    {name:'下拉选项一',id:'00000010110302063'},
    {name:'下拉选项二',id:'00000010110302064'},
    {name:'下拉选项三',id:'00000010110302065'},
    {name:'下拉选项四',id:'00000010110302066'},
    {name:'下拉选项五',id:'00000010110302067'}
];
//参数配置    
var config = {
      //可配置参数：标题
      title: '下拉选择框',
      //必须参数：结果集
      result: data,
      //必须参数：模板
      itemTpl: [
        '
',
        '
${id}${name}
',
        '
',
      ],
      //是否显示标题
      //isShowTitle: false,
      //可配置参数：1.false,随内容撑出高度，2.num：固定高度，超出滚动显示,默认[220]
      //fixedHeight: false,
      //可配参数：选择完成后是否自动关闭,默认[true]
      //autoClose: false,
      //可配置参数：每行是否显示右边箭头，默认[false]
      //rightArrow: false,
      //可配置参数：是否多选[默认单选]
      checkbox: true,
      //单击item事件
      onClick: itemClick
};
//实例化下拉组件
var smDropDownList = $.initSMDropDownList(config);
}); 

显示下拉组件

 //1.参数配置中传入data数据，直接显示
 smDropDownList.show();
 //2.显示时传入data数据
 smDropDownList.show(data);

监听事件

  function itemClick(data){
      //
      console.log(data);
  }

来源：http://itssh.cn/post/948.html