jquery-easyui简介和初步使用

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


jquery-easyui-1.5.5 │ ├demo:easyui普通网页演示页面代码库(可以从中参考很多组件的用法,是个非常好用的demo库。) │ ├demo-mobile:easyui手机端网页演示页面代码库(可以从中参考很多组件的用法,是个非常好用的demo库。) │ ├docs:easyui中文API文档【PDF、EXECHM版】(该文档系本人原创翻译制作。) │ ├extension:easyui第三方插件库(里面会收录官方提供以及第三方提供的各类优秀插件,每个插件的用法最终都会体现到API文档当中。) │ ├locale:easyui国际化资源文件库(需要用到国际化的时候就需要在页面中引用该包路径下的文件。) │ ├plugins:easyui核心功能组件分解后的独立插件库(需要配合easyloader.js一起使用。) │ ├src:easyui部分非核心组件的源代码库(核心大组件的源代码并未公布,比如datagrid、combotree等。) │ ├themes:easyui的皮肤库(皮肤库中会收录所有网上能找得到的皮肤,所以大家不用再去自己乱搜了。) │ ├changelog.txt:easyui版本官方更新日志文件[英文版](该文件内容可以参考API当中的更新说明。) │ ├easyloader.jseasyui组件加载器(easyui提供了2种组件加载方式,这就是其中一种,当使用该方式的时候可以不必引入jquery.easyui.min.js文件,具体用法请参看api文档。) │ ├jquery.easyui.min.jseasyui的完整组件包文件(当使用了该文件的时候就可以不必引入easyloader.js文件,具体用法请参考官方demo或api文档。) │ ├jquery.min.jsjQuery框架库文件,该版本的jQuery库提供的是最新的1.11.1版,能够支持IE6、7、8。 │ ├licence_gpl.txt:GNU开源协议文档。 │ └readme.txt:官方的说明,主要告诉你你可以购买商业版来获得完整源代码以及官方的支持。
例行更新,不过本次有新组件加入,感觉这次的组件早就应该有了,居然到现在才加入进来,不管怎么说有总比没有好。这次还是以改进为主,改进项占了大多数。废话不多说具体内容大家看更新说明吧!另外由于经常收到chm格式文件无法用的反馈,其实不是无法用,只是要授权。虽然已经解释多遍,但是依然有人不知道,索性就取消chm格式的文档了,今后统一采用exe+pdf格式,由于目前尚无时间制作pdf格式的api文档,所以1.5版中只有exe的,pdf格式将在下一版中提供。 jQuery EasyUI 1.5版本更新内容: Bug(修复) combobox:修复在加载包含所选项数据的时候不会触发“onSelect”事件的BUG; datagrid:修复在字段设置为一个空值的时候导 致在某些情况下“updateRow”方法无法正常工作的BUG。 Improvement(改进) 一个label标签可以被关联到任意表单的字段上; combobox:改进在下拉项中“select”“unselect”的规则; combobox:添加“limitToList”属性来限制只能输入在列表项中的内容; combogrid:允许用户快速克隆组件; form:添加“dirty”属性,允许用户只发送变更的字段内容; form:添加“resetDirty”方法; datagrid:允许用户在没有数据的时候显示一条消息(比如:无记录); textbox:添加“label”、“labelWidth”、“labelPosition”“labelAlign”属性; spinner:添加“spinAlign”属性; calendar:允许用户在日历组件上显示周数(今年的第几周); window:添加“constrain”属性。 New Plugin(新组件) passwordbox:该插件允许用户在具有更好交互功能的输入框中输入密码; combotreegrid:该插件结合了comboboxtreegrid组件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值