jQuery 一
Posted 挽你何用
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 一相关的知识，希望对你有一定的参考价值。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.2.1.min.js" > </script>
<script type="text/javascript" src="jquery-easyui-1.5.1/jquery.easyui.min.js" > </script>
<link type="text/css" rel="stylesheet" href="jquery-easyui-1.5.1/themes/icon.css"></link>
<link type="text/css" rel="stylesheet" href="jquery-easyui-1.5.1/themes/default/easyui.css"></link>
<script type="text/javascript" src="jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
//$.messager.alert("提示","这是一个提示","info");
/* $.messager.confirm("提示","你想退出该系统么",function(r){
if(r){
alert("退出 ");
}
}); */
/* $.messager.show({
title:‘我的消息‘,
msg:‘消息将在5秒后关闭‘,
timout:5000,
showtype:‘slide‘
}); */
/* $.messager.prompt(‘提示‘,‘请输入你的姓名‘,function(r){
if(r){
alert(‘你的姓名是：‘+r);
}
}); */
/* $("#dd").draggable({
handle:‘#title‘
}) */
/* $(‘.dragitem‘).draggable({
proxy:function(source){
var p=$("<div style=‘border:1px solid #ccc;width:80px‘>拖动</div>");
p.html($(source).html()).appendTo(‘body‘);
return p;
}
}); */
//放置
/* $("#dd").droppable({
accept:‘#d1,#d3‘
}); */
/* $("#rr").resizable({
maxWidth:800,
maxHeight:800
});*/
//分页
/* $("#ff").pagination({
total:2000,
pagaSize:100
}); */
//搜索框
/* $("#ss").searchbox({
searcher:function(value,name){
alert(value+","+name)
},
menu:"#mm",
prompt:"请输入值："
}); */
//进度条
/* $("#p").progressbar({
value:60
});
var value=$(‘#p‘).progressbar(‘getValue‘);
if(value<100){
value+= Math.floor(Math.random()*10);
$(‘#p‘).progressbar("setValue",value);
}
$(‘#p‘).progressbar({
onChange:function(value){
alert(value)
}
});
$("#dd").tooltip({
position:‘right‘,
content:‘<span style="color:#fff">This is the tooltip message</span>‘,
onShow:function(){
$(this).tooltip(‘tip‘).css({
backgroundColor:‘#666‘,
borderColor:‘#666‘
})
}
});
//按钮
$(function(){
$(‘#btn‘).bind(‘click‘,function(){
alert(‘easyui‘);
});
});
//菜单
$(‘#mm‘).menu(‘show‘, {
left: 200,
top: 100
});
//创建窗口
$("#win2").window({
width:600,
height:400,
modal:true
});
//创建对话框窗口
$(‘#dd‘).dialog({
title: ‘My Dialog‘,
width: 400,
height: 200,
closed: false,
cache: false,
href: ‘get_content.php‘,
modal: true
});
$(‘#dd‘).dialog(‘refresh‘, ‘new_content.php‘);
//创建面板右上角工具
$(‘#p‘).panel({
width:500,
height:150,
title: ‘My Panel‘,
tools: [{
iconCls:‘icon-add‘,
handler:function(){alert(‘new‘)}
},{
iconCls:‘icon-save‘,
handler:function(){alert(‘save‘)}
}]
});
$(‘#p‘).panel({
href:‘content_url.php‘,
onLoad:function(){
alert(‘loaded successfully‘);
}
}); */
})
</script>
</head>
<body>
<!-- <a id="but" class="easyui-linkbutton" href="otherpage.php" data-options="iconCls:‘icons-ok‘">打开</a> -->
<!-- <a id="but" class="easyui-linkbutton" href="#" data-options="iconCls:‘icons-on‘">关闭</a> -->
<!-- <div id="dd" style="width:300px;height:600px" >
<div id="title" style="background:#ccc;">title</div>
</div>-->
<!-- <div id="dd" style="width:100px;height:100px;border:1px solid #ccc;"></div>
<div id="rr" style="width:100px;height:100px;border:1px solid #ccc;"></div>
<div id="ff" style="background:#efefe;border:1px solid #ccc;"></div>
<input id="ss"></input>
<div id="mm" style="width:120px">
<div data-options="name:‘all‘,iconCls:‘icon-ok‘">All News</div>
<div data-options="name:‘sports‘">Sports News</div>
</div> -->
<!-- 进度条 -->
<!-- <div id="p" style="width:400px;"></div> -->
<!-- 提示框 -->
<!-- <a href="#" class="eaasyui-tooltip" title="This is the tooltip message">Hover me</a>
<a id="dd" href="javascript:void(0)">Click here</a> -->
<!-- 按钮 -->
<!-- <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:‘icon-search‘">easyui</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:‘icon-search‘" onclick="javascript:alert(‘easyui‘)">easyui</a>
<a href="otherpage.php" class="easyui-linkbutton" data-options="iconCls:‘icon-search‘">easyui</a> -->
<!-- 创建菜单 -->
<!--
<div id="mm" class="easyui-menu" style="width:120px;">
<div>New</div>
<div>
<span>Open</span>
<div style="width:150px">
<div><b>Word</b></div>
<div>Excel</div>
<div>PowerPoint</div>
</div>
</div>
<div data-options="iconCls:‘icon-save‘">Save</div>
<div class="menu-sep"></div>
<div>Exit</div>
</div>
-->
<!-- 菜单按钮 -->
<!--
<a href="javascript:void(0)" id="mb" class="easyui-menubutton"
data-options="menu:‘#mm‘,iconCls:‘icon-edit‘">Edit</a>
<div id="mm" style="width:150px;">
<div data-options="iconCls:‘icon-undo‘">Undo</div>
<div data-options="iconCls:‘icon-redo‘">Redo</div>
<div class="menu-sep"></div>
<div>Cut</div>
<div>Copy</div>
<div>Paste</div>
<div class="menu-sep"></div>
<div data-options="iconCls:‘icon-remove‘">Delete</div>
<div>Select All</div>
</div>
-->
<!-- 分割按钮 -->
<!--
<a href="javascript:void(0)" id="sb" class="easyui-splitbutton"
data-options="menu:‘#mm‘,iconCls:‘icon-ok‘" onclick="javascript:alert(‘ok‘)">Ok</a>
<div id="mm" style="width:100px;">
<div data-options="iconCls:‘icon-ok‘">Ok</div>
<div data-options="iconCls:‘icon-cancel‘">Cancel</div>
</div>
-->
<!-- 开关按钮 -->
<!--
<input class="easyui-switchbutton" checked>
<input class="easyui-switchbutton" data-options="onText:‘Yes‘,offText:‘No‘">
-->
<!-- 创建窗口 -->
<!--
<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"
data-options="iconCls:‘icon-save‘,modal:true">Window Content</div>
<div id="win2"></div> -->
<!-- 创建复合布局窗口 -->
<!--
<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"
data-options="iconCls:‘icon-save‘,modal:true">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:‘north‘,split:true" style="height:100px"></div>
<div data-options="region:‘center‘"> The Content </div>
</div>
</div>
-->
<!-- 对话框窗口 -->
<!--
<div id="dia" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px"
data-options="iconCls:‘icon-sava‘,resizable:true,modal:true">Dialog Content</div>
<div id="dd">Dialog Content.</div> -->
<!-- 创建面板 -->
<!--
<div id="p" class="easyui-panel" title="My Panel"
style="width:500px;height:150px;padding:10px;background:#fafafa;"
data-options="iconCls:‘icon-save‘,closable:true,
collapsible:true,minimizable:true,maximizable:true">
<p>panel content.</p>
<p>panel content.</p>
</div>
-->
<!-- 创建面板右上角工具-->
<!--
<div id="p" style="padding:10px;">
<p>panel content.</p>
<p>panel content.</p>
</div>
-->
<!-- 创建选项卡-->
<!--
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
tab2
</div>
<div title="Tab3" data-options="iconCls:‘icon-reload‘,closable:true" style="padding:20px;display:none;">
tab3
</div>
</div>
-->
<!-- 分类-->
<!--
<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
<div title="Title1" data-options="iconCls:‘icon-save‘" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery.
It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" data-options="iconCls:‘icon-reload‘,selected:true" style="padding:10px;">
content2
</div>
<div title="Title3">
content3
</div>
</div>
-->
<!-- 完整页面创建布局-->
<!--
<body class="easyui-layout">
<div data-options="region:‘north‘,title:‘North Title‘,split:true" style="height:100px;"></div>
<div data-options="region:‘south‘,title:‘South Title‘,split:true" style="height:100px;"></div>
<div data-options="region:‘east‘,iconCls:‘icon-reload‘,title:‘East‘,split:true" style="width:100px;"></div>
<div data-options="region:‘west‘,title:‘West‘,split:true" style="width:100px;"></div>
<div data-options="region:‘center‘,title:‘center title‘" style="padding:5px;background:#eee;"></div>
</body>
-->
<!-- 创建嵌套布局-->
<body class="easyui-layout">
<div data-options="region:‘north‘" style="height:100px"></div>
<div data-options="region:‘center‘">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:‘west‘,collapsed:true" style="width:180px"></div>
<div data-options="region:‘center‘"></div>
</div>
</div>
</body>
</body>
</html>
以上是关于jQuery 一的主要内容，如果未能解决你的问题，请参考以下文章