jquery-easyui简单使用
来源:互联网 发布:linux命令 cp r 编辑:程序博客网 时间:2024/04/30 20:31
query-easyui是常用的jquery插件之一,利用它可以编写少量的js代码就能运行出比较华丽的js效果。
jquery-easyui是对强大的jquery一个简单封装,封装了一些特效和方法,我们直接调用这些方法并配置相应参数即可。
jquery-easyui主要用于界面的显示和特效几句简单的js代码既可以显示出比较简洁好看的特效。这里我们使用的是jquery-easyui-1.2.5。
使用jquery-easyui-1.2.5的准备:
jquery-easyui-1.2.5的使用必须引入的文件:
<linkrel="stylesheet" type="text/css"href="./css/easyui.css">
<scripttype="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<scripttype="text/javascript" src="./js/jquery.easyui.min.js"></script>
引入js文件时注意顺序,顺序不对的话则没有效果。
顺序如下:显示基本jquery.js,然后是插件js
<scripttype="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<scripttype="text/javascript" src="js/插件.js"></script>
jquery-easyui-1.2.5所需js文件下载地址:
http://download.csdn.net/detail/imust_can/4228032
简单特效之一:Accordion 手风琴 效果
html代码:
<html>
<head> <title>jquery-easyui手风琴</title>
<link rel="stylesheet"type="text/css" href="./css/easyui.css">
<scripttype="text/javascript" src="./js/jquery-1.7.1.min.js">
</script>
<scripttype="text/javascript" src="./js/jquery.easyui.min.js">
</script>
</head>
<body>
<div id="aa"class="easyui-accordion"
style="width: 700px; height:300px;">
<div title="Title1"style="padding: 10px;">
content1
</div>
<div title="Title2"style="padding: 10px;">
content2
</div>
<div title="Title3"style="padding: 10px;">
content3
</div>
</div>
</body>
</html>
这样一个简单的手风琴效果便完成了。div的class="easyui-accordion"。jquery-easyui便把这个div渲染成了手风琴效果。如果去掉div的class属性那该怎么写呢?在<head></head>标签之间加上一段js代码即可。
<scripttype="text/javascript">
$('#aa').accordion({
width:300,
height:300
});
</script>
小括号里面套大括号,大括号里面配置的是手风琴效果的参数(类似json数据格式)。
对于属性、方法和事件请参看jquery-easyui-1.2.5帮助手册。
我在网上找了很多手册但是都不太全面没有一个比较完整的,但是有些还是相当不错的毕竟翻译的笔者付出了自己的心血,下面我觉得还行的文档分享给大家:
jquery-easyui-1.2.5帮助中文手册下载地址:
http://download.csdn.net/detail/imust_can/4228101
参考:http://blog.csdn.net/imust_can/article/details/7463308
- jquery-easyui简单使用
- Jquery easyui switchbutton简单使用
- jQuery easyui combobox的使用 简单实例
- 【jQuery EasyUI】初识到简单的使用
- Jquery EasyUI环境搭建以及简单使用
- JQuery easyui datagrid简单使用(一)
- jquery easyui datagrid简单使用学习
- jQuery EasyUI 简单应用
- jQuery EasyUI使用教程之创建一个简单的菜单
- jQuery EasyUI使用教程之创建简单窗口
- jquery-easyui的使用
- jQuery easyui datebox 使用
- Jquery EasyUI 使用范例
- jQuery.easyui Dialog使用
- jquery easyui 使用示例
- jquery easyui使用心得
- jquery-easyui 使用笔记
- jquery easyui的使用
- HDU1160 FatMouse's Speed LIS变种+路径
- 定时关机的小软件
- zoj 3612 (multiset)
- Oracle BBED模拟坏块&验证坏块
- Redis 缓存 + Spring 的集成示例
- jquery-easyui简单使用
- 安卓开发学习笔记(一)
- java nio多线程引起的full gc问题
- leetcode happy number
- 并查集的路径压缩
- 匿名类,try-catch语句
- iOS--错误集锦--申请公司开发者账号遇到的相关问题
- ubuntu和windows间互传文件
- margin-top越界以及所有子元素浮动后父元素高度为0且影响后续元素的问题。