jQuery EasyUI学习笔记_1.easyui简介和简单应用
来源:互联网 发布:seo关键词优化通科 编辑:程序博客网 时间:2024/06/11 23:45
一、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>
转载地址:http://blog.csdn.net/cqdz_dj/article/details/12191509
0 0
- 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 学习资料
- c语言建立单链表及基于单链表的操作
- MySql 表设计 float类型 长度
- JNI
- Linux和windows下内存溢出以及修改tomcat的jvm内存
- 格式化成财务类型数字
- jQuery EasyUI学习笔记_1.easyui简介和简单应用
- 在触发器中访问链接服务器
- Hibernate主键生成策略类型的使用说明[hibernate generator strategy]
- Struts 2中的constant
- smali语法小结(看到新的再补充)
- 一个三流学校程序员的奋斗历程
- cuda程序的编译运行
- dblink每天将生产库数据备份到测试库(proc,jobs)
- 应届生面试全攻略