刚入门的easyui
2018-06-18 04:53:19来源：未知 阅读 ()
这两天看了下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”）
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：C#中的文件操作
- logstash系列-入门整理 2020-06-10
- Java 入门教程 2020-06-09
- RocketMQ4.4 入门进阶+实战 2020-06-08
- 因为 MongoDB 没入门，我丢了一份实习工作 2020-06-07
- 呵呵，一个 bug 你改了两天？难吗？ 2020-06-06
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
