EasyuiAPI：基础

Posted 2020-06-28

一、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‘        
        });    
    }
});