17.04.2024 [00:13] 
Kategorie: CODESCHNIPSEL
Schieberegler mit jquery
27.06.2014 [13:16] (Matthias Nitzschke)Um mit jquery einen Schieberegler zu erstellen bedarf es nicht viel. Man muss sich nur die passenden JS und CSS-Dateien herunterladen.
Der Code unten erstellt ein Formular mit einem Schieberegler und erlaubt es die Werte des Reglers nach dem Senden weiter zu verarbeiten.
Ob ein Rangeslider oder einfacher Slider ist ebenfalls einstellbar. Übergeben wird die $_POST Variable amount, die entweder eine Zahl oder ein durch Komma getrenntes Array wiedergibt.
Code 11
<?PHP session_start(); // einen Rangeslider oder single slider zeigen $config['is_range'] = 1; $config['jquery_path'] = 'inventar/js/jquery/'; $config['slider_min'] = 0; $config['slider_max'] = 450; $config['slider_step'] = 5; $config['slider_startwert'] = 120; // bei rangeslider von wo bis wo Voreinstellung $config['slider_range'] = '75, 300'; ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="<?PHP echo $config['jquery_path']; ?>css/jquery-ui.css" type="text/css" media="all"> <link rel="stylesheet" href="<?PHP echo $config['jquery_path']; ?>css/jquery.ui.theme.css" type="text/css" media="all"> <script type="text/javascript" src="<?PHP echo $config['jquery_path']; ?>jquery-1.4.4.min.js"></script> <script src="<?PHP echo $config['jquery_path']; ?>jquery-ui.min.js" type="text/javascript"></script> <style type="text/css"> body { background-color : #D1D4D4; font-family : Tahoma,Calibri,Verdana,Geneva,sans-serif; color : #000000; } .klein { width : 120px; height : 30px; margin-left : 15px; margin-bottom : 1px; } div.anzeige { display : block; border-left : 1px solid #999999; border-right : 1px solid #999999; border-bottom : 1px solid #999999; margin-bottom : 0.5em; font-size : 8pt; font-family : Tahoma,Calibri,Verdana,Geneva,sans-serif; font-weight : normal; text-decoration : none; background-color : white; clear : both; min-height : 484px; padding : 1em; } </style> </head> <body> <?PHP if($config['is_range'] == 0) { ?> <script type="text/javascript"> $(function() { $( "#slider-range-max" ).slider({ range: "max", min: <?PHP echo $config['slider_min']; ?>, max: <?PHP echo $config['slider_max']; ?>, value: <?PHP echo $config['slider_startwert']; ?>, step: <?PHP echo $config['slider_step']; ?>, slide: function( event, ui ) { $( "#amount" ).val( ui.value ); } }); $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) ); }); </script> <?PHP } else { ?> <script type="text/javascript"> $(function() { $( "#slider-range-max" ).slider( { range: true, min: <?PHP echo $config['slider_min']; ?>, max: <?PHP echo $config['slider_max']; ?>, values: [ <?PHP echo $config['slider_range']; ?> ], step: <?PHP echo $config['slider_step']; ?>, slide: function( event, ui ) { $( "#amount" ).val( ui.values[ 0 ] + "," + ui.values[ 1 ] ); } }); $( "#amount" ).val( $( "#slider-range-max" ).slider( "values", 0 ) + "," + $( "#slider-range-max" ).slider( "values", 1 ) ); }); </script> <?PHP } if(!isset($_POST['senden']) or ($_POST['senden'] == "")) { ?> <div class="anzeige"> <form method="POST" action="<?PHP echo $_SERVER['SCRIPT_NAME']; ?>"> <label for="amount" class="klein">PS</label> <input type="text" id="amount" name="amount" style="border:0; color:#f6931f; font-weight:bold;" /><br> <div style="margin-top:1em;float:left;"> <div class="klein"> <div id="slider-range-max"></div> </div> </div> <div style="float:left; margin-left:2em;"><input type="submit" class="buttons" name="senden" value="senden"></div> </form> </div> <?PHP } else { // mit $_POST alle Daten weiter verarbeiten echo '<pre>'; print_r($_POST); echo '</pre>'; } ?> </body> </html> <?PHP
Details und Downloads >>>
