r2686 - added scrollable plugin based on Scott Jehls work on extending the slider demo.
Author: grabanski
Date: Tue Jun 9 13:40:27 2009
New Revision: 2686
Added:
branches/labs/scrollable/
branches/labs/scrollable/index.html
branches/labs/scrollable/scrollable.js
branches/labs/scrollable/ui/
branches/labs/scrollable/ui/css/
branches/labs/scrollable/ui/css/smoothness/
branches/labs/scrollable/ui/css/smoothness/images/
branches/labs/scrollable/ui/css/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png
(contents, props changed)
branches/labs/scrollable/ui/css/smoothness/images/ui-bg_flat_75_ffffff_40x100.png
(contents, props changed)
branches/labs/scrollable/ui/css/smoothness/images/ui-bg_glass_55_fbf9ee_1x400.png
(contents, props changed)
branches/labs/scrollable/ui/css/smoothness/images/ui-bg_glass_65_ffffff_1x400.png
(contents, props changed)
branches/labs/scrollable/ui/css/smoothness/images/ui-bg_glass_75_dadada_1x400.png
(contents, props changed)
branches/labs/scrollable/ui/css/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png
(contents, props changed)
branches/labs/scrollable/ui/css/smoothness/images/ui-bg_glass_95_fef1ec_1x400.png
(contents, props changed)
branches/labs/scrollable/ui/css/smoothness/images/ui-bg_highlight-soft_75_cccccc_1x100.png
(contents, props changed)
branches/labs/scrollable/ui/css/smoothness/images/ui-icons_222222_256x240.png
(contents, props changed)
branches/labs/scrollable/ui/css/smoothness/images/ui-icons_2e83ff_256x240.png
(contents, props changed)
branches/labs/scrollable/ui/css/smoothness/images/ui-icons_454545_256x240.png
(contents, props changed)
branches/labs/scrollable/ui/css/smoothness/images/ui-icons_888888_256x240.png
(contents, props changed)
branches/labs/scrollable/ui/css/smoothness/images/ui-icons_cd0a0a_256x240.png
(contents, props changed)
branches/labs/scrollable/ui/css/smoothness/jquery-ui-1.7.2.custom.css
(contents, props changed)
branches/labs/scrollable/ui/js/
branches/labs/scrollable/ui/js/jquery-1.3.2.min.js (contents, props
changed)
branches/labs/scrollable/ui/js/jquery-ui-1.7.2.custom.min.js
(contents, props changed)
Log:
added scrollable plugin based on Scott Jehls work on extending the slider
demo.
Added: branches/labs/scrollable/index.html
==============================================================================
--- (empty file)
+++ branches/labs/scrollable/index.html Tue Jun 9 13:40:27 2009
@@ -0,0 +1,117 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Scrollable Plugin</title>
+ <script src="ui/js/jquery-1.3.2.min.js" type="text/javascript"
charset="utf-8"></script>
+ <script src="ui/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"
charset="utf-8"></script>
+ <link rel="stylesheet"
href="ui/css/smoothness/jquery-ui-1.7.2.custom.css" type="text/css"
media="screen" title="no title" charset="utf-8">
+ <script src="scrollable.js" type="text/javascript"
charset="utf-8"></script>
+ <link rel="stylesheet" href="ui/css/demo.css" type="text/css"
media="screen" title="no title" charset="utf-8">
+<style type="text/css">
+ body { font-size:62.5%; }
+ #demo-frame > div.demo { padding: 10px !important; }
+ .scroll-pane { overflow: auto; width: 99%; float:left; }
+ .scroll-content { float: left; }
+ .scroll-content-item { width: 100px; height: 100px; float: left; margin:
10px; font-size: 3em; line-height: 96px; text-align: center; }
+ * html .scroll-content-item { display: inline; } /* IE6 float double
margin bug */
+ .scroll-bar-wrap { display:none; clear: left; padding: 0 4px 0 2px;
margin: 0 -1px -1px -1px; }
+ .scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em;
margin: 0 auto; }
+ .scroll-bar-wrap .ui-handle-helper-parent { position: relative; width:
100%; height: 100%; margin: 0 auto; }
+ .scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; }
+ .scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0;
position: relative; top: 50%; }
+</style>
+ </head>
+ <body>
+ <div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
+ <div class="scroll-content" style="width:2440px">
+ <div class="scroll-content-item ui-widget-header">1</div>
+
+ <div class="scroll-content-item ui-widget-header">2</div>
+ <div class="scroll-content-item ui-widget-header">3</div>
+ <div class="scroll-content-item ui-widget-header">4</div>
+ <div class="scroll-content-item ui-widget-header">5</div>
+ <div class="scroll-content-item ui-widget-header">6</div>
+ <div class="scroll-content-item ui-widget-header">7</div>
+
+ <div class="scroll-content-item ui-widget-header">8</div>
+ <div class="scroll-content-item ui-widget-header">9</div>
+ <div class="scroll-content-item ui-widget-header">10</div>
+ <div class="scroll-content-item ui-widget-header">11</div>
+ <div class="scroll-content-item ui-widget-header">12</div>
+ <div class="scroll-content-item ui-widget-header">13</div>
+
+ <div class="scroll-content-item ui-widget-header">14</div>
+ <div class="scroll-content-item ui-widget-header">15</div>
+ <div class="scroll-content-item ui-widget-header">16</div>
+ <div class="scroll-content-item ui-widget-header">17</div>
+ <div class="scroll-content-item ui-widget-header">18</div>
+ <div class="scroll-content-item ui-widget-header">19</div>
+
+ <div class="scroll-content-item ui-widget-header">20</div>
+ </div>
+ <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
+ <div class="scroll-bar"></div>
+ </div>
+ </div>
+
+
+ <div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
+ <div class="scroll-content" style="width:600px">
+ <div class="scroll-content-item ui-widget-header">1</div>
+
+ <div class="scroll-content-item ui-widget-header">2</div>
+ <div class="scroll-content-item ui-widget-header">3</div>
+ <div class="scroll-content-item ui-widget-header">4</div>
+ </div>
+ <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
+ <div class="scroll-bar"></div>
+ </div>
+ </div>
+
+
+
+ <div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
+ <div class="scroll-content" style="width:1000px">
+ <div class="scroll-content-item ui-widget-header">1</div>
+
+ <div class="scroll-content-item ui-widget-header">2</div>
+ <div class="scroll-content-item ui-widget-header">3</div>
+ <div class="scroll-content-item ui-widget-header">4</div>
+ <div class="scroll-content-item ui-widget-header">5</div>
+ <div class="scroll-content-item ui-widget-header">6</div>
+ <div class="scroll-content-item ui-widget-header">7</div>
+
+ <div class="scroll-content-item ui-widget-header">8</div>
+ </div>
+ <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
+ <div class="scroll-bar"></div>
+ </div>
+ </div>
+
+ <div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
+ <div class="scroll-content" style="width:1850px">
+ <div class="scroll-content-item ui-widget-header">1</div>
+
+ <div class="scroll-content-item ui-widget-header">2</div>
+ <div class="scroll-content-item ui-widget-header">3</div>
+ <div class="scroll-content-item ui-widget-header">4</div>
+ <div class="scroll-content-item ui-widget-header">5</div>
+ <div class="scroll-content-item ui-widget-header">6</div>
+ <div class="scroll-content-item ui-widget-header">7</div>
+
+ <div class="scroll-content-item ui-widget-header">8</div>
+ <div class="scroll-content-item ui-widget-header">9</div>
+ <div class="scroll-content-item ui-widget-header">10</div>
+ <div class="scroll-content-item ui-widget-header">11</div>
+ <div class="scroll-content-item ui-widget-header">12</div>
+ <div class="scroll-content-item ui-widget-header">13</div>
+
+ <div class="scroll-content-item ui-widget-header">14</div>
+ <div class="scroll-content-item ui-widget-header">15</div>
+ </div>
+ <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
+ <div class="scroll-bar"></div>
+ </div>
+ </div>
+ </body>
+</html>
\ No newline at end of file
Added: branches/labs/scrollable/scrollable.js
==============================================================================
--- (empty file)
+++ branches/labs/scrollable/scrollable.js Tue Jun 9 13:40:27 2009
@@ -0,0 +1,122 @@
+$(function() {
+ $('.scroll-pane').scrollable();
+});
+
+(function($){
+
+$.scrollable = { eventsBound:false, scrollPanes:[] };
+$.fn.scrollable = function(){
+ return $(this).each(function(){
+ var scrollPane = $(this);
+ $.scrollable.scrollPanes[$.scrollable.scrollPanes.length] = scrollPane;
+ if (scrollPane.get(0).scrollWidth > scrollPane.get(0).clientWidth)
+ $.scrollable.init(scrollPane);
+
+ if (!$.scrollable.eventsBound) {
+ $.scrollable.eventsBound = true;
+ //change handle position on window resize
+ $(window)
+ .resize(function(){
+ $.scrollable.resetValue();
+ $.scrollable.sizeScrollbar();
+ $.scrollable.reflowContent();
+ $.scrollable.checkIfNeeded();
+ });
+ }
+ });
+}
+
+$.scrollable.init = function(scrollPane){
+ if (scrollPane.data('hasSlider') == true) return false;
+ scrollPane.data('hasSlider', true).find('.scroll-bar-wrap').show();
+ var scrollContent = scrollPane.find('.scroll-content');
+ //build slider
+ var scrollbar = scrollPane.find(".scroll-bar").slider({
+ slide:function(e, ui){
+ if( scrollContent.width() > scrollPane.width() ){
scrollContent.css('margin-left', Math.round( ui.value / 100 * (
scrollPane.width() - scrollContent.width() )) + 'px'); }
+ else { scrollContent.css('margin-left', 0); }
+ }
+ });
+
+ //append icon to handle
+ scrollbar.find('.ui-slider-handle')
+ .mousedown(function(){
+ $(this).parent().parent().width( $(this).parent().width() );
+ })
+ .mouseup(function(){
+ $(this).parent().parent().width( '100%' );
+ })
+ .append('<span class="ui-icon ui-icon-grip-dotted-vertical"></span>')
+ .wrap('<div class="ui-handle-helper-parent"></div>');
+
+ //change overflow to hidden now that slider handles the scrolling
+ scrollPane.css('overflow','hidden');
+
+ //init scrollbar size
+ setTimeout(function(){
+ $.scrollable.sizeScrollbar();
+ }, 10);//safari wants a timeout
+}
+
+//size scrollbar and handle proportionally to scroll distance
+$.scrollable.sizeScrollbar = function(){
+ for (var i=0;i<$.scrollable.scrollPanes.length;i++) {
+ var scrollPane = $.scrollable.scrollPanes[i];
+ if (scrollPane.data('hasSlider')) {
+ var scrollContent = scrollPane.find('.scroll-content');
+ var remainder = scrollContent.width() - scrollPane.width();
+ var proportion = remainder / scrollContent.width();
+ var handleSize = scrollPane.width() - (proportion * scrollPane.width());
+ scrollPane.find(".scroll-bar").find('.ui-slider-handle').css({
+ width: handleSize,
+ 'margin-left': -handleSize/2
+ });
+ scrollPane.find('.ui-handle-helper-parent').width('').width(
scrollPane.find(".scroll-bar").width() - handleSize);
+ }
+ }
+}
+
+//reset slider value based on scroll content position
+$.scrollable.resetValue = function(){
+ for (var i=0;i<$.scrollable.scrollPanes.length;i++) {
+ var scrollPane = $.scrollable.scrollPanes[i];
+ if (scrollPane.data('hasSlider')) {
+ var scrollContent = scrollPane.find('.scroll-content');
+ var remainder = scrollPane.width() - scrollContent.width();
+ var leftVal = scrollContent.css('margin-left') == 'auto' ? 0 :
parseInt(scrollContent.css('margin-left'));
+ var percentage = Math.round(leftVal / remainder * 100);
+ scrollPane.find(".scroll-bar").slider("value", percentage);
+ }
+ };
+}
+
+//if the slider is 100% and window gets larger, reveal content
+$.scrollable.reflowContent = function(){
+ for (var i=0;i<$.scrollable.scrollPanes.length;i++) {
+ var scrollPane = $.scrollable.scrollPanes[i];
+ if (scrollPane.data('hasSlider')) {
+ var scrollContent = scrollPane.find('.scroll-content');
+ var showing = scrollContent.width() + parseInt(
scrollContent.css('margin-left') );
+ var gap = scrollPane.width() - showing;
+ if(gap > 0){
+ scrollContent.css('margin-left', parseInt(
scrollContent.css('margin-left') ) + gap);
+ }
+ }
+ };
+}
+
+$.scrollable.checkIfNeeded = function(){
+ for (var i=0;i<$.scrollable.scrollPanes.length;i++) {
+ var scrollPane = $.scrollable.scrollPanes[i];
+ if (scrollPane.get(0).scrollWidth > scrollPane.get(0).clientWidth) {
+ $.scrollable.init(scrollPane);
+ }
+ if (scrollPane.width() > (scrollPane.find('.scroll-content').width() +
50)){
+ scrollPane.find('.scroll-content').css('margin-left', 0);
+ scrollPane.find(".scroll-bar").slider('destroy').empty();
+ scrollPane.data('hasSlider', false);
+ }
+ }
+}
+
+})(jQuery);
\ No newline at end of file
Added:
branches/labs/scrollable/ui/css/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png
==============================================================================
Binary file. No diff available.
Added:
branches/labs/scrollable/ui/css/smoothness/images/ui-bg_flat_75_ffffff_40x100.png
==============================================================================
Binary file. No diff available.
Added:
branches/labs/scrollable/ui/css/smoothness/images/ui-bg_glass_55_fbf9ee_1x400.png
==============================================================================
Binary file. No diff available.
Added:
branches/labs/scrollable/ui/css/smoothness/images/ui-bg_glass_65_ffffff_1x400.png
==============================================================================
Binary file. No diff available.
Added:
branches/labs/scrollable/ui/css/smoothness/images/ui-bg_glass_75_dadada_1x400.png
==============================================================================
Binary file. No diff available.
Added:
branches/labs/scrollable/ui/css/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png
==============================================================================
Binary file. No diff available.
Added:
branches/labs/scrollable/ui/css/smoothness/images/ui-bg_glass_95_fef1ec_1x400.png
==============================================================================
Binary file. No diff available.
Added:
branches/labs/scrollable/ui/css/smoothness/images/ui-bg_highlight-soft_75_cccccc_1x100.png
==============================================================================
Binary file. No diff available.
Added:
branches/labs/scrollable/ui/css/smoothness/images/ui-icons_222222_256x240.png
==============================================================================
Binary file. No diff available.
Added:
branches/labs/scrollable/ui/css/smoothness/images/ui-icons_2e83ff_256x240.png
==============================================================================
Binary file. No diff available.
Added:
branches/labs/scrollable/ui/css/smoothness/images/ui-icons_454545_256x240.png
==============================================================================
Binary file. No diff available.
Added:
branches/labs/scrollable/ui/css/smoothness/images/ui-icons_888888_256x240.png
==============================================================================
Binary file. No diff available.
Added:
branches/labs/scrollable/ui/css/smoothness/images/ui-icons_cd0a0a_256x240.png
==============================================================================
Binary file. No diff available.
Added: branches/labs/scrollable/ui/css/smoothness/jquery-ui-1.7.2.custom.css
==============================================================================
--- (empty file)
+++ branches/labs/scrollable/ui/css/smoothness/jquery-ui-1.7.2.custom.css
Tue Jun 9 13:40:27 2009
@@ -0,0 +1,406 @@
+/*
+* jQuery UI CSS Framework
+* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
+* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt)
licenses.
+*/
+
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden { display: none; }
+.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
+.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0;
line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
}
+.ui-helper-clearfix:after { content: "."; display: block; height: 0;
clear: both; visibility: hidden; }
+.ui-helper-clearfix { display: inline-block; }
+/* required comment for clearfix to work in Opera \*/
+* html .ui-helper-clearfix { height:1%; }
+.ui-helper-clearfix { display:block; }
+/* end clearfix */
+.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position:
absolute; opacity: 0; filter:Alpha(Opacity=0); }
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled { cursor: default !important; }
+
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon { display: block; text-indent: -99999px; overflow: hidden;
background-repeat: no-repeat; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%;
height: 100%; }
+
+
+
+/*
+* jQuery UI CSS Framework
+* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
+* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt)
licenses.
+* To view and modify this theme, visit
http://jqueryui.com/themeroller/?ffDefault=Verdana,Arial,sans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=03_highlight_soft.png&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=02_glass.png&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=02_glass.png&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=02_glass.png&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=02_glass.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
+*/
+
+
+/* Component containers
+----------------------------------*/
+.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; }
+.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget
button { font-family: Verdana,Arial,sans-serif; font-size: 1em; }
+.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff
url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color:
#222222; }
+.ui-widget-content a { color: #222222; }
+.ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc
url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x;
color: #222222; font-weight: bold; }
+.ui-widget-header a { color: #222222; }
+
+/* Interaction states
+----------------------------------*/
+.ui-state-default, .ui-widget-content .ui-state-default { border: 1px
solid #d3d3d3; background: #e6e6e6
url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x; font-weight:
normal; color: #555555; outline: none; }
+.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited
{ color: #555555; text-decoration: none; outline: none; }
+.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus
{
border: 1px solid #999999; background: #dadada
url(images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x; font-weight:
normal; color: #212121; outline: none; }
+.ui-state-hover a, .ui-state-hover a:hover { color: #212121;
text-decoration: none; outline: none; }
+.ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid
#aaaaaa; background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png)
50% 50% repeat-x; font-weight: normal; color: #212121; outline: none; }
+.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
color: #212121; outline: none; text-decoration: none; }
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-highlight, .ui-widget-content .ui-state-highlight {border: 1px
solid #fcefa1; background: #fbf9ee
url(images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x; color:
#363636; }
+.ui-state-highlight a, .ui-widget-content .ui-state-highlight a { color:
#363636; }
+.ui-state-error, .ui-widget-content .ui-state-error {border: 1px solid
#cd0a0a; background: #fef1ec url(images/ui-bg_glass_95_fef1ec_1x400.png)
50% 50% repeat-x; color: #cd0a0a; }
+.ui-state-error a, .ui-widget-content .ui-state-error a { color: #cd0a0a; }
+.ui-state-error-text, .ui-widget-content .ui-state-error-text { color:
#cd0a0a; }
+.ui-state-disabled, .ui-widget-content .ui-state-disabled { opacity: .35;
filter:Alpha(Opacity=35); background-image: none; }
+.ui-priority-primary, .ui-widget-content .ui-priority-primary {
font-weight: bold; }
+.ui-priority-secondary, .ui-widget-content .ui-priority-secondary {
opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon { width: 16px; height: 16px; background-image:
url(images/ui-icons_222222_256x240.png); }
+.ui-widget-content .ui-icon {background-image:
url(images/ui-icons_222222_256x240.png); }
+.ui-widget-header .ui-icon {background-image:
url(images/ui-icons_222222_256x240.png); }
+.ui-state-default .ui-icon { background-image:
url(images/ui-icons_888888_256x240.png); }
+.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image:
url(images/ui-icons_454545_256x240.png); }
+.ui-state-active .ui-icon {background-image:
url(images/ui-icons_454545_256x240.png); }
+.ui-state-highlight .ui-icon {background-image:
url(images/ui-icons_2e83ff_256x240.png); }
+.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image:
url(images/ui-icons_cd0a0a_256x240.png); }
+
+/* positioning */
+.ui-icon-carat-1-n { background-position: 0 0; }
+.ui-icon-carat-1-ne { background-position: -16px 0; }
+.ui-icon-carat-1-e { background-position: -32px 0; }
+.ui-icon-carat-1-se { background-position: -48px 0; }
+.ui-icon-carat-1-s { background-position: -64px 0; }
+.ui-icon-carat-1-sw { background-position: -80px 0; }
+.ui-icon-carat-1-w { background-position: -96px 0; }
+.ui-icon-carat-1-nw { background-position: -112px 0; }
+.ui-icon-carat-2-n-s { background-position: -128px 0; }
+.ui-icon-carat-2-e-w { background-position: -144px 0; }
+.ui-icon-triangle-1-n { background-position: 0 -16px; }
+.ui-icon-triangle-1-ne { background-position: -16px -16px; }
+.ui-icon-triangle-1-e { background-position: -32px -16px; }
+.ui-icon-triangle-1-se { background-position: -48px -16px; }
+.ui-icon-triangle-1-s { background-position: -64px -16px; }
+.ui-icon-triangle-1-sw { background-position: -80px -16px; }
+.ui-icon-triangle-1-w { background-position: -96px -16px; }
+.ui-icon-triangle-1-nw { background-position: -112px -16px; }
+.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
+.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
+.ui-icon-arrow-1-n { background-position: 0 -32px; }
+.ui-icon-arrow-1-ne { background-position: -16px -32px; }
+.ui-icon-arrow-1-e { background-position: -32px -32px; }
+.ui-icon-arrow-1-se { background-position: -48px -32px; }
+.ui-icon-arrow-1-s { background-position: -64px -32px; }
+.ui-icon-arrow-1-sw { background-position: -80px -32px; }
+.ui-icon-arrow-1-w { background-position: -96px -32px; }
+.ui-icon-arrow-1-nw { background-position: -112px -32px; }
+.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
+.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
+.ui-icon-arrow-2-e-w { background-position