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'        
        });    
    }
});    

 

posted @ 2016-03-23 20:33  -cyber  阅读(343)  评论(0编辑  收藏  举报