jeudi 24 octobre 2013

slider jquery


Creating a Volume Controller with jQuery UI Slider

By . Filed in Web Design

tag to be exact.
<script src="js/jquery-1.7.2.min.js"></script>   
<script src="js/jquery-ui-1.8.21.custom.min.js"></script>  

Step 2: HTML markup

The markup for the slider is very simple, we wrapped all necessary markup – the tooltip, the slider, and the volume – inside an HTML5 section tag. The jQuery UI will then automatically generate the rest.
<section>    
    <span class="tooltip"></span>    
    <div id="slider"></div>   
    <span class="volume"></span>   
</section>  

Step 3: Install the Slider UI

The snippet below will install the Slider on the page, but it applies only the default configuration.
  1. $(function() {  
  2.     $( "#slider" ).slider();  
  3. });  
So here we will enhance the slider a little by adding other configurations.
First, we store the slider element as a variable.
  1. var slider = $('#slider'),  
Then we set the minimum default value of the slider to be about 35, when it is firstly loaded.
  1. slider.slider({  
  2.     range: "min",  
  3.     value: 35,  
  4. });  
At this point, we won’t see anything on the browser yet, because the jQuery UI is basically only generating the markup. So, we need to apply some styles to start seeing the result visually on the browser.

Step 4: The Styles

Before proceeding, we need some assets from the PSD source file such as the background texture and the icon.
We will not talk about how to slice in this article, we will just focus on the code. If you aren’t sure how to slice, watch the following screencast first before proceeding.
All right, now let’s begin adding the styles.
We will start by positioning the slider at the center of the browser’s window and attach the background that we had sliced out from the PSD to the body.
  1. body {  
  2.     backgroundurl('../images/bg.jpg'repeat top left;  
  3. }  
  4. section {  
  5.     width150px;  
  6.     heightauto;  
  7.     margin100px auto 0;  
  8.     positionrelative;  
  9. }  
Next, we will apply the styles for the tooltip, the volume, the handle, the slider range and the slider itself.
We will do this part by part, starting with…

Slider

Since we did not define the maximum value for the Slider itself, the jQuery UI will apply the default; that is 100. Therefore, we can also apply 100 (px) for the slider’s width.
  1. #slider{  
  2.     border-width1px;  
  3.     border-stylesolid;  
  4.     border-color#333 #333 #777 #333;  
  5.     border-radius: 25px;  
  6.     width100px;  
  7.     positionabsolute;  
  8.     height13px;  
  9.     background-color#8e8d8d;  
  10.     backgroundurl('../images/bg-track.png'repeat top left;  
  11.   box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, .5),   
  12.                  0 1px 0 0px rgba(250, 250, 250, .5);  
  13.   left20px;  
  14. }  

Tooltip

The tooltip will be positioned above the slider by specifying its position absolutely with -25px for its top position.
  1. .tooltip {  
  2.     positionabsolute;  
  3.     displayblock;  
  4.     top: -25px;  
  5.     width35px;  
  6.     height20px;  
  7.     color#fff;  
  8.     text-aligncenter;  
  9.     font10pt TahomaArialsans-serif ;  
  10.     border-radius: 3px;  
  11.     border1px solid #333;  
  12.   box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, .3);  
  13.     box-sizing: border-box;  
  14.     background: linear-gradient(top, rgba(69,72,77,0.5) 0%,rgba(0,0,0,0.5) 100%);  
  15. }  

Volume

