第一步下载jquery easyui  下载地址：http://www.jeasyui.com/download/index.php

第二步创建Java web项目

第三步导入相关的文件。。文件夹结构例如以下

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

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

   <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> 

<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.0使用。把他导入到myeclipse10里。jquery-1.7.2.min.js报错。

解决的方法：

jqueryjQueryJQUERYJqueryJQueryjquery报错jsJSJsmyeclipseMyEclipseMyeclipse1、选中报错的jquery文件“jquery-1.2.6.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%>">

    

    <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">

-->

   <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

   <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> 

   <!-- <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> -->

<!-- <link rel="stylesheet" type="text/css" href="easyui/demo.css"> -->

<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="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">Open</a>

<a href="#" 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的使用的更多相关文章

  1. 套用JQuery EasyUI列表显示数据、分页、查询

    声明,本博客从csdn搬到cnblogs博客园了,以前的csdn不再更新,朋友们可以到这儿来找我的文章,更多的文章会发表,谢谢关注! 有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近 ...

  2. Jquery EasyUI 开发实录

    有好几年没有用过EasyUI了,最近在外包做的一个项目中新增功能时,又用到了,本以为和按照以前那样用就可以了,可当我真正用的时候,发现许多地方不一样了,就连官网的文档都更新了,最突出的就是不知道什么时 ...

  3. jQuery UI与jQuery easyUI的冲突解决办法

    jQuery UI与jQuery easyUI都是基于jQuery开发的.难免里面会有些方法名冲突! 因此对jQuery.easyui其中的两个方法名:resizable 和 draggable进行替 ...

  4. jquery easyui 动态绑定数据列

    function doSearch2() { var strsql = $('#sssql').val(); $.ajax({ url: "../HttpHandler/DownloadHa ...

  5. jquery easyui使用（四）······添加,编辑,删除

    前端: <div style="font-size: 25px; font-weight: 700; margin: 50px 0 10px 10px;"> 车辆登记 ...

  6. jquery easyui使用（二）······可折叠面板动态加载无效果

    先上代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"& ...

  7. jquery easyui使用（一）······可折叠面板的布局，手风琴

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  8. jquery easyui菜单树显示

    目前做了一个easyui项目需要显示多级菜单,菜单配置到数据库中,因此每级菜单都需要到数据库中取,用了jQuery EasyUI方便多了. 效果体验:http://hovertree.com/texi ...

  9. 第 1 章 jQuery EasyUI 入门

    学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 5.是否兼容低版本 IE 6.下 ...

  10. 【夯实PHP基础系列】JQuery easyUI的使用

    最近在做一个公司的后台项目中,接触到 JQuery easyUI前端框架,被她简洁的代码和简单有效的ajax交互所深深吸引. 体会有以下3个方面: 1)快速创建表格的能力: 后端程序,比如PHP只需要 ...

随机推荐

  1. 从CSDN搬过来

    https://blog.csdn.net/qq_34416123 从CSDN搬过来 神奇的代码竟然没有弄成博客园这里面的格式 所以以前的很多博客的代码都是直接放在那里了. 懒得去改了.

  2. Css学习总结（2）——60个有用CSS代码片段

    1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...

  3. Sublime 插件Pylinter could not automatically determined the path to lint.py

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50618630 安装Sublime Te ...

  4. ubuntu 14.04服务器上使用nginx搭建wordpress博客详解

    过程详解 1.更新apt-get sudo apt-get update 2.安装nginx sudo apt-get install nginx 3.启动nginx sudo service ngi ...

  5. 暑假NOIP期末考试【1】—— Phantom

    Phantom •题目名称: phantom •时间限制:1 秒 •空间限制:256 MiB 题目描写叙述 在一个无限大的棋盘上.排列着 n * n 枚棋子,形成一个 n 行 n 列的方阵.棋子能够横 ...

  6. [ReactVR] Add Shapes Using 3D Primitives in React VR

    React VR ships with a handful of 3D primitives. We'll importprimitives like <Sphere/>, <Box ...

  7. leetcode第一刷_Reverse Linked List II

    翻转链表绝对是终点项目,应该掌握的,这道题要求的是翻转一个区间内的节点.做法事实上非常相似,仅仅只是要注意判定開始是头的特殊情况,这样head要更新的,还有就是要把翻转之后的尾部下一个节点保存好,要么 ...

  8. Android高级控件（一）——ListView绑定CheckBox实现全选，添加和删除等功能

    Android高级控件(一)--ListView绑定CheckBox实现全选,添加和删除等功能 这个控件还是挺复杂的.也是项目中应该算是比較经常使用的了,所以写了一个小Demo来讲讲,主要是自己定义a ...

  9. 剑指offer_面试题_从上往下打印二叉树

    题目:从上往下打印出二叉树的每一个结点.同一层的结点依照从左到右的顺序打印.比如输入图4.5中的二叉树.则依次打印出8.6.10.5.7.9.11. 8 /     \ 6     10 /   \ ...

  10. 打印全排列和stl::next_permutation

    打印全排列是个有点挑战的编程问题.STL提供了stl::next_permutation完美的攻克了这个问题. 可是,假设不看stl::next_permutation,尝试自己解决,怎么做? 非常自 ...