jQuery EasyUI学习笔记_1.easyui简介和简单应用
来源:互联网 发布:android 关闭移动数据 编辑:程序博客网 时间:2024/05/16 08:41
一、jQuery EasyUI简介
jQuery EasyUI框架帮助你更简单快捷地构建你的网页。
easyui是一个基于jQuery的用户接口插件集合
easyui为构建现代化的,互动的,javascript应用提供了必要的功能
使用easyui,不需要编写太多的javascript代码,只需要使用HTML定义自己的用户接口
对HTML5完全支持,而且具备良好的可扩展性
easyui为构建你的产品节省了很多时间和资源
easyui是一个轻量级的UI组件,简单易用但功能强大
二、jQuery EasyUI的简单应用
要在项目中引入jQuery EasyUI,有两种引入方式:
第一种方式:引入总文件
<!--easyui.css:easyui总样式 icon.css:easyui使用的图标的样式jquery-1.7.2.min.js:jquery1.7.2版本的压缩文件jquery.easyui.min.js:easyui汇总的js压缩文件easyui-lang-zh_CN.js:本地化js注意:要在easyui.js文件引入之前将jquery.js引入,并且版本要对应,不然可能会出现兼容性问题--><link type="text/css" rel="stylesheet" href="easyui/themes/default/easyui.css"><link type="text/css" rel="stylesheet" href="easyui/themes/icon.css"><script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script><script type="text/javascript" src="easyui/jquery.easyui.min.js"></script><script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
如何使用:
通过js调用
<script type="text/javascript"> $(function(){ $('#dd').dialog({ title: 'My Dialog', width: 400, height: 200, closed: false, cache: false, modal: true }); });</script><div id="dd">Dialog Content.</div>
第二种方式:使用载入器载入文件
<!--jquery-1.7.2.min.js:jquery1.7.2版本的压缩文件easyloader.js:easyui的载入器,用于载入需要用到的easyui组件的相关文件--><script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script><script type="text/javascript" src="easyui/easyloader.js"></script><script type="text/javascript"> $(function(){//注意:这里的easyloader.load可以使用using代替 easyloader.load('dialog', function(){ $('#dd').dialog({ title: 'My Dialog', width: 400, height: 200, closed: false, cache: false, modal: true }); }) });</script><div id="dd">Dialog Content.</div>
以上两种方式都可以通过指定页面元素的class来使用相应的组件,代码如下:
<!--注意:这里的easyui是通过类选择器来找到该组件需要的文件并且分析其通过什么方式调用:如果是通过引入总文件的方式,那么直接使用parser渲染相应的组件;如果是通过载入器的方式,那么先加载该组件需要的文件,然后再渲染该组件--><div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;" data-options="iconCls:'icon-save',resizable:true,modal:true"> Dialog Content.</div>
- jQuery EasyUI学习笔记_1.easyui简介和简单应用
- jQuery EasyUI学习笔记_1.easyui简介和简单应用
- EasyUI学习笔记_1
- jQuery EasyUI 简单应用
- jquery easyUI 学习笔记一
- jquery easyui combotree 树实例简单应用
- jquery-easyui简介和初步使用
- jquery-easyui简介和初步使用
- jQuery EasyUI简介
- jQuery EasyUI简介
- 【easyui学习笔记】1.jQuery EasyUI 入门初窥
- jquery easyui datagrid简单使用学习
- jquery EasyUi学习--创建简单的table
- Jquery-easyUI的应用
- jquery-easyui简单使用
- jquery-easyui 使用笔记
- jQuery EasyUI学习
- jQuery EasyUI 学习资料
- Oracle 11G函数整理(一般比较函数)
- oracle的使用
- Java数组声明、创建、初始化
- 百度2014校园招聘 软件研发工程师 笔试题
- QQ那些厚黑又细腻的人性社交设计
- jQuery EasyUI学习笔记_1.easyui简介和简单应用
- codeforce Round201 div1 B. Lucky Common Subsequence KMP+DP
- 项目不能自动部署到用户tomcat问题
- 四款不可错过的 Android 开发工具
- stl---<string>的用法
- JavaScript实现一个最基本的图片无缝横向滚动效果
- ubuntu12.04 ssh服务的设置
- Robocode教程6——用eclipse来写你的机器人!
- ExtJS学习之道:ExtJs事件(自定义事件、on、eventManager)示例