Kategorie:¬†CODESCHNIPSEL 

    (Einträge gesamt: 7)     Seiten (7) [ «   1 2 3 4 5   » ]
Δ  

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



Details und Downloads >>>
Suchen
id-switcher
    (Einträge gesamt: 7)     Seiten (7) [ «   1 2 3 4 5   » ]
Δ    
Script-Laufzeit: 0.14177 Sek.     gelesene Files: 6     SQL-Laufzeit: 0.139369 Sek.    Gesamtbesuche :6.158   Heute :1.825  5.6.29-nmm1