很早就开始跟着老师学习jQuery课程,那时候是要求熟练使用jQuery中的easyUI插件中的控件,包括textbox、combobox、panel、checkbox、tree、datagrid等等

总之是关于基本表单控件、树和一些图表统计的应用,当然,还有一些后台数据库的连接使用。当时几乎都在学着怎么用,竟然没有去仔细深入思考关于jQuery,并且对在头部(head中)引入的一些诸如jquery-1.4.4.min.js 文件也没有太大感觉。果然,在自己需要用jQuery做前端的时候一顿茫然。

这两天终于又和最熟悉的陌生人--jQuery打上交道了。不说废话,赶紧开始。

1、jquery-1.4.4.min.js

这是jQuery库文件,本来jQuery就是JavaScript中的一个库(它有着快速、简洁的优点,是继prototype之後又一个优秀的Javascrīpt框架,使用户能更方便地处理一些DOM操作,并且为网站提供AJAX交互),而jquery-1.4.4.min.js是jQuery库的压缩版(min的含义所在),除去了一些无用占内存的空白、注释,优化了变量函数等等,使得该库更加适应环境。所谓1.4.4只是版本号,在此不加说明。

总而言之,这个文件的引用 (<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>) 是使用jQuery库的重要部分。值得注意的是这个文件的引用有时候要注意位置。(最好放在最开始引用,因为万一你的其他js文件是用jQuery写的,你就需要先引用jQuery才能使用不是。)

2、jquery.easyui.min.js

这是一组基于jQuery的UI插件集合(这个就是上文说到用jQuery写的js文件,所以顺序上先引用jquery-1.4.4.min.js文件,再用这个文件),也是压缩版,它的目标就是帮助我们更轻松的打造出功能丰富并且美观的UI界面。你不需要编写复杂的javascript,也不需要对css样式有深入的了解,只需要知道一些简单的html标签。比如我最开始提到的textbox、combobox、panel、checkbox、tree、datagrid等等

当然,要用jQuery写的easyUI插件还需要引用几个样式文件:icon.css(themes/icon.css)和 easyui.css(themes/default/easyui.css),这些样式文件其实就相当于皮肤或者说是一些支持easyUI的界面图。

类似样式文件,离不开的还有一些支持样式文件的图像需要,这个一般在images

3、easyui-lang-zh_CN.js

这是语言配置文件,有了这个文件,中文也可以使用并不出现乱码

4、以下是引用文件(记得要和自己文件放置路径相匹配)

<link rel="stylesheet" type="text/css" href="themes/icon.css" />
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css" /> <!--控件的样式-->
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <!--jQuery库文件的压缩版-->
<script type="text/javascript" src="js/jquery.easyui.min.js"></script> <!--easyUI-->

完成以上导入,就可以用jQuery+easyUI完成界面设计啦,有任何问题,欢迎讨论交流~~

用jQuery+easyUI遇到的几个插件与文件详解的更多相关文章

  1. Jquery EasyUI datagrid后台数据表格生成及分页详解

    由于项目原因,网站后台需要对用户信息进行各种操作,有时还需要进行批量操作,所以首先需要将用户信息展示出来,查了不少资料.发现Jquery EasyUI确实是一个不错的选择,功能强大,文档也比较全面,而 ...

  2. 【转】JQuery上传插件Uploadify使用详解及错误处理

    转自:http://www.jb51.net/article/43498.htm 关于JQuery上传插件Uploadify使用详解网上一大把,基本上内容都一样.我根据网上的步骤配置完成后,会报一些错 ...

  3. jQuery插件制作方法详解

        jQuery插件制作方法详解   jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加 上Jtip,并引入jtip.js及其样式即可以了. ...

  4. jQuery height()、innerHeight()、outerHeight()函数的区别详解

    参考来源:http://www.jb51.net/article/84897.htm 代码示例(可复制到编辑器直接打开): <!DOCTYPE html> <html lang=&q ...

  5. jQuery插件编写步骤详解

    如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...

  6. jQuery延迟加载插件(Lazy Load)详解

    最 新版本的Lazy Load并不能替代你的网页.即便你使用JavaScript移除了图片的src属性,有些现代的浏览器仍然会加载图片.现在你必须修改你的html代 码,使用占位图片作为img标签的s ...

  7. JQuery上传插件Uploadify使用详解

    本文转载http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不错 ...

  8. (转)JQuery上传插件Uploadify使用详解

    原文地址:http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不 ...

  9. jquery.dataTables插件使用例子详解

    DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格 效果图 代码 <!doctype html> & ...

随机推荐

  1. Hbase Basic Prerequisites

    Table 2. Java HBase Version   JDK 6      JDK 7       JDK 8 1.0 Not     Supported yes Running with JD ...

  2. linux网络编程笔记——UDP

    目前这部分代码会出现阻塞问题,暂时尚未解决 #include "udp.h" #include <stdio.h> #include <string.h> ...

  3. 搭建linux下teamspeak3多人语音服务器

    最近项目中新的需求,需要支持多人在线实时通话.就安装测试一下teamspeak.http://www.teamspeak.com/ 主页有服务器版本和客户端版本供下载安装.软硬件环境: melot@m ...

  4. LNMP最新源码安装脚本(定期更新)

    Linux+Nginx+MySQL+PHP+Pureftpd+User manager for PureFTPd,脚本中用到的软件包大多最新版本,修复了User manager for PureFTP ...

  5. work6

    1) 把程序编译通过, 跑起来. 把正确的 playPrev(GoMove) 的方法给实现了. 如果大家不会下围棋,那就需要大家实地或者上网练习一下围棋的死活,提子是怎么回事.这个应该一个小时就能搞定 ...

  6. 【转】构建maven web项目

    Maven Web应用 创建Web应用程序 要创建一个简单的java web应用程序,我们将使用Maven的原型 - web应用插件.因此,让我们打开命令控制台,进入到C: MVN目录并执行以下命令m ...

  7. My97DatePicker时间控件使用说明

    常规调用: <input id="date01" type="text" onClick="WdatePicker()"/> & ...

  8. UVa 10817 Headmaster's Headache (状压DP+记忆化搜索)

    题意:一共有s(s ≤ 8)门课程,有m个在职教师,n个求职教师.每个教师有各自的工资要求,还有他能教授的课程,可以是一门或者多门. 要求在职教师不能辞退,问如何录用应聘者,才能使得每门课只少有两个老 ...

  9. Chapter 8. Classes

    8.1. Class Declarations 8.1.1. Class Modifiers 8.1.1.1. abstract Classes 8.1.1.2. final Classes 8.1. ...

  10. jquery validation ajax 验证

    <link href="${base}/res/basic/css/jquery/validationEngine/validationEngine.jquery.css" ...