We have modified the volume icon a bit to meet our idea. The idea is we are going to create an effect to raise the volume bar gradually in accordance with the slider’s value. I’m sure you often seen such an effect in a media player user interface.
.volume {   
    displayinline-block;   
    width25px;   
    height25px;   
    rightright: -5px;   
    backgroundurl('../images/volume.png'no-repeat 0 -50px;   
    positionabsolute;   
    margin-top: -5px 
}  

The UI Handle

The handle’s style is quite simple; it will have an icon that looks like a metallic circle, sliced from the PSD, and attached as the background.
We will also change the cursor mode to pointer, so the user will notice that this element is drag-able.
  1. .ui-slider-handle {  
  2.     positionabsolute;  
  3.     z-index: 2;  
  4.     width25px;  
  5.     height25px;  
  6.     cursorpointer;  
  7.     backgroundurl('../images/handle.png'no-repeat 50% 50%;  
  8.     font-weightbold;  
  9.     color#1C94C4;  
  10.     outlinenone;  
  11.     top: -7px;  
  12.     margin-left: -12px;  
  13. }  

The Slider Range

The slider range will have a slightly white gradient color.
  1. .ui-slider-range {  
  2.     background: linear-gradient(top#ffffff 0%,#eaeaea 100%);  
  3.     positionabsolute;  
  4.     border: 0;  
  5.     top: 0;  
  6.     height: 100%;  
  7.     border-radius: 25px;  
  8. }  

Step 5: The Effect

In this step we are going to start working on the Slider’s special effect.

Tooltip

At this point, the tooltip has no content yet, so we are going to fill it with the slider’s value. Also, the tooltip’s horizontal position will be correspond with the handle’s position.
First of all, we store the tooltip element as a variable.
  1. var tooltip = $('.tooltip');  
Then we define the tooltip’s effect we have mentioned above inside the Slide Event.
  1. slide: function(event, ui) {   
  2. var value = slider.slider('value'),  
  3. tooltip.css('left', value).text(ui.value);  
But, we also want the tooltip to be initially hidden.
  1. tooltip.hide();  
After that, when the handle is about to start sliding, it will be shown with a fade-in effect.
  1. start: function(event,ui) {  
  2.       tooltip.fadeIn('fast');  
  3. },  
And, when the user stops sliding the handle, the tooltip will fade-out and be hidden.
  1. stop: function(event,ui) {  
  2.      tooltip.fadeOut('fast');  
  3. },  

Volume

As we have mentioned above in the Styles section, we plan the volume icon to change correspondingly with the handle’s position or to be exact, the slider’s value. So, we will apply the following conditional statement to create this effect.
But, firstly, we store the volume element as well as the slider’s value as a variable.
  1. volume = $('.volume');  
Then we start the conditional statement.
When the slider’s value is lower or equal to 5 the volume icon will have no bars at all, indicating that the volume is very low, but when the slider’s value is increasing, the volume bar will start increasing as well.
  1. if(value <= 5) {   
  2.     volume.css('background-position''0 0');  
  3. }   
  4. else if (value <= 25) {  
  5.     volume.css('background-position''0 -25px');  
  6. }   
  7. else if (value <= 75) {  
  8.     volume.css('background-position''0 -50px');  
  9. }   
  10. else {  
  11.     volume.css('background-position''0 -75px');  
  12. };  

Put them all together

All right, in case you are confused with all the above stuff, don’t be. Here is the shortcut. Put all the following codes into your document.
  1. $(function() {  
  2.   
  3.     var slider = $('#slider'),  
  4.         tooltip = $('.tooltip');  
  5.   
  6.     tooltip.hide();  
  7.   
  8.     slider.slider({  
  9.         range: "min",  
  10.         min: 1,  
  11.         value: 35,  
  12.   
  13.         start: function(event,ui) {  
  14.           tooltip.fadeIn('fast');  
  15.         },  
  16.   
  17.         slide: function(event, ui) {  
  18.   
  19.             var value = slider.slider('value'),  
  20.                 volume = $('.volume');  
  21.   
  22.             tooltip.css('left', value).text(ui.value);  
  23.   
  24.             if(value <= 5) {   
  25.                 volume.css('background-position', '0 0');  
  26.             }   
  27.             else if (value <= 25) {  
  28.                 volume.css('background-position', '0 -25px');  
  29.             }   
  30.             else if (value <= 75) {  
  31.                 volume.css('background-position', '0 -50px');  
  32.             }   
  33.             else {  
  34.                 volume.css('background-position', '0 -75px');  
  35.             };  
  36.   
  37.         },  
  38.   
  39.         stop: function(event,ui) {  
  40.           tooltip.fadeOut('fast');  
  41.         },  
  42.     });  
  43.   
  44. });  
All right, let’s now view the result in the browser.

Conclusion

Today we have successfully created a more elegant jQuery UI theme but at the same time we have also successfully translated a PSD User Interface into a functional volume controller.
We hope this tutorial inspires you and could help you understand how to turn a PSD into a more usable product.
Lastly, if you have any question regarding this tutorial, feel free to add it in the comments section below.
source 

http://www.hongkiat.com/blog/jquery-volumn-slider/

Aucun commentaire:

Enregistrer un commentaire