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

jquery-easyui简介和初步使用

jquery-easyui是常用的jquery插件之一,利用它可以编写少量的js代码就能运行出比较华丽的js效果。 jquery-easyui是对强大的jquery一个简单封装,封装了一些特效和方法...

使用Jquery+EasyUI框架开发项目+下载+帮助--EasyUI的简介

最近几天,接手一个SL的项目 前台开发,很多人喜欢用JQuery,但是在做后台管理系统,特别是企业管理系统,例如WEB进销存系统等,很多人都会选择ExtJS,因为ExtJS提供了非常多的UI界面,并且...

jQuery_easyUI简介

jQuery中easyUI的简单介绍。

基于MVC和jQuery EasyUI的开源架构--架构简介

在一个好的架构下编程,不仅对于开发人员是一件赏心悦目的事情,更重要的是软件能够表现出一个健康的姿态;而架构设计的不合理,不仅对于开发人员是一件受苦受难的事情,软件本身的质量更是受到严重威胁。     ...

jQuery EasyUI学习笔记_1.easyui简介和简单应用

一、jQuery EasyUI简介         jQuery EasyUI框架帮助你更简单快捷地构建你的网页。         easyui是一个基于jQuery的用户接口插件集合 ...

jQuery EasyUI学习笔记_1.easyui简介和简单应用

一、jQuery EasyUI简介         jQuery EasyUI框架帮助你更简单快捷地构建你的网页。         easyui是一个基于jQuery的用户接口插件集合       ...
  • cqdzdj
  • cqdzdj
  • 2013年09月30日 12:45
  • 1384

Easyui datagrid detailview使用简介

、easyui 的 detailview又叫subgrid其实也就类似于分组表格的意思,先见效果图 二、下面说下使用方法 1.页面引入样式 2.引入脚本 ...
  • sdmxdzb
  • sdmxdzb
  • 2015年04月03日 16:05
  • 646

easyui combobox组合框使用简介(一)

不足的地方多多建议

【项目实战】---Easyui datagrid detailview使用简介

前言: 之前对于esayUI的了解是仅仅是停留在对datagrid的简单应用上,这次有机会了解和学习数据网格详细视图即DataGrid DetailView,还是很有意思的。所谓的数据网格详细视图可以...

使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享

在开始讲解之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery-easyui简介和初步使用
举报原因:
原因补充:

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