123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Basic EasyLoader - jQuery EasyUI Demo</title>
- <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
- <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
- <link rel="stylesheet" type="text/css" href="../demo.css">
- <script type="text/javascript" src="../../jquery.min.js"></script>
- <script type="text/javascript" src="../../easyloader.js"></script>
- </head>
- <body>
- <h2>Basic EasyLoader</h2>
- <div class="demo-info">
- <div class="demo-tip icon-tip"></div>
- <div>Click the buttons below to load components dynamically.</div>
- </div>
- <div style="margin:10px 0;">
- <a href="#" class="easyui-linkbutton" onclick="load1()">Load Calendar</a>
- <a href="#" class="easyui-linkbutton" onclick="load2()">Load Dialog</a>
- <a href="#" class="easyui-linkbutton" onclick="load3()">Load DataGrid</a>
- </div>
- <div id="cc"></div>
- <div id="dd"></div>
- <table id="tt"></table>
- <script type="text/javascript" src="../../easyloader.js"></script>
- <script>
- function load1(){
- using('calendar', function(){
- $('#cc').calendar({
- width:180,
- height:180
- });
- });
- }
- function load2(){
- using(['dialog','messager'], function(){
- $('#dd').dialog({
- title:'Dialog',
- width:300,
- height:200
- });
- $.messager.show({
- title:'info',
- msg:'dialog created'
- });
- });
- }
- function load3(){
- using('datagrid', function(){
- $('#tt').datagrid({
- title:'DataGrid',
- width:300,
- height:200,
- fitColumns:true,
- columns:[[
- {field:'productid',title:'Product ID',width:100},
- {field:'productname',title:'Product Name',width:200}
- ]],
- data: [
- {"productid":"FI-SW-01","productname":"Koi"},
- {"productid":"K9-DL-01","productname":"Dalmation"},
- {"productid":"RP-SN-01","productname":"Rattlesnake"},
- {"productid":"RP-LI-02","productname":"Iguana"},
- {"productid":"FL-DSH-01","productname":"Manx"},
- {"productid":"FL-DLH-02","productname":"Persian"},
- {"productid":"AV-CB-01","productname":"Amazon Parrot"}
- ]
- });
- });
- }
- </script>
- </body>
- </html>
|