Gracias, Wikipedia.
ShareCode
Permalink: http://www.treeweb.es/u/974/ 01/02/2011

ShareCode

1 <!doctype html>2  3 <html lang="en">4 <head>5  <meta charset="utf-8" />6  <title>jQuery UI Slider - Slider scrollbar</title>7  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />8  <script src="http://code.jquery.com/jquery-1.8.2.js"></script>9  <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>10  <link rel="stylesheet" href="/resources/demos/style.css" />11  <style>12  .scroll-pane { overflow: auto; width: 99%; float:left; }13  .scroll-content { width: 2440px; float: left; }14  .scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; }15  * html .scroll-content-item { display: inline; } /* IE6 float double margin bug */16  .scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; }17  .scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto; }18  .scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; }19  .scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; }20  .scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; }21  </style>22  <script>23  $(function() {24  //scrollpane parts25  var scrollPane = $( ".scroll-pane" ),26  scrollContent = $( ".scroll-content" );27  28  //build slider29  var scrollbar = $( ".scroll-bar" ).slider({30  slide: function( event, ui ) {31  if ( scrollContent.width() > scrollPane.width() ) {32  scrollContent.css( "margin-left", Math.round(33  ui.value / 100 * ( scrollPane.width() - scrollContent.width() )34  ) + "px" );35  } else {36  scrollContent.css( "margin-left", 0 );37  }38  }39  });40  41  //append icon to handle42  var handleHelper = scrollbar.find( ".ui-slider-handle" )43  .mousedown(function() {44  scrollbar.width( handleHelper.width() );45  })46  .mouseup(function() {47  scrollbar.width( "100%" );48  })49  .append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" )50  .wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();51  52  //change overflow to hidden now that slider handles the scrolling53  scrollPane.css( "overflow", "hidden" );54  55  //size scrollbar and handle proportionally to scroll distance56  function sizeScrollbar() {57  var remainder = scrollContent.width() - scrollPane.width();58  var proportion = remainder / scrollContent.width();59  var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );60  scrollbar.find( ".ui-slider-handle" ).css({61  width: handleSize,62  "margin-left": -handleSize / 263  });64  handleHelper.width( "" ).width( scrollbar.width() - handleSize );65  }66  67  //reset slider value based on scroll content position68  function resetValue() {69  var remainder = scrollPane.width() - scrollContent.width();70  var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 :71  parseInt( scrollContent.css( "margin-left" ) );72  var percentage = Math.round( leftVal / remainder * 100 );73  scrollbar.slider( "value", percentage );74  }75  76  //if the slider is 100% and window gets larger, reveal content77  function reflowContent() {78  var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 );79  var gap = scrollPane.width() - showing;80  if ( gap > 0 ) {81  scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap );82  }83  }84  85  //change handle position on window resize86  $( window ).resize(function() {87  resetValue();88  sizeScrollbar();89  reflowContent();90  });91  //init scrollbar size92  setTimeout( sizeScrollbar, 10 );//safari wants a timeout93  });94  </script>95 </head>96 <body>97  98 <div class="scroll-pane ui-widget ui-widget-header ui-corner-all">99  <div class="scroll-content">100  <div class="scroll-content-item ui-widget-header">1</div>101  <div class="scroll-content-item ui-widget-header">2</div>102  <div class="scroll-content-item ui-widget-header">3</div>103  <div class="scroll-content-item ui-widget-header">4</div>104  <div class="scroll-content-item ui-widget-header">5</div>105  <div class="scroll-content-item ui-widget-header">6</div>106  <div class="scroll-content-item ui-widget-header">7</div>107  <div class="scroll-content-item ui-widget-header">8</div>108  <div class="scroll-content-item ui-widget-header">9</div>109  <div class="scroll-content-item ui-widget-header">10</div>110  <div class="scroll-content-item ui-widget-header">11</div>111  <div class="scroll-content-item ui-widget-header">12</div>112  <div class="scroll-content-item ui-widget-header">13</div>113  <div class="scroll-content-item ui-widget-header">14</div>114  <div class="scroll-content-item ui-widget-header">15</div>115  <div class="scroll-content-item ui-widget-header">16</div>116  <div class="scroll-content-item ui-widget-header">17</div>117  <div class="scroll-content-item ui-widget-header">18</div>118  <div class="scroll-content-item ui-widget-header">19</div>119  <div class="scroll-content-item ui-widget-header">20</div>120  </div>121  <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">122  <div class="scroll-bar"></div>123  </div>124 </div>125  126  127 </body>128 </html>


Este ShareCode tiene versiones:
  1. jQuery UI Slider - Slider ... (24/04/2013)
  2. jQuery UI Slider - Slider ... (24/04/2013)
  3. jQuery UI Slider - Slider ... (24/04/2013)
  4. jQuery UI Slider - Slider ... (24/04/2013)
Enlace
El enlace para compartir es: