how to get value from this slider and how to make a new same slider?_问答_开发者

how to get value from this slider and how to make a new same slider?

开发者 https://www.devze.com 2023-03-14 05:36 出处：网络

here is the code: <html xmlns=\"http://www.w3.org/1999/xhtml\"> <head> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />

相关专题：jquery

here is the code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery UI Slider </title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 
        <style type="text/css"> 
#container{
background:url(bg.jpg)!important;
padding:100px 50px 0px 50px;
}

/*the slider background*/
.slider {
width:230px;
height:11px;
background:url(slider-bg.png);
position:relative;
margin:0;
padding:0 10px;
}

/*Style for the slider button*/
.ui-slider-handle {
width:24px;
height:24px;
position:absolute;
top:-7px;
margin-left:-12px;
z-index:200;

}

/*Result div where the slider value is displayed*/
#slider-result {
font-size:20px;
height:200px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
width:250px;
text-align:center;
text-shadow:0 1px 1px #000;
font-weight:700;
padding:20px 0;
}

/*This is the fill bar colour*/
.ui-widget-header {
background:url(fill.png) no-repeat left;
height:8px;
left:1px;
top:1px;
position:absolute;
}

a {
outline:none;
-moz-outline-style:none;
}


        </style> 
</head>
<body>




        <div class="slider"></div> 

        <div class="slider1"></div> 

        <div class="slider2"></div> 

        <div id="slider-result" value="poor">Poor</div>   
        <div id="slider-result1" value="poor">Poor</div>   
        <input type="hidden" value="poor" id="hidden"/>
        <input type="hidden1" value="poor" id="hidden"/>

           <script> 

                 $( ".slider" ).slider({
                animate: true,
                range: "min",
                value: 0,
                min: 0,
                max: 4,
                step: 1,

                //this gets a live reading of the value and prints it on the page
                slide: function( event, ui ) {
                if(ui.value ==0)
                    $( "#slider-result" ).html( "Poor");
                    else if(ui.value == 1)
                    $( "#slider-result" ).html( "Average");
                    else if(ui.value == 2)
                    $( "#slider-result" ).html( "Good");
 开发者_Python百科                   else if(ui.value == 3)
                    $( "#slider-result" ).html( " Very Good");
                    else if(ui.value == 4)
                    $( "#slider-result" ).html( "Excellent");

                },

                //this updates the hidden form field so we can submit the data using a form
                change: function(event, ui) { 
                $('#hidden').attr('value', ui.value);

                }

                });


        </script> 




</body>
</html>

How to get the value of selected slider? Since it is hidden when i get the value using var currentValue = $('#hidden').val();, I get an object as return value. i could not get that value... any help and also want to make a new same slider in <div class="slider1"></div> to make it?

Any idea?

Not exactly sure about that second part. Could you be a little clearer?

On the value bit you could try $(selector).attr('value').

you can clone an element in jquery with clone(), like $("#whatever").clone().appendTo("#container") would clone the element with id 'whatever' and insert it at the end of element 'container' (which could be a <div> for example)