jquery-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