jquery-easyui简介和初步使用

转载 2013年12月03日 16:34:03

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

Lucene介绍及视频教程

介绍及视频教程
  • java_7star
  • java_7star
  • 2014年01月02日 12:50
  • 1474

[Videos]海明老师Linux版视频收集贴

[Videos]海明老师Linux版视频收集贴(6.14更新).    http://www.boobooke.com/bbs/viewthread.php?tid=4623Ubuntu 9 Linu...
  • benx0524
  • benx0524
  • 2009年07月20日 19:07
  • 766

Cardboard虚拟现实开发初步(二)

Google Cardboard 虚拟现实眼镜开发初步(二) Cardboard SDK for Unity的使用 上一篇文章作为系列的开篇,主要是讲了一些虚拟现实的技术和原理,本篇就会带领大家去...
  • sunmc1204953974
  • sunmc1204953974
  • 2015年08月02日 09:06
  • 9617

对于编码的初步认识

本人对编码的初步认识,经由本人总结如下:
  • kangvcar
  • kangvcar
  • 2016年10月10日 19:18
  • 418

自己坑自己的错误,mvc easyui 数据没能加载 后台方法没进

前面调试了半天,发现很奇怪,不进后台方法,进入了easyui tree的js方法里,报错误了。 类似像这种 被easyui 截获了报错了,而又没进后台,就考虑是过滤器的问题了。 自...
  • laokaizzz
  • laokaizzz
  • 2015年01月21日 16:20
  • 565

json 初步入门

自己根据需要总结的:
  • snn1410
  • snn1410
  • 2014年09月10日 14:44
  • 619

拓扑学初步

0. 基本概念 & 定义 同胚:在拓扑学中,两个流形,如果可以通过弯曲、延展、剪切(只要最终完全沿着当初剪开的缝隙再重新粘贴起来)等操作把其中一个变为另一个,则认为两者是同胚的。如:圆和正方形是同胚的...
  • lanchunhui
  • lanchunhui
  • 2016年08月25日 15:27
  • 873

IM语音聊天

IOS、安卓IM语音聊天开发初探部分心得——本地音频处理篇(下) 发表于 2013 年 5 月 28 日 由 水德星君 前文书咱们说到IOS下如何录制一个wav格式的音频,然而现在...
  • u012490953
  • u012490953
  • 2015年05月13日 17:48
  • 705

Redis 基本类型介绍与基础操作指令

记录 Redis 数据库基本数据类型与基础操作命令。
  • YQXLLWY
  • YQXLLWY
  • 2016年09月20日 21:57
  • 539

easyui换主题,并记录在cookie

昨天有群友发问,easyui换皮肤自己实现了,但是下次打开浏览器的时候,上次选中的皮肤又变回默认皮肤了,怎样让浏览器记住自己所选的皮肤。这里我给出我的解决方案。 注:引入JS的顺序jquery>...
  • lingjiuhun
  • lingjiuhun
  • 2012年08月02日 10:13
  • 1775
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery-easyui简介和初步使用
举报原因:
原因补充:

(最多只允许输入30个字)