[24421] | 1 | <!DOCTYPE html>
|
---|
| 2 | <html lang="en">
|
---|
| 3 | <head>
|
---|
| 4 | <meta charset="utf-8">
|
---|
| 5 | <title>jQuery UI Slider - Slider scrollbar</title>
|
---|
| 6 | <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
---|
| 7 | <script src="../../jquery-1.6.2.js"></script>
|
---|
| 8 | <script src="../../ui/jquery.ui.core.js"></script>
|
---|
| 9 | <script src="../../ui/jquery.ui.widget.js"></script>
|
---|
| 10 | <script src="../../ui/jquery.ui.mouse.js"></script>
|
---|
| 11 | <script src="../../ui/jquery.ui.slider.js"></script>
|
---|
| 12 | <link rel="stylesheet" href="../demos.css">
|
---|
| 13 | <style>
|
---|
| 14 | #demo-frame > div.demo { padding: 10px !important; }
|
---|
| 15 | .scroll-pane { overflow: auto; width: 99%; float:left; }
|
---|
| 16 | .scroll-content { width: 2440px; float: left; }
|
---|
| 17 | .scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; }
|
---|
| 18 | * html .scroll-content-item { display: inline; } /* IE6 float double margin bug */
|
---|
| 19 | .scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; }
|
---|
| 20 | .scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto; }
|
---|
| 21 | .scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; }
|
---|
| 22 | .scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; }
|
---|
| 23 | .scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; }
|
---|
| 24 | </style>
|
---|
| 25 | <script>
|
---|
| 26 | $(function() {
|
---|
| 27 | //scrollpane parts
|
---|
| 28 | var scrollPane = $( ".scroll-pane" ),
|
---|
| 29 | scrollContent = $( ".scroll-content" );
|
---|
| 30 |
|
---|
| 31 | //build slider
|
---|
| 32 | var scrollbar = $( ".scroll-bar" ).slider({
|
---|
| 33 | slide: function( event, ui ) {
|
---|
| 34 | if ( scrollContent.width() > scrollPane.width() ) {
|
---|
| 35 | scrollContent.css( "margin-left", Math.round(
|
---|
| 36 | ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
|
---|
| 37 | ) + "px" );
|
---|
| 38 | } else {
|
---|
| 39 | scrollContent.css( "margin-left", 0 );
|
---|
| 40 | }
|
---|
| 41 | }
|
---|
| 42 | });
|
---|
| 43 |
|
---|
| 44 | //append icon to handle
|
---|
| 45 | var handleHelper = scrollbar.find( ".ui-slider-handle" )
|
---|
| 46 | .mousedown(function() {
|
---|
| 47 | scrollbar.width( handleHelper.width() );
|
---|
| 48 | })
|
---|
| 49 | .mouseup(function() {
|
---|
| 50 | scrollbar.width( "100%" );
|
---|
| 51 | })
|
---|
| 52 | .append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" )
|
---|
| 53 | .wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();
|
---|
| 54 |
|
---|
| 55 | //change overflow to hidden now that slider handles the scrolling
|
---|
| 56 | scrollPane.css( "overflow", "hidden" );
|
---|
| 57 |
|
---|
| 58 | //size scrollbar and handle proportionally to scroll distance
|
---|
| 59 | function sizeScrollbar() {
|
---|
| 60 | var remainder = scrollContent.width() - scrollPane.width();
|
---|
| 61 | var proportion = remainder / scrollContent.width();
|
---|
| 62 | var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );
|
---|
| 63 | scrollbar.find( ".ui-slider-handle" ).css({
|
---|
| 64 | width: handleSize,
|
---|
| 65 | "margin-left": -handleSize / 2
|
---|
| 66 | });
|
---|
| 67 | handleHelper.width( "" ).width( scrollbar.width() - handleSize );
|
---|
| 68 | }
|
---|
| 69 |
|
---|
| 70 | //reset slider value based on scroll content position
|
---|
| 71 | function resetValue() {
|
---|
| 72 | var remainder = scrollPane.width() - scrollContent.width();
|
---|
| 73 | var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 :
|
---|
| 74 | parseInt( scrollContent.css( "margin-left" ) );
|
---|
| 75 | var percentage = Math.round( leftVal / remainder * 100 );
|
---|
| 76 | scrollbar.slider( "value", percentage );
|
---|
| 77 | }
|
---|
| 78 |
|
---|
| 79 | //if the slider is 100% and window gets larger, reveal content
|
---|
| 80 | function reflowContent() {
|
---|
| 81 | var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 );
|
---|
| 82 | var gap = scrollPane.width() - showing;
|
---|
| 83 | if ( gap > 0 ) {
|
---|
| 84 | scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap );
|
---|
| 85 | }
|
---|
| 86 | }
|
---|
| 87 |
|
---|
| 88 | //change handle position on window resize
|
---|
| 89 | $( window ).resize(function() {
|
---|
| 90 | resetValue();
|
---|
| 91 | sizeScrollbar();
|
---|
| 92 | reflowContent();
|
---|
| 93 | });
|
---|
| 94 | //init scrollbar size
|
---|
| 95 | setTimeout( sizeScrollbar, 10 );//safari wants a timeout
|
---|
| 96 | });
|
---|
| 97 | </script>
|
---|
| 98 | </head>
|
---|
| 99 | <body>
|
---|
| 100 |
|
---|
| 101 | <div class="demo">
|
---|
| 102 |
|
---|
| 103 | <div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
|
---|
| 104 | <div class="scroll-content">
|
---|
| 105 | <div class="scroll-content-item ui-widget-header">1</div>
|
---|
| 106 | <div class="scroll-content-item ui-widget-header">2</div>
|
---|
| 107 | <div class="scroll-content-item ui-widget-header">3</div>
|
---|
| 108 | <div class="scroll-content-item ui-widget-header">4</div>
|
---|
| 109 | <div class="scroll-content-item ui-widget-header">5</div>
|
---|
| 110 | <div class="scroll-content-item ui-widget-header">6</div>
|
---|
| 111 | <div class="scroll-content-item ui-widget-header">7</div>
|
---|
| 112 | <div class="scroll-content-item ui-widget-header">8</div>
|
---|
| 113 | <div class="scroll-content-item ui-widget-header">9</div>
|
---|
| 114 | <div class="scroll-content-item ui-widget-header">10</div>
|
---|
| 115 | <div class="scroll-content-item ui-widget-header">11</div>
|
---|
| 116 | <div class="scroll-content-item ui-widget-header">12</div>
|
---|
| 117 | <div class="scroll-content-item ui-widget-header">13</div>
|
---|
| 118 | <div class="scroll-content-item ui-widget-header">14</div>
|
---|
| 119 | <div class="scroll-content-item ui-widget-header">15</div>
|
---|
| 120 | <div class="scroll-content-item ui-widget-header">16</div>
|
---|
| 121 | <div class="scroll-content-item ui-widget-header">17</div>
|
---|
| 122 | <div class="scroll-content-item ui-widget-header">18</div>
|
---|
| 123 | <div class="scroll-content-item ui-widget-header">19</div>
|
---|
| 124 | <div class="scroll-content-item ui-widget-header">20</div>
|
---|
| 125 | </div>
|
---|
| 126 | <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
|
---|
| 127 | <div class="scroll-bar"></div>
|
---|
| 128 | </div>
|
---|
| 129 | </div>
|
---|
| 130 |
|
---|
| 131 | </div><!-- End demo -->
|
---|
| 132 |
|
---|
| 133 |
|
---|
| 134 |
|
---|
| 135 | <div class="demo-description">
|
---|
| 136 | <p>Use a slider to manipulate the positioning of content on the page. In this case, it acts as a scrollbar with the potential to capture values if needed.</p>
|
---|
| 137 | </div><!-- End demo-description -->
|
---|
| 138 |
|
---|
| 139 | </body>
|
---|
| 140 | </html>
|
---|