Kategorie: CODESCHNIPSEL 
 Datensatz Alter in Tagen 1.094
 ID 33
 Anlagedatum 27.06.2014 [13:16]
 Überschrift Schieberegler mit jquery
 Kategorie Codeschnipsel
 Filter Alle
 Status Stable
 Gesperrt Nein
 Gehört 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>&nbsp;
 
            <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



Zurück Suchen Drucken
id-switcher
    (Einträge gesamt: 1)    
Δ    
Script-Laufzeit: 0.086865 Sek.     gelesene Files: 7     SQL-Laufzeit: 0.084159 Sek.    Gesamtbesuche :21.104   Heute :1.978  5.6.29-nmm1