easyui-（二）

1.菜单，类似于桌面右键

<div id="box" class="easyui-menu">
<div>新建</div>
<dir>
打开
<div>
<div>word</div>
<div>Excel</div>
<div>Power</div>
</div>
</dir>
<dir>保存</dir>
<dir>退出</dir>
</div>

$(document).on('contextmenu',function(e){
e.preventDefault();
$('#box').menu('show',{
left:e.pagex,
top:e.pagey,
})
})

2.easyui-menubutton 就是一个下拉框，里面加div就行

3.*************************分页

<div id="content" class="easyui-panel" style="height: 200px;"></div>
<div id="box" style="border: 1px solid #ccc"></div>

$(function(){
$('#box').pagination({
total : 5,
pageSize: 1,
pageNumber:1,
pageList:[1,2],
onSelectPage:function(pageNumber,pageSize)
{
$('#content').panel('refresh','user.php?page'+pageNumber+'&pageSize'+pageSize);
}
})
})

_________________________表单了————————————————————————————————————————————————————————————————

4.搜索框，很实用

<script type="text/javascript">
function qq(name,value)
{
alert(name + '-' + value);
}
</script>

<div id='ss' class="easyui-searchbox" style="width: 300px;"
data-options="menu:'#box',prompt:'请输入关键字',searcher:qq"></div>
<div id="box">
<div data-options="iconCls:'icon-ok'">所有频道</div>
<div>体育频道</div>
</div>

JS玩法

$(function(){
$('#ss').searchbox({
menu: '#box',
searcher: function (name,value){
alert(name + '-' + value);
},
prompt: '请输入关键字',
value : '默认值',
})

var m = $('#ss').searchbox('menu');

})

5.感觉还是H5更好用

类似于输入框
$(function(){
$('#email').validatebox({
required:true,
validType:'email',
validType:'url',
validType:'length[2,10]'
})
})

6.自定义下拉框，单选

只用了单选案例
<div id="box">
<div id="food">
<div style="background: #eee;padding:5px;">请选择一个食物</div>
<div class="padding:5px;">
<input type="radio" name="food" value="01"><span>香蕉</span><br>
<input type="radio" name="food" value="02"><span>香蕉2</span><br>
<input type="radio" name="food" value="03"><span>香蕉3</span><br>
<input type="radio" name="food" value="04"><span>香蕉4</span><br>
<input type="radio" name="food" value="05"><span>香蕉5</span><br>
</div>
</div>
</div>

$(function(){
$('#box').combo({
required:true,
onHidePanel:function()
{
//效果就是下拉框选择完了，触发这个方法，以后试试二级联动可不可以这样玩
alert('隐藏触发');
}
});
//加入到下拉面板中
$('#food').appendTo($('#box').combo('panel'));
//获取对应的值
$('#food input').click(function(event) {
var v = $(this).val();
var s = $(this).next('span').text();
//把选中的值传到输入框，就可以提交了
$('#box').combo('setValue',v).combo('setText',s).combo('hidePanel');
});
})

7.滑动条，挺好玩

<input id="box">

$('#box').slider({
width:300,
height:300,
mode:'h',
rule:[0,'|',25,'|',50,'|',75,'|',100],
showTip:true,
})

8.表单验证提交######################*******************************************感觉也没有H5好，勉强用着

<form id="box" method="post" action="xx.php">
<p>帐号：<input type="text" class="easyui-validatebox" data-options="required:true" name="name"></p>
<p>邮件：<input type="text" class="easyui-validatebox" data-options="validType:'email',required:true" name="email"></p>
<input type="submit" name="">
</form>


<script type="text/javascript">
$(function(){
$('#box').form({
url:'xxx.php',
onSubmit: function(param){
//额外添加了一个字段提交，键名就是code，值3209，类似于隐藏域
param.code :'3209';
//前面的验证没通过不能提交
return $(this).form('validate');
},
success:function(date){
alert(data);
},
})
})
</script>

9.