library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Interaction demos: Added index and default

Browse Source
This commit is contained in:
Richard D. Worth 2012-01-26 11:11:16 -05:00
parent d056a9ac2f
commit 2753173f40
3 changed files with 83 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demos/index.html
View File

@ -11,6 +11,7 @@
<script src="../external/globalize.culture.de-DE.js"></script>
<script src="../ui/jquery.ui.core.js"></script>
<script src="../ui/jquery.ui.widget.js"></script>
<script src="../ui/jquery.ui.interaction.js"></script>
<script src="../ui/jquery.ui.mouse.js"></script>
<script src="../ui/jquery.ui.accordion.js"></script>
<script src="../ui/jquery.ui.autocomplete.js"></script>
@ -299,6 +300,7 @@
<dd><a href="hide/index.html">Hide</a></dd>
<dd><a href="show/index.html">Show</a></dd>
<dt>Utilities</dt>
<dd><a href="interaction/index.html">Interaction</a></dd>
<dd><a href="position/index.html">Position</a></dd>
<dd><a href="widget/index.html">Widget</a></dd>
<dt>About jQuery UI</dt>

63
demos/interaction/default.html Normal file
View File

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Interaction - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.7.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.interaction.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#startmovestop { width: 200px; height: 100px; background: lightBlue; }
</style>
<script>
$(function() {
$.widget( "my.startmovestop", $.ui.interaction, {
_start: function() {
$("#startcount").text(function() {
return parseInt( $(this).text(), 10 ) + 1;
});
},
_move: function() {
$("#movecount").text(function() {
return parseInt( $(this).text(), 10 ) + 1;
});
},
_stop: function() {
$("#stopcount").text(function() {
return parseInt( $(this).text(), 10 ) + 1;
});
}
});
$( "#startmovestop" ).startmovestop();
});
</script>
</head>
<body>
<div class="demo">
<div id="startmovestop"></div>
<dl>
<dt>Start:</dt>
<dd id="startcount">0</dd>
<dt>Move:</dt>
<dd id="movecount">0</dd>
<dt>Stop:</dt>
<dd id="stopcount">0</dd>
</dl>
</div><!-- End demo -->
<div class="demo-description">
<p>This demo shows a simple interaction built using the interaction utility (jquery.ui.interaction.js).</p>
<p>Make a down-move-up motion starting on the blue box above using the mouse or a touch input device to see the interaction events</p>
</div><!-- End demo-description -->
</body>
</html>

18
demos/interaction/index.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Interaction Demo</title>
<link rel="stylesheet" href="../demos.css">
</head>
<body>
<div class="demos-nav">
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
</ul>
</div>
</body>
</html>