脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery easyui

jquery easyui使用心得

 更新时间：2014年07月07日 08:49:36   投稿：hebedich  
jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。

第一步下载jquery easyui 

下载地址：https://www.jb51.net/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-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的核心函数和事件处理

    详解jQuery的核心函数和事件处理

    这篇文章主要为大家介绍了jQuery的核心函数和事件处理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-01-01
  • jQuery的context属性用法实例

    jQuery的context属性用法实例

    这篇文章主要介绍了jQuery的context属性用法,实例分析了context属性返回节点内容的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • 如何用jQuery实现ASP.NET GridView折叠伸展效果

    如何用jQuery实现ASP.NET GridView折叠伸展效果

    我们今天就一个具体的需求进行分析，引出如何用jQuery实现ASP.NET GridView折叠伸展效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2015-09-09
  • 10个基于jQuery或JavaScript的WYSIWYG 编辑器整理

    10个基于jQuery或JavaScript的WYSIWYG 编辑器整理

    10惊人的自由丰富的文本编辑器，将提升您的网站的功能。我已经收集了5 jQuery和5个非jQuery实时评价附带简单的功能，具有办公一样的功能。
    2010-05-05
  • jQuery学习笔记 操作jQuery对象 属性处理

    jQuery学习笔记 操作jQuery对象 属性处理

    HTML文档，不但有一系列语义标签，每个标签下属还有一系列属性节点。自然我们也想去操作这些属性节点。格式仍然为$(selector).方法
    2012-09-09
  • Jquery 扩展方法

    Jquery 扩展方法

    好久没有温习JS了。 最近看到VS2010把Jquery作为JS标准库纳入了Web项目里，再不会用Jquery，真怕自己“OUT”了。
    2010-05-05
  • jQuery之自动完成组件的深入解析

    jQuery之自动完成组件的深入解析

    本篇文章是对jQuery中的自动完成组件进行了详细的分析介绍，需要的朋友参考下
    2013-06-06
  • 前端必备神器 Snap.svg 弹动效果

    前端必备神器 Snap.svg 弹动效果

    SVG(可缩放矢量图形)是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。
    2014-11-11
  • jQuery取消ajax请求的方法

    jQuery取消ajax请求的方法

    这篇文章主要介绍了jQuery取消ajax请求的方法,可实现在Ajax请求超时的情况下取消请求的功能,需要的朋友可以参考下
    2015-06-06
  • jquery的父子兄弟节点查找示例代码

    jquery的父子兄弟节点查找示例代码

    这篇文章主要介绍了jquery的父子兄弟节点的查找方法,需要的朋友可以参考下
    2014-03-03

最新评论