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 相关文章推荐
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
jQuery中Dom的基本操作小结
Jan 23 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
js实现简单的计算器功能
Jan 16 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
Angular value与ngValue区别详解
Nov 27 Javascript
基于javascript的无缝滚动动画1
Aug 07 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
Zend公司全球首推PHP认证
2006/10/09 PHP
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
extJs 下拉框联动实现代码
2010/04/09 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
Python greenlet实现原理和使用示例
2014/09/24 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
python实现井字棋小游戏
2020/03/04 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
构建高效的python requests长连接池详解
2020/05/02 Python
python三引号如何输入
2020/07/06 Python
python打开音乐文件的实例方法
2020/07/21 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
泰国网上购物:Shopee泰国
2018/09/14 全球购物
请解释接口的显式实现有什么意义
2012/05/26 面试题
信用社员工先进事迹材料
2014/02/04 职场文书
管理提升方案
2014/06/04 职场文书
平面设计师岗位职责
2014/09/18 职场文书
遗愿清单观后感
2015/06/09 职场文书
党员证明模板
2015/06/19 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers