This commit is contained in:
季圣华
18
WebRoot/js/easyui-1.3.5/demo/tooltip/_content.html
Normal file
18
WebRoot/js/easyui-1.3.5/demo/tooltip/_content.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>AJAX Content</title>
|
||||
</head>
|
||||
<body>
|
||||
<p style="font-size:14px">Here is the content loaded via AJAX.</p>
|
||||
<ul>
|
||||
<li>easyui is a collection of user-interface plugin based on jQuery.</li>
|
||||
<li>easyui provides essential functionality for building modern, 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>
|
||||
</body>
|
||||
</html>
|
||||
23
WebRoot/js/easyui-1.3.5/demo/tooltip/_dialog.html
Normal file
23
WebRoot/js/easyui-1.3.5/demo/tooltip/_dialog.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Dialog Content</title>
|
||||
</head>
|
||||
<body>
|
||||
<div style="padding:5px;">
|
||||
<div style="padding:5px 10px">
|
||||
<div>User Name:</div>
|
||||
<input style="width:160px">
|
||||
</div>
|
||||
<div style="padding:5px 10px">
|
||||
<div>Password:</div>
|
||||
<input type="password" style="width:160px">
|
||||
</div>
|
||||
<div style="padding:5px 10px;text-align:center">
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton">Login</a>
|
||||
<a href="javascript:void(0)" class="easyui-linkbutton">Cancel</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
35
WebRoot/js/easyui-1.3.5/demo/tooltip/ajax.html
Normal file
35
WebRoot/js/easyui-1.3.5/demo/tooltip/ajax.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ajax Tooltip - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Ajax Tooltip</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>The tooltip content can be loaded via AJAX.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<!-- <a href="#" class="easyui-tooltip" data-options="-->
|
||||
<!-- content: $('<div></div>'),-->
|
||||
onShow: function(){
|
||||
$(this).tooltip('arrow').css('left', 20);
|
||||
$(this).tooltip('tip').css('left', $(this).offset().left);
|
||||
},
|
||||
onUpdate: function(cc){
|
||||
cc.panel({
|
||||
width: 500,
|
||||
height: 'auto',
|
||||
border: false,
|
||||
href: '_content.html'
|
||||
});
|
||||
}
|
||||
">Hove me</a> to display tooltip content via AJAX.
|
||||
</body>
|
||||
</html>
|
||||
23
WebRoot/js/easyui-1.3.5/demo/tooltip/basic.html
Normal file
23
WebRoot/js/easyui-1.3.5/demo/tooltip/basic.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Basic Tooltip - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Basic Tooltip</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Hover the links to display tooltip message.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<p>The tooltip can use each elements title attribute.
|
||||
<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a> to display tooltip.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
33
WebRoot/js/easyui-1.3.5/demo/tooltip/customcontent.html
Normal file
33
WebRoot/js/easyui-1.3.5/demo/tooltip/customcontent.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Custom Tooltip Content - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Custom Tooltip Content</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Access to each elements attribute to get the tooltip content.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div id="pg" data-options="total:114" style="border:1px solid #ddd;"></div>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
$('#pg').pagination().find('a.l-btn').tooltip({
|
||||
content: function(){
|
||||
var cc = $(this).find('span.l-btn-empty').attr('class').split(' ');
|
||||
var icon = cc[1].split('-')[1];
|
||||
return icon + ' page';
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
55
WebRoot/js/easyui-1.3.5/demo/tooltip/customstyle.html
Normal file
55
WebRoot/js/easyui-1.3.5/demo/tooltip/customstyle.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Custom Tooltip Style - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Custom Tooltip Style</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>This sample shows how to change the tooltip style.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div style="padding:10px 200px">
|
||||
<div id="pp1" class="easyui-panel" style="width:100px;padding:5px">Hover Me</div>
|
||||
</div>
|
||||
<div style="padding:10px 200px">
|
||||
<div id="pp2" class="easyui-panel" style="width:100px;padding:5px">Hover Me</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function(){
|
||||
$('#pp1').tooltip({
|
||||
position: 'right',
|
||||
content: '<span style="color:#fff">This is the tooltip message.</span>',
|
||||
onShow: function(){
|
||||
$(this).tooltip('tip').css({
|
||||
backgroundColor: '#666',
|
||||
borderColor: '#666'
|
||||
});
|
||||
}
|
||||
});
|
||||
$('#pp2').tooltip({
|
||||
position: 'bottom',
|
||||
content: '<div style="padding:5px;background:#eee;color:#000">This is the tooltip message.</div>',
|
||||
onShow: function(){
|
||||
$(this).tooltip('tip').css({
|
||||
backgroundColor: '#fff000',
|
||||
borderColor: '#ff0000',
|
||||
boxShadow: '1px 1px 3px #292929'
|
||||
});
|
||||
},
|
||||
onPosition: function(){
|
||||
$(this).tooltip('tip').css('left', $(this).offset().left);
|
||||
$(this).tooltip('arrow').css('left', 20);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
37
WebRoot/js/easyui-1.3.5/demo/tooltip/position.html
Normal file
37
WebRoot/js/easyui-1.3.5/demo/tooltip/position.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tooltip Position - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Tooltip Position</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>Click the drop-down list below to change where the tooltip appears.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<span>Select position:</span>
|
||||
<select onchange="changePosition(this.value)">
|
||||
<option value="bottom">Bottom</option>
|
||||
<option value="top">Top</option>
|
||||
<option value="left">Left</option>
|
||||
<option value="right">Right</option>
|
||||
</select>
|
||||
<div style="padding:10px 200px">
|
||||
<div id="pp" class="easyui-panel easyui-tooltip" title="This is the tooltip message." style="width:100px;padding:5px">Hover Me</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
function changePosition(pos){
|
||||
$('#pp').tooltip({
|
||||
position: pos
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
43
WebRoot/js/easyui-1.3.5/demo/tooltip/toolbar.html
Normal file
43
WebRoot/js/easyui-1.3.5/demo/tooltip/toolbar.html
Normal file
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tooltip as Toolbar - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Tooltip as Toolbar</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>This sample shows how to create a tooltip style toolbar.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div style="padding:10px 200px">
|
||||
<p><a id="dd" href="javascript:void(0)" class="easyui-tooltip" data-options="
|
||||
hideEvent: 'none',
|
||||
content: function(){
|
||||
return $('#toolbar');
|
||||
},
|
||||
onShow: function(){
|
||||
var t = $(this);
|
||||
t.tooltip('tip').focus().unbind().bind('blur',function(){
|
||||
t.tooltip('hide');
|
||||
});
|
||||
}
|
||||
">Hover me</a> to display toolbar.</p>
|
||||
</div>
|
||||
<div style="display:none">
|
||||
<div id="toolbar">
|
||||
<a href="#" class="easyui-linkbutton easyui-tooltip" title="Add" data-options="iconCls:'icon-add',plain:true"></a>
|
||||
<a href="#" class="easyui-linkbutton easyui-tooltip" title="Cut" data-options="iconCls:'icon-cut',plain:true"></a>
|
||||
<a href="#" class="easyui-linkbutton easyui-tooltip" title="Remove" data-options="iconCls:'icon-remove',plain:true"></a>
|
||||
<a href="#" class="easyui-linkbutton easyui-tooltip" title="Undo" data-options="iconCls:'icon-undo',plain:true"></a>
|
||||
<a href="#" class="easyui-linkbutton easyui-tooltip" title="Redo" data-options="iconCls:'icon-redo',plain:true"></a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
47
WebRoot/js/easyui-1.3.5/demo/tooltip/tooltipdialog.html
Normal file
47
WebRoot/js/easyui-1.3.5/demo/tooltip/tooltipdialog.html
Normal file
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tooltip Dialog - jQuery EasyUI Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
|
||||
<link rel="stylesheet" type="text/css" href="../demo.css">
|
||||
<script type="text/javascript" src="../../jquery.min.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Tooltip Dialog</h2>
|
||||
<div class="demo-info">
|
||||
<div class="demo-tip icon-tip"></div>
|
||||
<div>This sample shows how to create a tooltip dialog.</div>
|
||||
</div>
|
||||
<div style="margin:10px 0;"></div>
|
||||
<div style="padding:10px 200px">
|
||||
<p><a id="dd" href="javascript:void(0)">Click here</a> to see the tooltip dialog.
|
||||
</div>
|
||||
<script>
|
||||
$(function(){
|
||||
$('#dd').tooltip({
|
||||
content: $('<div></div>'),
|
||||
showEvent: 'click',
|
||||
onUpdate: function(content){
|
||||
content.panel({
|
||||
width: 200,
|
||||
border: false,
|
||||
title: 'Login',
|
||||
href: '_dialog.html'
|
||||
});
|
||||
},
|
||||
onShow: function(){
|
||||
var t = $(this);
|
||||
t.tooltip('tip').unbind().bind('mouseenter', function(){
|
||||
t.tooltip('show');
|
||||
}).bind('mouseleave', function(){
|
||||
t.tooltip('hide');
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user