1． 拖拉大小
<!DOCTYPE html> <html> <head> <title>easyui学习</title> <script type="text/javascript" src = jquery-easyui/jquery.min.js> </script> <script type="text/javascript" src = jquery-easyui/jquery.easyui.min.js> </script> <script type="text/javascript" src = jquery-easyui/locale/easyui-lang-zh_CN.js> </script> <script type="text/javascript" src ="index.js"></script> <!-- 自定义js --> <link rel="stylesheet" href="jquery-easyui/themes/default/easyui.css"> <link rel="stylesheet" href="jquery-easyui/themes/icon.css"> </head> <body> <div id="dd" data-options="maxWidth:600,maxHeight:600" style=" 100px;height: 100px;border:1px solid" ></div> </div> </body> </html>
$(function(){ $('#dd').resizable(); })
2． Tooltip 提示框
$(function(){ $("#box").tooltip({ content:"提示框" }) })
<body> <a href="" id="box">点击我</a> </div> </body>
3． Progressbar
$(function(){ $("#box").progressbar({ value:30, height:50, 400, text:'{value}元' }); })
4． Accordion
</body> <body> <div id='box' class="easyui-accordion" style=" 200px;"> <div title="ad1">ad1</div> <div title="ad2">ad2</div> <div title="ad2">ad2</div> </div> </body>
5． Layout
<body> <div id='box' style=" 400px"></div> <body id="box" class="easyui-layout"> <div data-options="region:'north' " style="height: 100px" title="上北" ></div> <div data-options="region:'south' " style="height: 100px" title="下南" ></div> <div data-options="region:'west' " style=" 100px" title="左西" ></div> <div data-options="region:'east' " style=" 100px" title="右东" ></div> <div data-options="region:'center' " title="中间" ></div> </body>
