jquery easyui使用心得


Posted in Javascript onJuly 07, 2014

第一步下载jquery easyui 

下载地址:https://3water.com/codes/70218.html

第二步创建Java web项目

第三步导入相关的文件。。目录结构如下

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> 

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

jquery easyui使用心得

下载个jquery-easyui-1.3.2使用,把他导入到myeclipse10里,jquery-1.7.2.min.js报错。

解决办法:

1、选中报错的jquery文件“jquery-1.7.2.min.js”。
2、右键选择 MyEclipse-->Exclude From Validation 。
3、再右键选择 MyEclipse-->Run Validation 即可。

ui1的源码:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <base href="<%=basePath%>" rel="external nofollow" >
  
  <title>jquery easyui test 1</title>
  
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">  
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css" rel="external nofollow" >
-->
  <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
  <!-- <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > -->
<!-- <link rel="stylesheet" type="text/css" href="easyui/demo.css" rel="external nofollow" > -->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
 </head>
 
 <body>
  <h2>Basic Panel</h2>
<p>The panel is a container for other components or elements.</p>
<div style="margin:20px 0 10px 0;">
<a href="#" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">Open</a>
<a href="#" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" onclick="javascript:$('#p').panel('close')">Close</a>
</div>
<div id="p" class="easyui-panel" title="Basic Panel" style="width:700px;height:200px;padding:10px;">
<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
<ul>
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
<li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
<li>complete framework for HTML5 web page.</li>
<li>easyui save your time and scales while developing your products.</li>
<li>easyui is very easy but powerful.</li>
</ul>
</div>

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"  
    title="My Panel" iconCls="icon-save" collapsible="true">  
  The panel content  
</div> 
 </body>
</html>

效果图:

jquery easyui使用心得

Javascript 相关文章推荐
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
让网站自动生成章节目录索引的多个js代码
Jan 07 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
js操作二进制数据方法
Mar 03 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 Javascript
比较node.js和Deno
Apr 27 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 #Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 #Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 #Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 #Javascript
我的Node.js学习之路(一)
Jul 06 #Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 #Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 #Javascript
You might like
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
js 函数性能比较方法
2020/08/24 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
Python3基础之list列表实例解析
2014/08/13 Python
Python字符串替换实例分析
2015/05/11 Python
学习python类方法与对象方法
2016/03/15 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
python3读取excel文件只提取某些行某些列的值方法
2018/07/10 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
最新党员的自我评价分享
2013/11/04 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
售房协议书范本2014
2014/10/23 职场文书
Python基础之进程详解
2021/05/21 Python
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记