easyUI API（version 1.5）

2022-12-03 22:04:32

不分先后，只做记录。

jquery+easyui培训文档下载地址：

链接: https://pan.baidu.com/s/1dFgFXk9 密码: jj5d

 1 easyui-draggable（拖动）

两种写法：

<div id="dd" class="easyui-draggable"

     data-options="handle:'#move',revert:'true',cursor:'crosshair',axis:'v'" style="width:100px;height:100px;">

    <div id="move" style="background:#7097cc;">ys_draggable

    </div>

</div>

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

<div id="title" style="background:#ccc;">title</div>

</div>

$('#dd').draggable({

handle:'#title'

});

Demo可参考：http://www.jeasyui.net/demo/521.html

 2 easyui-droppable(放置)
两种写法：

<div id="dd" class="easyui-droppable" data-options="accept:'#d1,#d3'" style="width:100px;height:100px;"></div>

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

$('#dd').droppable({

accept:'#d1,#d3'

});

Demo可参考：http://www.jeasyui.net/demo/523.html

 3 easyui-resizable (调整大小)

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

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

$('#rr').resizable({

maxWidth:800,

maxHeight:600

});

Demo可参考：http://www.jeasyui.net/demo/551.html

 4 easyui-pagination（分页）

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

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

$('#pp').pagination({

total:2000,

pageSize:10

});

Demo可参考：http://www.jeasyui.net/demo/377.html

 5 easyui-searchbox（搜索框）

<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>

<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>

$('#ss').searchbox({

searcher:function(value,name){

alert(value + "," + name)

},

menu:'#mm',

prompt:'请输入值'

});

Demo可参考：http://www.jeasyui.net/demo/552.html

 6 easyui-progressbar（进度条）

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

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

$('#p').progressbar({

value: 60

});

Demo可参考：http://www.jeasyui.net/demo/383.html

 7 easyui-tooltip（提示框）

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

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

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

Demo可参考：http://www.jeasyui.net/demo/571.html

 8 easyui-panel（面板）

<div id="p" class="easyui-panel" title="My Panel"

        style="width:500px;height:150px;padding:10px;background:#fafafa;"

        data-options="iconCls:'icon-save',closable:true,

                collapsible:true,minimizable:true,maximizable:true">

    <p>panel content.</p>

    <p>panel content.</p>

</div>

<div id="p" style="padding:10px;">

    <p>panel content.</p>

    <p>panel content.</p>

</div>    

$('#p').panel({

  width:500,

  height:150,

  title: 'My Panel',

  tools: [{

    iconCls:'icon-add',

    handler:function(){alert('new')}

  },{

    iconCls:'icon-save',

    handler:function(){alert('save')}

  }]

});

Demo可参考：http://www.jeasyui.net/demo/380.html

 9 easyui-tabs（选项卡）

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">

    <div title="Tab1" style="padding:20px;display:none;">

        tab1

    </div>

    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">

        tab2

    </div>

    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">

        tab3

    </div>

</div>

$('#tt').tabs({

    border:false,

    onSelect:function(title){

        alert(title+' is selected');

    }

});

Demo可参考：http://www.jeasyui.net/demo/396.html

10 easyui-accordion（分类）

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">

    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">

        <h3 style="color:#0099FF;">Accordion for jQuery</h3>

        <p>Accordion is a part of easyui framework for jQuery.

        It lets you define your accordion component on web page more easily.</p>

    </div>

    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">

        content2

    </div>

    <div title="Title3">

        content3

    </div>

</div>

$('#aa').accordion({

    animate:false

});

Demo可参考：http://www.jeasyui.net/demo/482.html

11 easyui-layout（布局）

<div id="cc" class="easyui-layout" style="width:600px;height:400px;">

    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>

    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>

    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>

    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>

    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>

</div>

<body class="easyui-layout">

    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>

    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>

    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>

    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>

    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>

</body>

<body class="easyui-layout">

    <div data-options="region:'north'" style="height:100px"></div>

    <div data-options="region:'center'">

        <div class="easyui-layout" data-options="fit:true">

            <div data-options="region:'west',collapsed:true" style="width:180px"></div>

            <div data-options="region:'center'"></div>

        </div>

    </div>

</body>

<body class="easyui-layout">

    <div data-options="region:'west',href:'west_content.php'" style="width:180px" ></div>

    <div data-options="region:'center',href:'center_content.php'" ></div>

</body>

Demo可参考：http://www.jeasyui.net/demo/529.html

12 easyui-menu（菜单）

<div id="mm" class="easyui-menu" style="width:120px;">

    <div>New</div>

    <div>

        <span>Open</span>

        <div style="width:150px;">

            <div><b>Word</b></div>

            <div>Excel</div>

            <div>PowerPoint</div>

        </div>

    </div>

    <div data-options="iconCls:'icon-save'">Save</div>

    <div class="menu-sep"></div>

    <div>Exit</div>

</div>

$('#mm').menu({

    onClick:function(item){

        //...

    }

});

$('#mm').menu('show', {

  left: 200,

  top: 100

});

Demo可参考：http://www.jeasyui.net/demo/537.html

13 easyui-linkbutton（按钮）

<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>

<a id="btn" href="#">easyui</a>

$('#btn').linkbutton({

    iconCls: 'icon-search'

});

Demo 可参考：http://www.jeasyui.net/demo/367.html

14 easyui-menubutton（菜单按钮）

15 easyui-splitbutton（分割按钮）

16 easyui-switchbutton（开关按钮）

17 easyui-validatebox（验证框）

18 easyui-textbox（文本框）

19 easyui-passwordbox（密码框）

20 easyui-combobox（下拉列表框）

21 easyui-combotree（树形下拉框）

22 easyui-combogrid（数据表格下拉框）

23 easyui-combotreegrid（数型表格下拉框）

24 easyui-numberbox（数值输入框）

25 easyui-datebox（日期输入框）

26 easyui-datetimebox（日期时间输入框）

27 easyui-datetimespinner（日期时间微调框）

28 easyui-calendar（日历）

29 easyui-numberspinner（数字微调）

30 easyui-slider（滑动条）

31 easyui-filebox（文件框）

32 easyui-window（窗口）

33 easyui-dialog（对话框窗口）

34 easyui-datagrid（数据表格）

35 easyui-datalist（数据列表）

36 easyui-propertygrid（属性表格）

37 easyui-tree（树）

38 easyui-treegrid（树形表格）

码农公寓

相关文章