r2631 - spinner: added RTL support; added a dir option and split directional related styles in tw...
Author: pazu2k@gmail.com
Date: Sat May 30 13:12:56 2009
New Revision: 2631
Added:
branches/dev/spinner/demos/spinner/rtl.html
Modified:
branches/dev/spinner/demos/spinner/index.html
branches/dev/spinner/themes/base/ui.spinner.css
branches/dev/spinner/ui/ui.spinner.js
Log:
spinner: added RTL support; added a dir option and split directional
related styles in two: ui-spinner-ltr (default) and ui-spinner-rtl. for
demo see /dev/spinner/demos/spinner/rtl.html
Modified: branches/dev/spinner/demos/spinner/index.html
==============================================================================
--- branches/dev/spinner/demos/spinner/index.html (original)
+++ branches/dev/spinner/demos/spinner/index.html Sat May 30 13:12:56 2009
@@ -17,6 +17,7 @@
<li><a href="mousewheel-disabled.html">Mousewheel Disabled</a></li>
<li><a href="autohide.html">Hiding</a></li>
<li><a href="extension.html">Extension</a></li>
+ <li><a href="rtl.html">RTL</a></li>
</ul>
</div>
</body>
Added: branches/dev/spinner/demos/spinner/rtl.html
==============================================================================
--- (empty file)
+++ branches/dev/spinner/demos/spinner/rtl.html Sat May 30 13:12:56 2009
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Spinner - Default functionality</title>
+ <link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+ <script type="text/javascript"
src="../../external/mousewheel/jquery.mousewheel.min.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.spinner.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <script type="text/javascript">
+ $(function() {
+ $("#s1").spinner({dir: 'rtl'});
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<label for="s1">Select a value:</label>
+<input id="s1" name="value" />
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+Default spinner.
+
+</div><!-- End demo-description -->
+
+</body>
+</html>
Modified: branches/dev/spinner/themes/base/ui.spinner.css
==============================================================================
--- branches/dev/spinner/themes/base/ui.spinner.css (original)
+++ branches/dev/spinner/themes/base/ui.spinner.css Sat May 30 13:12:56 2009
@@ -1,12 +1,24 @@
/* Spinner
----------------------------------*/
.ui-spinner { position:relative; display: inline-block; overflow: hidden;
padding: 0; vertical-align: middle; height: 1.8em; }
-.ui-spinner-box { float: left; border: none; background: none; padding: 0;
margin: .2em 22px .2em .4em; vertical-align: middle; color: inherit; }
-.ui-spinner-button { width: 22px; height: 50%; font-size: .5em; padding:
0; margin: 0; z-index: 100; text-align: center; vertical-align: middle;
position: absolute; right: 0; cursor: default; display: block; overflow:
hidden; }
-.ui-spinner a.ui-spinner-button { border-top: none; border-right: none;
border-bottom: none; } /* more specificity required here to overide default
borders */
+.ui-spinner-box { border: none; background: none; padding: 0; margin: .2em
0; vertical-align: middle; color: inherit; }
+.ui-spinner-button { width: 22px; height: 50%; font-size: .5em; padding:
0; margin: 0; z-index: 100; text-align: center; vertical-align: middle;
position: absolute; cursor: default; display: block; overflow: hidden; }
+.ui-spinner a.ui-spinner-button { border-top: none; border-bottom: none; }
/* more specificity required here to overide default borders */
.ui-spinner-button-inner { width: 16px; height: 100%; display: block;
position: relative; margin: auto; } /* horizontal centre icon */
.ui-spinner .ui-icon { position: absolute; margin-top: -8px; top: 50%; }
/* vertical centre icon */
.ui-spinner-up { top: 0; }
.ui-spinner-down { bottom: 0; }
.ui-spinner-list, .ui-spinner-listitem { display: block; }
-.ui-spinner-list { margin: 0; padding: .4em; height: 1.8em; }
\ No newline at end of file
+.ui-spinner-list { margin: 0; padding: .4em; height: 1.8em; }
+
+/* ltr (default) */
+.ui-spinner-ltr { direction: ltr; }
+.ui-spinner-ltr .ui-spinner-box { float: left; margin-left: .4em;
margin-right: 22px; }
+.ui-spinner-ltr .ui-spinner-button { right: 0; }
+.ui-spinner-ltr a.ui-spinner-button { border-left: none; }
+
+/* rtl */
+.ui-spinner-rtl { direction: rtl; }
+.ui-spinner-rtl .ui-spinner-box { float: right; margin-left: 22px;
margin-right: .4em; }
+.ui-spinner-rtl .ui-spinner-button { left: 0; }
+.ui-spinner-rtl a.ui-spinner-button { border-left: none; }
Modified: branches/dev/spinner/ui/ui.spinner.js
==============================================================================
--- branches/dev/spinner/ui/ui.spinner.js (original)
+++ branches/dev/spinner/ui/ui.spinner.js Sat May 30 13:12:56 2009
@@ -83,12 +83,12 @@
var widget = self.element
.wrap('<div>')
.parent()
- .addClass('ui-spinner ui-widget ui-widget-content ui-corner-all')
+ .addClass('ui-spinner ui-widget ui-widget-content ui-corner-all
ui-spinner-'+self.options.dir)
// check for IE
.css({
display: !$.support.opacity &&
$(self).css('display', 'inline-block') ? 'inline' : false
})
- .append('<a class="ui-spinner-button ui-spinner-up ui-state-default
ui-corner-tr"><span class="ui-spinner-button-inner"><span class="ui-icon
ui-icon-triangle-1-n">▲</span></span></a>')
+ .append('<a class="ui-spinner-button ui-spinner-up ui-state-default
ui-corner-t'+ self.options.dir.substr(-1,1) +'"><span
class="ui-spinner-button-inner"><span class="ui-icon
ui-icon-triangle-1-n">▲</span></span></a>')
.find('.ui-spinner-up')
.bind('mousedown', function(event) {
$(this).addClass(active);
@@ -113,7 +113,7 @@
}
})
.end()
- .append('<a class="ui-spinner-button ui-spinner-down ui-state-default
ui-corner-br"><span class="ui-spinner-button-inner"><span class="ui-icon
ui-icon-triangle-1-s">▼</span></span></a>')
+ .append('<a class="ui-spinner-button ui-spinner-down ui-state-default
ui-corner-b'+ self.options.dir.substr(-1,1) +'"><span
class="ui-spinner-button-inner"><span class="ui-icon
ui-icon-triangle-1-s">▼</span></span></a>')
.find('.ui-spinner-down')
.bind('mousedown', function(event) {
$(this).addClass(active);
@@ -541,7 +541,9 @@
items: null,
width: 'auto',
- hide: false
+ hide: false,
+
+ dir: 'ltr'
},
format: {
currency: function(num, sym, group, pt) {