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:
- jQuery UI Slider - Slider ... (24/04/2013)
- jQuery UI Slider - Slider ... (24/04/2013)
- jQuery UI Slider - Slider ... (24/04/2013)
- jQuery UI Slider - Slider ... (24/04/2013)
Enlace
El enlace para compartir es: