刚入门的easyui
2018-06-18 02:48:08来源:未知 阅读 ()
这两天看了下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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:03C#基础(2)
- Window中的shellcode编写框架(入门篇) 2020-03-31
- 蓝桥杯练习(入门一) 2020-03-23
- c语言该怎么入门?C语言入门教程(非常详细) 2020-02-17
- 习题2-6:排列 2019-12-30
- C++入门到理解阶段二基础篇(9)——C++结构体 2019-11-22
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