<%
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>My JSP 'index.jsp' starting page</title>
<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>
<script src="jquery/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
</head>
<body>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
<h2>jquery</h2>
<p>jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。<br>jQuery库包含以下功能:<br>
1.HTML 元素选取<br>
2.HTML 元素操作<br>
3.CSS 操作<br>
4.HTML 事件函数<br>
5.JavaScript 特效和动画<br>
6.HTML DOM 遍历和修改<br>
7.AJAX<br>
8.Utilities<br>
</p>
<h2>easyUI</h2>
<h2>1.使用标记创建树形菜单</h2>
<p>easyUI树形菜单可以定义在<ul>元素中，无顺序的<ul>元素提供一个基础的Tree结构。</p>
<p>每一个<li>元素将产生一个树节点，子<ul>元素将产生一个父树节点。</p>
<ul class="easyui-tree">
<li>
<span>Folder</span>
<ul>
<li><span>Sub Folder 1</span>
<ul>
<li><span>File 11</span></li>
<li><span>File 12</span></li>
<li><span>File 13</span></li>
</ul>
</li>
<li><span>File 14</span></li>
<li><span>File 15</span></li>
</ul>
<li><span>File 16</span></li>
</li>
</ul>
<h2>2.创建基础树形网格</h2>
<p>table：定义表格，简单的表格由table元素和tr，th，td组成</p>
<p>tr：定义表格行</p>
<p>th：定义表头</p>
<p>td：定义表单元格</p>
<table id="test" title="Folder Browser" class="easyui-treegrid" style="width:400px;height:300px"
url="data/treegrid_data.json" rownumbers="true" idField="id" treeField="name">
<thead>
<tr>
<th field="name" width="160">Name</th>
<th field="size" width="60" align="right">Size</th>
<th field="date" width="100">Modified Date</th>
</tr>
</thead>
</table>
<h2>3.创建标签页</h2>
<div class="easyui-tabs" style="width:400px;height:100px;">
<div title="First Tab" style="padding:10px;">
First Tab
</div>
<div title="Second Tab" closable="true" style="padding:10px;">
Second Tab
</div>
<div title="Third Tab" iconCls="icon-reload" closable="true" style="padding:10px;">
Third Tab
</div>
</div>
</body>
</html>
网友评论