Module: switch

一个改良的适用于移动端H5页面的复选框
Implements:
Source:
See:

Example

<link href='../res/default/style.css' rel='stylesheet' />
<div data-comp="Switch">
    <label>
        <input type='checkbox' name='' value='' 
            data-after_change_evt="onSwitchChange"
        />
        <i></i>
    </label>
</div>
<script>
    V.WIN.on( 'onSwitchChange', function( _evt, _checked, _src ){
        alert( 'onSwitchChange, ' + _checked );
    });

    requirejs( [ 'v.switch', function( Switch ){
        Switch.trigger( Switch.init );
    });

</script>

Requires

  • v
  • v#log
  • underscore

Events


div[data-comp=Switch] input:change

监听复选框的change事件
Properties:
Name Type Description
data-after_change_evt EventName 触发change事件后要抛出的事件
Source:
Example
<div data-comp="Switch" class="active">
    <label>
        <input type='checkbox' name='' value=''
        data-after_change_evt="onSwitchChange"
        />
        <i></i>
    </label>
</div>
<script>
    V.WIN.on( 'onSwitchChange', function( _evt, _checked, _src ){
        alert( 'onSwitchChange, ' + _checked );
    });

    requirejs( [ 'v.switch' ], function( Switch ){
        Switch.trigger( Switch.init );
    });
</script>

init

初始化复选框的选中状态
Parameters:
Name Type Description
_target selector 要初始化的复选框
_isWrapper boolean 声明 _target是否为容器, 如果是将初始化 _target里的所有筛选框, default: false
Source:
Example
Switch.trigger( Switch.init, [ $( 'div[data-comp=Switch]' ) ]  )
//Switch.trigger( Switch.init, [ 'body', true ]  )

updateStatus

更新复选框的选中状态
Parameters:
Name Type Description
_src selector 要更新的复选框
Source:
Example
Switch.trigger( Switch.updateStatus, [ $( 'div[data-comp=Switch]' ) ]  )