source: branches/version-2_13-dev/html/user_data/packages/admin/jquery.multiselect2side/jmultiselect2side.html @ 20116

Revision 20116, 8.1 KB checked in by nanasess, 15 years ago (diff)
  • svn properties を再設定
  • 再設定用のスクリプト追加
  • Property svn:eol-style set to LF
  • Property svn:keywords set to Id
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3
4<head profile="http://gmpg.org/xfn/11">
5    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6
7    <title>Senamion.com - multiselect2side (multiple select double side) plugin: documentation and demo page</title>
8    <link rel="stylesheet" href="css/jquery.multiselect2side.css" type="text/css" media="screen" />
9    <script type="text/javascript" src="js/jquery.js" ></script>
10    <script type="text/javascript" src="js/jquery.multiselect2side.js" ></script>
11    <script type="text/javascript">
12        $().ready(function() {
13            $('#first').multiselect2side();
14            $('#second').multiselect2side({
15                selectedPosition: 'right',
16                moveOptions: false,
17                labelsx: '',
18                labeldx: ''
19                });
20            $('#third').multiselect2side({
21                selectedPosition: 'left',
22                moveOptions: true,
23                labelTop: '+ +',
24                labelBottom: '- -',
25                labelUp: '+',
26                labelDown: '-',
27                labelsx: '* Selected *',
28                labeldx: '* Available *'
29                });
30            $('#fourth').multiselect2side({maxSelected: 4});
31        });
32    </script>
33
34
35
36
37</head>
38<body>
39
40                <h2>multiselect2side plugin: documentation and demo page</h2>
41                <h3>Demo 1 - Full demo select multiple double side</h3>
42                <p>Select multiple="multiple" modified by multiselect2side</p>
43
44                <select name="firstSelect[]" id='first' multiple='multiple' >
45                <optgroup label="Group1">
46                    <option value="1">First Option</option>
47                    <option value="2">Option 2th</option>
48                    <option value="3" SELECTED >Option selected 3</option>
49                </optgroup>
50                <optgroup label="Group2">
51                    <option value="4">Option 4</option>
52                    <option value="5">Option 5</option>
53                    <option value="6">Option 6</option>
54                    <option value="7" SELECTED >Option selected 7</option>
55                    <option value="8">Option 8</option>
56                </optgroup>
57                </select>
58
59                <p>This is the javascript code to launch multiselect2side to #first select:</p>
60                <pre>
61$().ready(function() {
62    $('#first').multiselect2side();
63});
64                </pre>
65
66                <h3>Demo 2 - select multiple double side - moveOptions: false</h3>
67                <p>Move buttons are disabled. Header label not present.</p>
68                <select name="secondSelect[]" id='second' multiple='multiple' size='8' >
69                    <option value="1">1Option 1</option>
70                    <option value="2" SELECTED >Option 2 (sel)</option>
71                    <option value="3">a Option 3</option>
72                    <option value="4" SELECTED >This Option 4 (sel)</option>
73                    <option value="5">Optaion 5</option>
74                    <option value="6">Option 6</option>
75                    <option value="7">Odption 7</option>
76                    <option value="8">Optaion 8</option>
77                    <option value="9">Optdion 9</option>
78                    <option value="10" SELECTED >Option 10 (sel)</option>
79                </select>
80
81                <p>This is the javascript code to launch multiselect2side to #second select:</p>
82                <pre>
83$().ready(function() {
84    $('#second').multiselect2side({
85        selectedPosition: 'right',
86        moveOptions: false,
87        labelsx: '',
88        labeldx: ''
89        });
90});
91                </pre>
92
93                <h3>Demo 3 - select multiple double side - selectedPosition: 'left'</h3>
94                <p>Elements selected are in the left, label of move buttoms are modified.</p>
95                <select name="thirdSelect[]" id='third' multiple='multiple' size='6' >
96                    <option value="1">1Option 1</option>
97                    <option value="2" SELECTED >Option 2 (sel)</option>
98                    <option value="3">a Option 3</option>
99                    <option value="4" SELECTED >This Option 4 (sel)</option>
100                    <option value="5">Optaion 5</option>
101                    <option value="6">Option 6</option>
102                    <option value="7">Odption 7</option>
103                    <option value="8">Optaion 8</option>
104                    <option value="9">Optdion 9</option>
105                    <option value="10" SELECTED >Option 10 (sel)</option>
106                </select>
107
108                <p>This is the javascript code to launch multiselect2side to #third select:</p>
109                <pre>
110$().ready(function() {
111    $('#third').multiselect2side({
112        selectedPosition: 'left',
113        moveOptions: true,
114        labelTop: '+ +',
115        labelBottom: '- -',
116        labelUp: '+',
117        labelDown: '-',
118        labelsx: '* Selected *',
119        labeldx: '* Available *'
120        });
121});
122                </pre>
123
124                <h3>Demo 4 - Select multiple double side with limited number of selectionable options</h3>
125                <p>Select multiple="multiple" with parameter maxSelected, selectionable options limited to 4</p>
126
127                <select name="fourthSelect[]" id='fourth' multiple='multiple' >
128                    <option value="1">First Option</option>
129                    <option value="2">Option 2th</option>
130                    <option value="3" SELECTED >Option selected 3</option>
131                    <option value="4">Option 4</option>
132                    <option value="5">Option 5</option>
133                    <option value="6">Option 6</option>
134                    <option value="7" SELECTED >Option selected 7</option>
135                    <option value="8">Option 8</option>
136                </select>
137
138                <p>This is the javascript code to launch multiselect2side to #first select:</p>
139                <pre>
140$().ready(function() {
141    $('#fourth').multiselect2side({maxSelected: 4});
142});
143                </pre>
144
145
146                <h3>Documentation</h3>
147
148                <p>
149                To use this jquery plugin:<br />
150                <ul>
151                <li>
152                include the js in the head section of the page:
153                <pre>
154&lt;head&gt;
155...
156&lt;link rel="stylesheet" href="css/jquery.multiselect2side.css" type="text/css" media="screen" /&gt;
157
158&lt;script type="text/javascript" src="js/jquery.js" &gt;&lt;/script&gt;
159&lt;script type="text/javascript" src="js/jquery.multiselect2side.js" &gt;&lt;/script&gt;
160...
161&lt;/head&gt;
162                </pre>
163                </li>
164                <li>
165                in the read function launch the multiselect2side (select multiple double side) relative at your element:
166                <pre>
167&lt;script type="text/javascript"&gt;
168$().ready(function() {
169    $("select").multiselect2side();
170});
171&lt;/script&gt;
172                </pre>
173                </li>
174                </ul>
175                For comments <a href="http://www.senamion.com/blog/2010/02/20/jquery-select-multiple-double-side/">see the blog page</a>.
176                </p>
177                <h4>Parameters:</h4>
178                <ul>
179                    <li>selectedPosition - position of selected elements - default 'right'</li>
180                    <li>moveOptions - show move options - default true</li>
181                    <li>labelTop - label of top buttom - default 'Top'</li>
182                    <li>labelBottom - label of bottom buttom - default 'Bottom'</li>
183                    <li>labelUp - label of up buttom - default 'Up'</li>
184                    <li>labelDown - label of down buttom - default 'Down'</li>
185                    <li>labelSort - label of sort buttom - default 'Sort'</li>
186                    <li>maxSelected - number of max selectable options</li>
187                    <li>labelsx: Left label - default '* Selected *'</li>
188                    <li>labeldx: Right label - default '* Available *'</li>
189
190                </ul>
191
192                <h3 id='download'>Download</h3>
193                <p>
194                    You can download the entire archive:
195                    <ul>
196                        <li><a href="jquery.multiselect2side.zip">jquery.multiselect2side.zip</a> - a zip archive containing the plugin source, a minified version of jQuery and a demo page.</li>
197                    </ul>
198                    Or single file:
199                    <ul>
200                        <li><a href="jquery.multiselect2side/js/jquery.multiselect2side.js">jquery.multiselect2side.js</a> - js code.</li>
201                        <li><a href="jquery.multiselect2side/css/jquery.multiselect2side.css">jquery.multiselect2side.css</a> - css code.</li>
202                    </ul>
203                </p>
204
205
206                <h3>Release</h3>
207                <p>
208                <ul>
209                    <li><strong>0.11</strong> - Aug 26 2010 - correct ie6 bug</li>
210                    <li><strong>0.10</strong> - Jul 20 2010 - correct ie8 bug (padding-top)</li>
211                    <li><strong>0.9</strong> - Jul 16 2010 - new labels button (left and right label)</li>
212                    <li><strong>0.8</strong> - May 17 2010 - new sort button (if moveOptions is true)</li>
213                    <li><strong>0.7</strong> - May 16 2010 - correct order options bug</li>
214                    <li><strong>0.6</strong> - Avr 16 2010 - correct bug with optgroup</li>
215                    <li><strong>0.5</strong> - Avr 15 2010 - Now move and updown options are vertically centered</li>
216                    <li><strong>0.4</strong> - Avr 12 2010 - New option maxSelected</li>
217                    <li><strong>0.3</strong> - Avr  1 2010 - New CSS</li>
218                    <li><strong>0.2</strong> - Mar 25 2010 - New parameters moveOptions (default true)</li>
219                    <li><strong>0.1</strong> - Mar 22 2010 - New parameters selectedPosition (default 'right')</li>
220                    <li><strong>0.0</strong> - Feb 19 2010 - First release of multiselect2side (select multiple double side)</li>
221                </ul>
222                </p>
223
224
225                <h3>License</h3>
226                <p>
227                Dual licensed under the MIT and GPL licenses.
228                </p>
229
230</body>
231</html>
Note: See TracBrowser for help on using the repository browser.