表单控件

3.1 下拉菜单（pui.select.js）

多选


<div class="select-group">
    <select name="selectAttachGroup" class="select" id="selectAttachGroupDisabled" disabled>
        <option value="0">全部</option>
        <option value="1">姓名</option>
        <option value="2">邮箱</option>
        <option value="3">角色</option>
    </select>
</div>
<div class="select-group">
    <select name="selectAttachGroup" class="select" id="selectAttachGroup" data-width="300px">
        <option value="0">全部</option>
        <option value="1">姓名</option>
        <option value="2">邮箱</option>
        <option value="3">角色</option>
    </select>
</div>
<div class="select-group">
    <select id="usageSelect" class="select vshide" name="usage" data-req="true" data-empty-msg="请选择您的用途" multiple="multiple" data-width="500px">
        <option value selected>请选择您的用途</option>
        <option value="校园招聘">校园招聘</option>
        <option value="社会招聘">社会招聘</option>
        <option value="内部竞聘">内部竞聘</option>
        <option value="盘点发展">盘点发展</option>
        <option value="高潜识别">高潜识别</option>
        <option value="自我认知">自我认知</option>
    </select>
</div>


// 单选
$('#selectAttachGroupDisabled').selectSmart({
    callback: function(i, t, v, ele){
        console.log(i)  // selected index
        console.log(t)  // selected txt
        console.log(v)  // selected val
    }
})

// 切换提示
$('#selectAttachGroup').selectSmart({
    isvalid: true,
    validCallback: function(i, t, v, o, ro, cb){
        ceng.comfirm('是否要 change？', {
            yes: function(obj, index){
                Pui.selectChange(i, t, v, o, ro, cb);
                ceng.close(index);
            }
        });
    },
    callback: function(i, t, v) {
        ceng.msger('SelectIndex：' + i + ' ，Txt：' + t + ' ，Value：' + v, 1);
    }
})

// 多选
$('#usageSelect').selectSmart({
    callback: function(i, t, v, ele){
        // console.log(i)  // selected index Array
        // console.log(t)  // selected txt Array
        // console.log(v)  // selected val Array
    }
})

3.2 输入框


<div class="input-group">
    <label>
        <input class="txt" type="text">
    </label>
</div>
<div class="input-group">
    <label>
        <span>前缀</span>
        <input class="txt" type="text">
    </label>
</div>
<div class="input-group">
    <label>
        <input class="txt" type="text">
        <span>后缀</span>
    </label>
</div>
<div class="input-group button inline">
    <label>
        <input class="txt" type="text">
        <span>
            <button class="icon icon-search" type="submit"></button>
        </span>
    </label>
</div>

3.3 切换（pui.switch.js）

样式一：
样式二：
外部切换：
禁用：
询问：

<input class="hide switch" type="hidden" id="switch2" value="0" />
<input class="hide switch notxt" type="hidden" id="switch22" value="0" />
<input class="btn bgc-red" type="button" id="switchanger" value="切换上面的状态">
<input class="hide switch" type="hidden" id="switchDisabled" value="1" disabled />
<input class="hide switch" type="hidden" id="switch3" value="0" />


$('.switch').switchSmart({
    enable: function() {
        ceng.msger('启用', 1);
    },
    disable: function() {
        ceng.msger('禁用', 0);
    }
});

$('#switchanger').on('click', function() {
    toggleSwitchState($('#switch2'));
});

$('#switchDisabled').switchSmart();

$('#switch3').switchSmart({
    isvalid: true,
    validCallback: function() {
        ceng.comfirm('最后问一次，是否切换', {
            btn: ['切换吧', '不换'],
            yes: function(obj, index) {
                toggleSwitchState($('#switch3'));
                ceng.close(index);
            }
        })
    }
});

3.4 单选框（pui.radio.js）

帝都
魔都
成都 

<div class="radio-group clearfix" id="demoRadio">
    <div class="radione inline">
        <input type="radio" name="radiobj" value="a" />
        <span>帝都</span>
    </div>
    <div class="radione inline">
        <input type="radio" name="radiobj" value="b" />
        <span>魔都</span>
    </div>
    <div class="radione inline">
        <input type="radio" name="radiobj" value="c" />
        <span>成都</span>
    </div>
</div>


$('#demoRadio input[type=radio]').radioSmart({
    callback: function(self, v){}
    // self 为当前radio
    // v 为选中的值
});

3.5 复选框（pui.checkbox.js）

惊天魔盗团
论文叙老点柳先开
青春梦工厂 

<div class="check-group clearfix" id="demoCheckbox">
    <div class="checkone inline">
        <input type="checkbox" name="chkboxbj" checked value="x" />
        <span>惊天魔盗团</span>
    </div>
    <div class="checkone inline">
        <input type="checkbox" name="chkboxbj" checked disabled value="y" />
        <span>论文叙老点柳先开</span>
    </div>
    <div class="checkone inline">
        <input type="checkbox" name="chkboxbj" disabled value="z" />
        <span>青春梦工厂</span>
    </div>
</div>


$('#demoCheckbox input[type=checkbox]').checkboxSmart({
    callback: function(self, bool) {},  // 点击后回调事件
    checkCallback: function(self, bool) {},   // 选中回调事件
    uncheckCallback: function(self, bool) {}  // 反选回调事件
});
// 取（checkbox组）值
Pui.getCheckVal()      // checkboxgroup : checkbox 同name组

// 设置值
Pui.setCheckVal = function(chkobj, bool)

3.6 按钮

普通按钮 图标按钮 

<h3 class="pui-subname c-gray ffm">3.6 按钮</h3>
<button class="btn bs btn-primary">小按钮</button>
<button class="btn bs btn-common">小按钮</button>
<a href="javascript:;" class="btn btn-primary"><span>普通按钮</span></a>
<a href="javascript:;" class="btn btn-secondary">
<i class="icon icon-addr"></i><span>图标按钮</span>
</a>
<input class="btn btn-red" type="button" value="Input按钮" />
<button class="btn btn-common">无背景按钮</button>
<button class="btn bb btn-red"><i class="icon icon-addr"></i>大按钮</button>
<button class="btn bb btn-common">大按钮</button>

3.7 按钮