高端网站建设968,茶叶手机网站建设,免费做logo设计的网站,昆山做网站好的1.什么是easyUI#xff1f;
jQuery EasyUI是一组基于jQuery的UI插件集合体#xff0c;而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript#xff0c;也不需要对css样式有深入的了解#xff0c;开发者需要…1.什么是easyUI
jQuery EasyUI是一组基于jQuery的UI插件集合体而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript也不需要对css样式有深入的了解开发者需要了解的只有一些简单的html标签。
简单地说easyUI就是一种基于jQuery的用户界面插件集合。使用easyUI你不需要写很多代码了只需要通过编写一些简单的HTML标记就可以定义用户界面。而且easyUI是个完美支持HTML5网页的完整框架它可以节省您网页开发的时间和规模。
2.下载easyUI
官网地址 接着再点击Download按钮正式进入到easyUI的下载界面。 紧接着点击Download按钮即可下载easyUI了 3.easyUI的快速入门
3.1.创建项目并在项目中导入easyUI所需的样式和js
新建一个动态web工程例如easyui把解压后的jquery-easyui-1.8.8目录中的如下东东添加到项目中去 将以上这些目录和文件拷贝到项目之后就变成下面这个样子 3.2.以linkbutton按钮组件为例快速入门easyUI
3.2.1.在页面中导入easyUI所需的js和css样式文件
新建一个01-easyui.html页面。引入必要的js和css样式文件
!DOCTYPE html
htmlheadmeta charsetutf-8 /titleeasyUI的简单入门/title!-- 引入easyUI的css样式文件和js文件 --link relstylesheet typetext/css href../themes/default/easyui.csslink relstylesheet typetext/css href../themes/icon.cssscript typetext/javascript src../js/jquery.min.js/scriptscript typetext/javascript src../js/jquery.easyui.min.js/script/headbody/body
/html注意因为easyUI基于jQuery的所以在引入js文件的时候必须先引入query.min.js再引入jqery.easyui.min.js。
3.2.2.easyUI使用的两种方式
easyUI的使用主要有两种方式一种是在HTML标签中声明class来使用easyUI样式一种是编写js代码。
第一种方式在HTML标签中声明class来使用easyUI样式!DOCTYPE html
htmlheadmeta charsetutf-8 /titleeasyUI的简单入门/title!-- 引入easyUI的css样式文件和js文件 --link relstylesheet typetext/css href./js//themes/default/easyui.csslink relstylesheet typetext/css href./js/themes/icon.cssscript typetext/javascript src./js/jquery.min.js/scriptscript typetext/javascript src./js/jquery.easyui.min.js/script/headbody!-- easyUI的简单入门(方式一使用css的方式)--!-- iconCls(属性): 小图标样式 --a href# classeasyui-linkbutton data-optionsiconCls:icon-add超链接/a/body
/html可以看到超链接变成了一个还算好看的按钮而且按钮前面还有一个加号的图标这是由于将iconCls属性的值设置为了’icon-add’
当然了可以设置成其他的值比如’icon-search’、icon-remove’等。
!DOCTYPE html
htmlheadmeta charsetutf-8 /titleeasyUI的简单入门/title!-- 引入easyUI的css样式文件和js文件 --link relstylesheet typetext/css href./js//themes/default/easyui.csslink relstylesheet typetext/css href./js/themes/icon.cssscript typetext/javascript src./js/jquery.min.js/scriptscript typetext/javascript src./js/jquery.easyui.min.js/script/headbody!-- easyUI的简单入门(方式一使用css的方式)--!-- iconCls(属性): 小图标样式 --a href# classeasyui-linkbutton data-optionsiconCls:icon-add超链接/aa href# classeasyui-linkbutton data-optionsiconCls:icon-search超链接/aa href# classeasyui-linkbutton data-optionsiconCls:icon-remove超链接/a/body
/html第二种方式编写js代码的方式
首先在01-easyui.html页面中创建一个超链接并编写如下的一段js代码
!DOCTYPE html
htmlheadmeta charsetutf-8 /titleeasyUI的简单入门/title!-- 引入easyUI的css样式文件和js文件 --link relstylesheet typetext/css href./js//themes/default/easyui.csslink relstylesheet typetext/css href./js/themes/icon.cssscript typetext/javascript src./js/jquery.min.js/scriptscript typetext/javascript src./js/jquery.easyui.min.js/scriptscript typetext/javascript$(function () {$(#btn).linkbutton({iconCls: icon-search})})/script/headbody!-- easyUI的简单入门(方式一使用css的方式)--!-- iconCls(属性): 小图标样式 --a href# classeasyui-linkbutton data-optionsiconCls:icon-add超链接/aa href# classeasyui-linkbutton data-optionsiconCls:icon-search超链接/aa href# classeasyui-linkbutton data-optionsiconCls:icon-remove超链接/a!-- 方式二编写js代码的方式 --a href# idbtn超链接/a/body
/html
