你的位置:首页 > Java教程

[Java教程]初接触easyUI(一)


    jQuery Easy是一组基于jQuery的UI插件集合,EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。


 

    注:jQuery的特点

 

  • 基于jQuery用户界面插件的集合。
  • 为一些当前用于交互的js应用提供必要的功能。
  • 支持两种渲染方式:js方式(如:$("#p").panel({......}))以及html方式(如:)。
  • 可以通过data-options属性来支持HTML5。
  • 开发产品时可节省时间和资源。
  • 简单,但是非常强大。
  • 支持扩展,可根据自己的需求扩展控件。

    jQuery EasyUI官方网址为:http://www.jeasyui.com/,其中文帮助在:http://www.zi-han.net/case/easyui/。

    然后在下载jQuery包后,里面有这些文件夹

  • demo文件夹:主要放着一些示例的例子。
  • locale文件夹:放着语言相关的js文件,其中中文语言包为easyui-lang-zh_CN.js文件。
  • plugins文件夹:存放一些功能插件。(使用懒汉式加载必须保留,饿汉式加载可以删除)
  • src文件夹:各个插件的源文件,不是全部,其实有些功能不是开源的,是商业授权,因此没有源文件。(正式项目不需要引用此文件夹)
  • themes文件夹:存放主题,就是css文件和要用到的图标文件,里边提供5种风格。(easyui.css是其它所有css的合并后结果)

     注:搭建easyUI时,先新建一个html页面然后在根目录新建一个名为UI的文件夹并将jQuery EasyUI的包文件复制进去即可,但是必须先按如下的顺序引用(在js标签中加上charset="utf-8"可以防止页面乱码)

1   <link href="UI/themes/default/easyui.css" rel="stylesheet" />2   <link href="UI/themes/icon.css" rel="stylesheet" />3   <script src="UI/jquery-1.8.3.min.js"type="text/javascript" charset="utf-8"></script>4   <script src="UI/jquery.easyui.min.js"type="text/javascript" charset="utf-8"></script>5   <script src="UI/locale/easyui-lang-zh_CN.js"type="text/javascript" charset="utf-8"></script>