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>
|
---|