网站建设及推广优化,百度h5发布,html网站模仿,HTML做网站的书籍这里只是初步了解 文中括号内容是复习时提醒自己的 1.下载EasyUi #xff08;放在了c/professionalapp/easyUi里#xff0c;里面有个EasyUi#xff0c;是课程中用到的#xff0c;直接复制就行#xff09; 把所需easyUi资源复制粘贴到新建的web工程下的WEB-INF目录下
lay…这里只是初步了解 文中括号内容是复习时提醒自己的 1.下载EasyUi 放在了c/professionalapp/easyUi里里面有个EasyUi是课程中用到的直接复制就行 把所需easyUi资源复制粘贴到新建的web工程下的WEB-INF目录下
layout控件
webRoot下新建一个jsp页面layout.jsp 1.在head里进行引入 引入时要注意顺序
link hrefEasyUI/themes/default/easyui.css relstylesheettypetext/css /
link hrefEasyUI/themes/icon.css relstylesheet typetext/css /
link hrefEasyUI/demo.css relstylesheet typetext/css /
script srcEasyUI/jquery.min.js typetext/javascript/script
script srcEasyUI/jquery.easyui.min.js typetext/javascript/script
script srcEasyUI/easyui-lang-zh_CN.js typetext/javascript/scriptbody里写
div classeasyui-layout stylewidth: 700px; height: 350px;div data-optionsregion:north styleheight: 50px这是北区north/divdiv data-optionsregion:south,split:true styleheight: 50px;这是南区south/divdiv data-optionsregion:east,split:true titleEaststylewidth: 100px;这是东区east/divdiv data-optionsregion:west,split:true titleWeststylewidth: 100px;这是西区west/divdivdata-optionsregion:center,title:Main Title,iconCls:icon-ok这是中区center/div/div运行一下 其中组件可以改变大小隐藏可以运行下再看看然后对比使用
Tabs空间
使用Tabs控件可以实现选项卡布局一般用于中部选项卡 引入文件部分不变
body
div classeasyui-layout stylewidth: 700px; height: 350px;div classeasyui-tabs stylewidth: 700px; height: 250pxdiv title选项卡1 stylepadding: 10px页面1/divdiv title选项卡2 stylepadding: 10px页面2/divdiv title选项卡3 data-optionsiconCls:icon-help,closable:truestylepadding: 10px页面3/div/div
/bodyTree控件
body !-- 定义ul --ul idtt/ulscript typetext/javascript// 为Tree控件指定数据源$(#tt).tree({url : tree_data.json});/script
/body在同一目录下放入url的tree_data.json文件内容如下
[{id: 1,text: 订餐系统管理后台,fid: 0,children: [{id: 2,text: 餐品管理,fid: 0,children: [{id: 3,text: 餐品列表,fid: 0},{id: 4,text: 餐品类型列表,fid: 0}]}, {id: 12,text: 退出系统,fid: 0}]}
]运行结果 其实也就那样吧之前学过bootstrap那个会更好看一点但另一方面这个有js效果bootstrap当时也只是初步学习可能也有这样的效果但我没注意。 这个真用的话还是要看看源码毕竟这ui功能虽有也很简单但丑了点。 目前学这个是因为后面第一个实例项目会用到还是要初步过一遍的 还有一点他的数据源时json文件这个之前做项目的时候没有用过他之后应该会把数据库拿出来的东西变成json格式文件然后作为前端ui的数据源这个操作到时候多留心
DataGrid table idnewsinfoDg classeasyui-datagrid/tablescript typetext/javascript// 自执行函数$(function() {$(#newsinfoDg).datagrid({fit : true,fitColumn : true,rownumbers : true,singleSelect : false,url : datagrid_data.txt,columns : [ [ {title : ,field : productid,align : center,checkbox : true}, {field : unitcost,title : unitcost,width : 50}, {field : status,title : status,width : 60}, {field : listprice,title : listprice,width : 50}, {field : attr1,title : attr1,width : 200}, {field : itemid,title : itemid,width : 100} ] ]});});/script[{productid:FI-SW-01,unitcost:10.00,status:P,listprice:36.50,attr1:Large,itemid:EST-1},{productid:K9-DL-01,unitcost:12.00,status:P,listprice:18.50,attr1:Spotted Adult Female,itemid:EST-10},{productid:RP-SN-01,unitcost:12.00,status:P,listprice:28.50,attr1:Venomless,itemid:EST-11},{productid:RP-SN-01,unitcost:12.00,status:P,listprice:26.50,attr1:Rattleless,itemid:EST-12},{productid:RP-LI-02,unitcost:12.00,status:P,listprice:35.50,attr1:Green Adult,itemid:EST-13},{productid:FL-DSH-01,unitcost:12.00,status:P,listprice:158.50,attr1:Tailless,itemid:EST-14},{productid:FL-DSH-01,unitcost:12.00,status:P,listprice:83.50,attr1:With tail,itemid:EST-15},{productid:FL-DLH-02,unitcost:12.00,status:P,listprice:63.50,attr1:Adult Female,itemid:EST-16},{productid:FL-DLH-02,unitcost:12.00,status:P,listprice:89.50,attr1:Adult Male,itemid:EST-17},{productid:AV-CB-01,unitcost:92.00,status:P,listprice:63.50,attr1:Adult Male,itemid:EST-18}](复习的时候自己找对应规律 之后做项目会用到一点到时候再深入了解下
