分享
 
 
 

刚入门的easyui

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體: |||超大  

这两天看了下easyui的教学先说说自己的一些小小理解吧!

----在使用easyui中也遇到了一个问题 :

Uncaught TypeError:cannot call method ‘offset’ of undefined//为方法声明...

后来在百度上搜索相关问题经发现,这是easyui 的包被修改了导致一些样式除了问题报的错...

1. 引入easyui主要文件:

<script type="text/javascript" src="easyWord/jEasyUi/jquery-1.4.2.min.js"></script>

<script type="text/Javascript" src="easyword/jEasyUi/jquery.easyui.min.js"></script>

<script type="text/javascript" src="easyword/jEasyUi/locale/easyui-lang-zh_CN.js"></script>

<link href="easyword/jEasyUi/themes/default/easyui.CSS" rel="stylesheet" />

<link rel="stylesheet" type="text/css" href="easyword/jEasyUi/themes/icon.css" />

2.首先布局按照:north(北)、south(南)、east(东)、west(西)、center(中)

例:

<body class="easyui-layout">

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

<div data-options="region:'south',title:'下南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>

在写分页插件时 在手册好像没看见这个属性:layout:分页控件布局定义,布局选项可以包含一个或多个值

1.list(页面显示条数列表)、2.sop(页面按钮分割线) 、3.first(首页按钮)、4.PRev(上一页按钮)、

5. next(下一页按钮)、6.last(尾页按钮)、7.refresh(刷新按钮)、8.(手工输入当前页的输入框)、

9.links(页面数链接)

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

效果如下:

在使用上面layout:里面的 links改变样式

3.必须知道的data-options属性的用法(通过这个属性,我们可以对easyui组件的实例化可以完全写入到html中)例如:

结果如下:

4. easyui的组件属性 也可以写入标签里面去

<div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;"

iconCls="icon-save" closable="true"

collapsible="true" minimizable="true" maximizable=true> 等同于:

<div id="p" class="easyui-panel" title="My Panel" data-options="width:500px;height:150px;padding:10px;background:#fafafa;"

iconCls="icon-save" closable="true"

collapsible="true" minimizable="true" maximizable=true>

----上面是class写法,下面是JS写法 例如:

<div id="login">

<p>账号:<input class="easyui-numberbox" id="manager" type="text" name="name" value=" " /></p>

<p>密码:<input class="easyui-numberbox" id="managerpass" type="password" name="name" value=" " /></p>

</div>

先给div一个id(“login”)

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有