EasyuiAPI：基础

一、EasyLoader（简单加载）

locale属性：值类型是string

locales属性：值类型是object

二、Draggable（拖动）

1.通过标签创建：

<div id="drag" class="easyui-draggable" data-options="handle:‘#getDrag‘"style="width:100px;height:100px;">
    <div id="getDrag"style="background:#ccc;">title</div>
</div>

2.通过JS调用：

　　html代码：

<div id="drag" style="width:100px;height:100px;">
    <div id="getDrag" style="background:#ccc;">title</div>
</div> 

　　JS代码：

$(‘#drag‘).draggable({
    handle:‘#getDrag‘
}); 

三、Droppable（放置）

1.通过标签创建：

<div id="drop" class="easyui-droppable" data-options="accept:‘#drop1,#drop2‘" style="width:100px;height:100px;"></div> 

2.通过JS调用

　　html代码：

<div id="drop" style="width:100px;height:100px;"></div> 

　　JS代码：　

$(‘#drop‘).droppable({
    accept:‘#drop1,#drop2‘
});

四、Resizable（调整大小）

1.通过标签创建：

<div id="resize" class="easyui-resizable" data-options="maxWidth:800,maxHeight:600" style="width:100px;height:100px;border:1px solid #ccc;"></div> 

2.通过JS调用：

　　html代码：

<div id="resize" style="width:100px;height:100px;border:1px solid #ccc;"></div> 

　　JS代码：

$(‘#resize‘).resizable({
    maxWidth:800,
    maxHeight:600
});

五、Pagination（分页）

1.通过标签创建：

<div id="pagination" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div> 

2.通过JS调用

　　html代码：

<div id="pagination" style="background:#efefef;border:1px solid #ccc;"></div> 

　　JS代码：

$("#pagination").pagination({
    total:2000,
    pageSize:10
});

六、SearchBox（搜索框）

1.通过标签创建：

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

<input id="ss" class="easyui-searchbox" style="width:300px"
data-options="searcher:qq,prompt:‘Please Input Value‘,menu:‘#mm‘"></input> 

<div id="mm" style="width:120px">
    <div data-options="name:‘all‘,iconCls:‘icon-ok‘">All News</div>
    <div data-options="name:‘sports‘">Sports News</div>
</div> 

2.通过JS调用：

　　html代码：

<input id="ss"></input>
    <div id="mm" style="width:120px">
    <div data-options="name:‘all‘,iconCls:‘icon-ok‘">All News</div>
    <div data-options="name:‘sports‘">Sports News</div>
</div> 

　　JS代码：

$(‘#ss‘).searchbox({
    searcher:function(value,name){
        alert(value + "," + name)
    },
    menu:‘#mm‘,
    prompt:‘请输入值‘
}); 

七、ProgressBar（进度条）

1.通过标签创建：

<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div> 

2.通过JS调用：

　　html代码：

<div id="p" style="width:400px;"></div> 

　　JS代码：

$(‘#p‘).progressbar({
    value: 60
});

获取当前值和设置一个新的值到进度条控件：

var value = $(‘#p‘).progressbar(‘getValue‘);
if (value < 100){
    value += Math.floor(Math.random() * 10);
    $(‘#p‘).progressbar(‘setValue‘, value);
}

八、Tooltip（提示框）

1.通过标签创建：

<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>

2.通过JS调用：

　　html代码：

<a id="dd" href="javascript:void(0)">Click here</a>

　　JS代码：

$(‘#dd‘).tooltip({
    position: ‘right‘,
    content: ‘<span style="color:#fff">This is the tooltip message.</span>‘,
    onShow: function(){
        $(this).tooltip(‘tip‘).css({
            backgroundColor: ‘#666‘,
            borderColor: ‘#666‘
        });
    }
});