API Docs for: 0.2
Show:

window.Bizs.MultiSelect Class

模拟多选下拉框 框的click将列表拉出来。 close和document的click将面板关闭,返回数据,并把数据铺到指定的面板里

JC Project Site | API docs | demo link

页面只要引用本脚本, 默认会自动处理 div class="js_bizMultiSelect"

可用的 HTML attribute

defaultLabel = string
声明下拉框默认显示的文字信息
binddatabox = string(selector)
声明选中数据,关闭下拉面板后,数据的回填区域
如果此属性为空,则不会在其他区域展示选中的数据
ajaxurl = string
声明ajax加载数据的url
数据格式
{errorno: 0, data: [ { "id": "id value", "label": "label value", "isChecked": "is checked" }, ... ], errormsg: ""}
dataFilter = callback
如果 数据接口获取的数据不是默认格式, 可以使用这个属性定义一个数据过滤函数, 把数据转换为合适的格式
function cacDataFilter( _json ){
if( _json.data && _json.data.length ){
   _json = _json.data;
}
$.each( _json, function( _ix, _item ){
   _item.length &&
       ( _json[ _ix ] = { 'id': _item[0], 'label': _item[1], 'isChecked': _item[2] } )
       ;
});
return _json;
}
dataname=string
声明checkbox的name属性, 适用于ajax接口的数据

Constructor

window.Bizs.MultiSelect

(
  • _selector
)

Parameters:

Example:

<div class="test">
   <div class="SELECTBOX js_bizMultiSelect" databindbox="(.test .js_box">
      <i class="SELECTIcon"></i>
      <span class="SELECTLabel">共选中<b class="red">2</b>条数据</span>                                         
      <div class="SELECTListBox" style="z-index: 50008; display: none;">
           <ul>
               <li class="SELECTIgnore">
                  <label>
                      <input type="checkbox" value="" name="" checktype="all" checkfor="///input[type=checkbox]">
                      全选
                  </label>
               </li>
               <li>
                  <label>
                      <input type="checkbox" value="1" name="" data-text="北京天地在线广告有限公司">
                      北京天地在线广告有限公司
                  </label>
               </li>
               <li>
                  <label>
                      <input type="checkbox" value="2" name="" data-text="河南天地在线广告有限公司">
                      河南天地在线广告有限公司
                  </label>
               </li>
               <li>
                  <label>
                      <input type="checkbox" value="3" name="" data-text="河北天地在线广告有限公司">
                      河北天地在线广告有限公司
                  </label>
               </li>
          </ul>
          <div class="SELECTClose"><a href="javascript:;" class="SELECTCloseBtn">关闭</a></div>
      </div>
   </div>
   <div class="js_box"><ul><li>北京天地在线广告有限公司</li> <li>河南天地在线广告有限公司</li></ul></div>
 </div>

Methods

_beforeInit

() private

初始化之前调用的方法

_init

(
  • _selector
)
private

内部初始化方法

Parameters:

  • _selector Selector

_inited

() private

内部初始化完毕时, 调用的方法

_initHanlderEvent

() private

内部事件初始化方法

dataFilter

(
  • _json
)
Json static

定义全局数据过滤函数

Parameters:

  • _json Json

Returns:

Json:

init

(
  • _selector
)
Array of MultiSelectInstance static

初始化可识别的 MultiSelect 实例

Parameters:

  • _selector Selector

Returns:

Array of MultiSelectInstance:

notification

(
  • _evtName
  • _args
)

通知选择器有新事件
JC 组件以后不会在 HTML 属性里放回调, 改为触发 selector 的事件

Parameters:

notificationHandler

(
  • _evtName
  • _args
)

通知选择器有新事件, 有返回结果
JC 组件以后不会在 HTML 属性里放回调, 改为触发 selector 的事件

Parameters:

Returns:

:

on

(
  • _evtName
  • _cb
)

使用 jquery on 绑定事件

Parameters:

Returns:

BaseMVCInstance

selector

()

获取 显示 BaseMVC 的触发源选择器, 比如 a 标签

Returns:

selector

trigger

(
  • _evtName
  • _args
)

使用 jquery trigger 触发绑定事件

Parameters:

Returns:

BaseMVCInstance

triggerHandler

(
  • _evtName
  • _args
)

使用 jquery triggerHandler 触发绑定事件

Parameters:

Returns:

: