switch-button/demo.html at master · masterx2/switch-button · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>
<head>
    <title>Switch Button DEMO</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/switch-button.css"/>
    <link rel="stylesheet" href="css/highlighter-default.css"/>
    <link rel="stylesheet" href="css/demo.css"/>
    <script src="js/jquery-2.1.1.js"></script>
    <script src="js/highlight.min.js"></script>
    <script src="js/jquery.easing-1.3.js"></script>
    <script src="js/jquery.switchButton.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
    <div id="wrap">
        <h1>Switch Button DEMO <small>[selectbox]</small></h1>
        <p>Берём стандартный SelectBox:</p>
        <p>
            <select>
                <option value="1">Item One</option>
                <option value="1">Item Two</option>
                <option value="1">Item Three</option>
                <option value="1" selected>Item Four</option>
            </select>
        </p>
        <pre><code class="html">
    &lt;select class='btn-switch'&gt;
        &lt;option value=&quot;1&quot;&gt;Item One&lt;/option&gt;
        &lt;option value=&quot;2&quot;&gt;Item Two&lt;/option&gt;
        &lt;option value=&quot;3&quot;&gt;Item Three&lt;/option&gt;
        &lt;option value=&quot;4&quot; selected&gt;Item four&lt;/option&gt;
    &lt;/select&gt;
        </code></pre>
        <p>Хреначим плагин по селектору:</p>
        <pre><code class="javascript">
    $('.btn-switch').switchButton();
        </code></pre>
        <p>Вешаем чутка стилей:</p>
        <pre><code class="css">
    .switch-select {
        overflow: hidden;
        border-radius: 3px;
    }
    .switch-select-button {
        text-align: center;
        font-size: 80%;
        padding: 5px;
        cursor: pointer;
        background: rgb(224, 224, 224);
    }
    .switch-select-button:hover {
        background: rgb(207, 55, 55);
        color: white;
    }
        </code></pre>
        <p>И громоздкий <b>selectbox</b> превращается в элегантную кнопку с индикатором состояния:</p>
        <p>
            <select class='btn-switch'>
                <option value="1">Item One</option>
                <option value="2">Item Two</option>
                <option value="3">Item Three</option>
                <option value="4" selected>Item Four</option>
            </select>
        </p>
        <script>$('.btn-switch').switchButton();</script>
        <p class="magic">Магия блять..</p>
        <hr/>
        <h4>Дополнительные параметры</h4>
        <table class="opt-table">
            <thead>
                <tr>
                    <th>Опция</th>
                    <th>По умолчанию</th>
                    <th>Описание</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>template</td>
                    <td>&lt;div&gt;&lt;/div&gt;</td>
                    <td>Шаблон элемента в который будет преобразован selectbox</td>
                </tr>
                <tr>
                    <td>class</td>
                    <td>switch-select</td>
                    <td>Класс элемента</td>
                </tr>
                <tr>
                    <td>innerclass</td>
                    <td>switch-select-button</td>
                    <td>Класс кнопки</td>
                </tr>
                <tr>
                    <td>width</td>
                    <td>Ширина родительского selectbox'a</td>
                    <td>Ширина элемента</td>
                </tr>
                <tr>
                    <td>marker</td>
                    <td>#3577EE</td>
                    <td>Цвет индикатора</td>
                </tr>
                <tr>
                    <td>markerback</td>
                    <td>#B9B9B9</td>
                    <td>Цвет подложки индикатора</td>
                </tr>
                <tr>
                    <td>markerh</td>
                    <td>4px</td>
                    <td>Высота индикатора</td>
                </tr>
                <tr>
                    <td>onchange</td>
                    <td>function(value){}</td>
                    <td>Callback функуция при выборе элемента, в качестве аргумента возвращает value значение выбанной опции</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>