jquery-easyui简介和初步使用

来源：互联网发布：idea 创建java项目编辑：程序博客网时间：2024/04/29 16:51

jquery-easyui简介和初步使用

分类： javascript、jquery 2012-04-15 17:55 1685人阅读评论(0)收藏举报

jquery插件stylesheetdivclassjqueryjson

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>

<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;">

content1

</div>

content2

</div>

content3

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