关闭

jquery-easyui简介和初步使用

518人阅读 评论(0) 收藏 举报
分类:

jquery-easyui简介和初步使用

分类: javascript、jquery 1685人阅读 评论(0) 收藏 举报

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:368727次
    • 积分:5644
    • 等级:
    • 排名:第4604名
    • 原创:42篇
    • 转载:1055篇
    • 译文:1篇
    • 评论:6条
    文章分类
    最新评论