Stylowa strona ustawień jQuery

26 sierpnia, 2012 w kategoriach: Web developing, Ajax, JavaScript, Jquery, Inne

chbpksm
4,678 1
Dane:
  • Czas pracy: 10min
  • Poziom: Średnio zaawansowany
Opis:

W tym tutorialu chciałbym przedstawić jak zrobić stylową stronę z ustawieniami, w której są "wysuwane" opcje.. Wykorzystamy w tym tutorialu bibliotekę jQuery.

Pokaż/Ukryj wszystko

Mamy tutaj stylową stronę z ustawieniami, oto demo ze strony http://www.script-tutorials.com/


Wydawnictwo Strefa Kursów

W HTML najpierw musimy dać linki do naszych bibliotek jQuery i plików CSS w pliku index</p>

<!-- Link styles -->
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet"  href="jquery.mobile/jquery.mobile-1.1.1.min.css" />
<!-- Link scripts -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="jquery.mobile/jquery.mobile-1.1.1.min.js"></script>
<form action="index.php" method="post" data-ajax="false">
    <div class="ui-body ui-body-c">
        <h2>How to create a stylish setting page</h2>

        <!-- Text input fields -->
        <div data-role="fieldcontain">
         <label for="text-p-1">Param 1:</label>
         <input type="text" name="text-p-1" id="text-p-1" value="" data-mini="true" />
        </div>

        <div data-role="fieldcontain">
         <label for="text-p-2">Param 2:</label>
         <input type="text" name="text-p-2" id="text-p-2" value="" data-mini="true" />
        </div>

        <!-- Basic settings switcher -->
        <div data-role="fieldcontain">
            <label for="basic_settings">Show basic settings:</label>
            <select name="basic_settings" id="basic_settings" data-role="slider" data-mini="true">
                <option value="off">Off</option>
                <option value="on">On</option>
            </select>
        </div>

        <!-- Basic settings - hidden section -->
        <div class="ui-body ui-body-c hidden_basic_settings" style="display:none">

            <!-- Text input fields -->
            <div data-role="fieldcontain">
             <label for="text-1">Text Input 1:</label>
             <input type="text" name="text-1" id="text-1" value="" data-mini="true" />
            </div>

            <div data-role="fieldcontain">
             <label for="text-2">Text Input 2:</label>
             <input type="text" name="text-2" id="text-2" value="" data-mini="true" />
            </div>

            <!-- Switch selector field -->
            <div data-role="fieldcontain">
                <label for="switch">Switch selector:</label>
                <select name="switch" id="switch" data-role="slider" data-mini="true">
                    <option value="off">Off</option>
                    <option value="on">On</option>
                </select>
            </div>

            <!-- Slider field -->
            <div data-role="fieldcontain">
                <label for="slider">Slider:</label>
                <input type="range" name="slider" id="slider" value="0" min="0" max="100" data-mini="true" />
            </div>

        </div>

        <!-- Advanced settings switcher -->
        <div data-role="fieldcontain">
            <label for="advanced_settings">Show advanced settings:</label>
            <select name="advanced_settings" id="advanced_settings" data-role="slider" data-mini="true">
                <option value="off">Off</option>
                <option value="on">On</option>
            </select>
        </div>

        <!-- Advanced settings - hidden section -->
        <div class="ui-body ui-body-c hidden_advanced_settings" style="display:none">

            <!-- Multiple checkboxes -->
            <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                <legend>Multiple checkboxes:</legend>
                <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
                <label for="checkbox-1">Checkbox 1</label>

                <input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
                <label for="checkbox-2">Checkbox 2</label>

                <input type="checkbox" name="checkbox-3" id="checkbox-3" class="custom" />
                <label for="checkbox-3">Checkbox 3</label>
            </fieldset>
            </div>

            <!-- Radio buttons -->
            <div data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-mini="true">
                    <legend>Radio buttons:</legend>
                        <input type="radio" name="radio-1" id="radio-1" value="1" />
                        <label for="radio-1">Radio 1</label>

                        <input type="radio" name="radio-1" id="radio-2" value="2"  />
                        <label for="radio-2">Radio 2</label>

                        <input type="radio" name="radio-1" id="radio-3" value="3"  />
                        <label for="radio-3">Radio 3</label>

                        <input type="radio" name="radio-1" id="radio-4" value="4"  />
                        <label for="radio-4">Radio 4</label>
                </fieldset>
            </div>

            <!-- Selector -->
            <div data-role="fieldcontain">
                <label for="select" class="select">Selector:</label>
                <select name="select" id="select" data-native-menu="false" data-mini="true">
                    <option value="value1">Option 1</option>
                    <option value="value2">Option 2</option>
                    <option value="value3">Option 3</option>
                    <option value="value4">Option 4</option>
                    <option value="value5">Option 5</option>
                </select>
            </div>

        </div>

        <!-- Buttons -->
        <fieldset class="ui-grid-a">
            <div class="ui-block-a"><button type="submit" data-theme="b" data-mini="true">Submit</button></div>
            <div class="ui-block-b"><button type="cancel" data-theme="c" data-mini="true">Cancel</button></div>
        </fieldset>
    </div>
</form>

Jak widzicie mamy elementy text fields, switch selector, slider, multiple checkboxes, radio buttons, selector i buttons. Podzieliliśmy je na 2 sekcje hidden_basic_settings and hidden_advanced_settings. Obydwie sekcje w formie standardowej są niewidoczne jak widać na demo (display:none) . Użyjemy przełączników do tego aby te opcje włączać i wyłączać czyli robić jako widoczne i niewidoczne. Jest to bardzo atrakcyjne gdyż po klinięciu rowijamy te opcje, dość ładnie się to prezentuje, co widać na demo w kroku pierwszym.

Musimy w tym celu dodać kod JavaScript

    $(document).ready(function() { 
        $('#basic_settings').change(function(event, ui) {
            if ($(this).attr('value') == 'on') {
                $('.hidden_basic_settings').slideDown(500);
            } else {
                $('.hidden_basic_settings').slideUp(500);
            }
        });
        $('#advanced_settings').change(function(event, ui) {
            if ($(this).attr('value') == 'on') {
                $('.hidden_advanced_settings').slideDown(500);
            } else {
                $('.hidden_advanced_settings').slideUp(500);
            }
        });
    });

Aby pobrać pliki trzeba wejść na stronę źródłową tutoriala tam mamy pliki do pobrania. Podziękowania dla strony http://www.script-tutorials.com za udostępnienie tutoriala.

Pokaż/Ukryj wszystko

Tutorial się podobał? Podziel się z innymi:

Dyskusja (1 wypowiedź)

Dodaj odpowiedź

Dodaj komentarz