jquery easyui的使用
第一步下载jquery easyui 下载地址：http://www.jeasyui.com/download/index.php
第二步创建Java web项目
第三步导入相关的文件。。文件夹结构例如以下
- <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-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">
<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的使用的更多相关文章
- 套用JQuery EasyUI列表显示数据、分页、查询
声明,本博客从csdn搬到cnblogs博客园了,以前的csdn不再更新,朋友们可以到这儿来找我的文章,更多的文章会发表,谢谢关注! 有时候闲的无聊,看到extjs那么肥大,真想把自己的项目改了,最近 ...
- Jquery EasyUI 开发实录
有好几年没有用过EasyUI了,最近在外包做的一个项目中新增功能时,又用到了,本以为和按照以前那样用就可以了,可当我真正用的时候,发现许多地方不一样了,就连官网的文档都更新了,最突出的就是不知道什么时 ...
- jQuery UI与jQuery easyUI的冲突解决办法
jQuery UI与jQuery easyUI都是基于jQuery开发的.难免里面会有些方法名冲突! 因此对jQuery.easyui其中的两个方法名:resizable 和 draggable进行替 ...
- jquery easyui 动态绑定数据列
function doSearch2() { var strsql = $('#sssql').val(); $.ajax({ url: "../HttpHandler/DownloadHa ...
- jquery easyui使用（四）······添加,编辑,删除
前端: <div style="font-size: 25px; font-weight: 700; margin: 50px 0 10px 10px;"> 车辆登记 ...
- jquery easyui使用（二）······可折叠面板动态加载无效果
先上代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"& ...
- jquery easyui使用（一）······可折叠面板的布局，手风琴
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- jquery easyui菜单树显示
目前做了一个easyui项目需要显示多级菜单,菜单配置到数据库中,因此每级菜单都需要到数据库中取,用了jQuery EasyUI方便多了. 效果体验:http://hovertree.com/texi ...
- 第 1 章 jQuery EasyUI 入门
学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 5.是否兼容低版本 IE 6.下 ...
- 【夯实PHP基础系列】JQuery easyUI的使用
最近在做一个公司的后台项目中,接触到 JQuery easyUI前端框架,被她简洁的代码和简单有效的ajax交互所深深吸引. 体会有以下3个方面: 1)快速创建表格的能力: 后端程序,比如PHP只需要 ...
随机推荐
- Nuxt开发经验分享
Nuxt开发经验分享 本文章基于starter-template模板进行讲解,面向有vue-cli开发经验的宝宝 vue init nuxt-community/starter-template ...
- 一个简单搜索引擎的搭建过程（Solr+Nutch+Hadoop）
最近,因为未来工作的需要,我尝试安装部署了分布式爬虫系统Nutch,并配置了伪分布式的Hadoop来存储爬取的网页结果,用solr来对爬下来的网页进行搜索.我主要通过参考网上的相关资料进行安装部署的. ...
- Oracle安装和使用说明
很久没有安装Oracle了,今天试了一下重新安装Oracle,然后做了一个总结: 一.Oracle 下载 注意Oracle分成两个文件,下载完后,将两个文件解压到同一目录下即可. 路径名称中,最好不要 ...
- xpee.vbs
xpee.vbs Win 8安装之后每一次重启桌面都会有一个360浏览器的快捷方式,终于找到原因了, 在Windows/System下面有这么个文件: Set ws = CreateObject(&q ...
- 从QQ聊天看交流的有效性
首先让我们看一则约10分钟的QQ群聊天记录.截图例如以下.已经进行了隐私保护. 交流的主体为大二的在校生与刚刚毕业的学长之间的对话,学长參加过培训,在校学弟想了解一下.故有了以下的交流.(从上到下,从 ...
- jQuery中focusin()和focus()、find()和children()的差别
jQuery中focus()和focusin().focus()和children()的差别 focus()和focusin() focus()和focusin()的差别在于focusin()支持事件 ...
- LintCode-交叉字符串
给出三个字符串:s1.s2.s3,推断s3是否由s1和s2交叉构成. 您在真实的面试中是否遇到过这个题? Yes 例子 比方 s1 = "aabcc" s2 = "dbb ...
- cocos2d_x_03_经常使用类的使用_事件_画图
一.TextFieldTTF输入框的使用 #pragma mark - 自己定义方法 // 自己定义方法,加入一个 TextField void TextFieldScene::addOneTextF ...
- （转）<![CDATA[]]>和转义字符
被<![CDATA[]]>这个标记所包含的内容将表示为纯文本,比如<![CDATA[<]]>表示文本内容“<”. 此标记用于xml文档中,我们先来看看使用转义符的情 ...
- Hibernate的xml方法配置和操作代码
一.gradle中包: compile group: 'org.hibernate', name: 'hibernate-core', version: '5.2.12.Final' compile ...