Skip to content
Browse files

Replaced the new demo page with Michael's + minor bug fix

  • Loading branch information...
1 parent 3e02f33 commit cc7632034dd1390ef42fb60634d73e40c13f7900 Yanick Rochon committed May 17, 2009
Showing with 236 additions and 156 deletions.
  1. +53 −0 css/common.css
  2. +179 −152 index.html
  3. +1 −1 js/locale/ui-multiselect-en.js
  4. +1 −1 js/locale/ui-multiselect-fr.js
  5. +2 −2 js/ui.multiselect.js
View
53 css/common.css
@@ -0,0 +1,53 @@
+
+ /*
+ Copyright (c) 2007, Yahoo! Inc. All rights reserved.
+ Code licensed under the BSD License:
+ http://developer.yahoo.net/yui/license.txt
+ version: 2.2.0
+ */
+ body {font:13px 'Helvetica',arial,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}pre, code {font:115% monospace;*font-size:100%;}body * {line-height:1.22em;}
+ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}/*ol,ul {list-style:none;}*/caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;}
+
+ /* end of yahoo reset and fonts */
+
+ body {color:#333; background: #232f2e; line-height:1.3;}
+ p {margin:0 0 20px;}
+ a {color:#636363;}
+ a:hover {text-decoration:none;}
+ strong {font-weight:bold;}
+ em {font-style: italic;}
+ h1,h2,h3,h4,h5,h6 {font-weight:bold;}
+ h1 {font-size:197%; margin:30px 0; color: #4f6f6c;}
+ h2 {font-size:174%; margin:20px 0; color:#4f6f6c;}
+ h3 {font-size:152%; margin:10px 0;}
+ h4 {font-size:129%; margin:10px 0;}
+ pre {background:#eee; margin:0 0 20px; padding:20px; border:1px solid #ccc; font-size:100%; overflow:auto;}
+ code {font-size:100%; margin:0; padding:0;}
+ ul, ol {margin:10px 0 10px 25px;}
+ ol li {margin:0 0 10px;}
+
+ div#wrapper {background:#fff; width:560px; margin:0 auto; padding:20px; border:10px solid #0f1616; border-width:0 10px 10px 10px;}
+ div#header {position:relative; border-bottom:1px dotted; margin:0 0 10px; padding:0 0 10px;}
+ div#header p {margin:0; padding:0;}
+ div#header h1 {margin:0; padding:0;}
+ ul#nav {position:absolute; top:0; right:0; list-style:none; margin:0; padding:0;}
+ ul#nav li {display:inline; padding:0 0 0 5px;}
+ ul#nav li a {}
+ div#content {}
+ div#footer {margin:40px 0 0; border-top:1px dotted; padding:10px 0 0;}
+ .left {float:left;}
+ .right {float:right;}
+ .clear {clear:both;}
+
+
+ /* multiselect styles */
+ .multiselect {
+ width: 450px;
+ height: 150px;
+ }
+
+ #switcher {
+ margin-top: 20px;
+ }
+
+ form {margin: 0; padding: 0;}
View
331 index.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>jQuery UI Multiselect</title>
- <link type="text/css" rel="stylesheet" href="http://jqueryui.com/themes/base/ui.all.css" />
- <link type="text/css" href="css/ui.multiselect.css" rel="stylesheet" />
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+ <title>jQuery UI Multiselect</title>
+ <link rel="stylesheet" href="css/common.css" type="text/css" />
+ <link type="text/css" rel="stylesheet" href="http://jqueryui.com/themes/base/ui.all.css" />
+ <link type="text/css" href="css/ui.multiselect.css" rel="stylesheet" />
- <link type="text/css" href="css/page.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.localisation.js"></script>
@@ -18,150 +18,177 @@
$('#switcher').themeswitcher();
});
</script>
-
</head>
<body>
- <h1>jQuery UI Multiselect</h1>
- <p>
- is my attempt of a <em>sortable</em>, <em>searchable</em> multiple select widget. It depends on <a href="http://jquery.com/">jQuery 1.3</a> and <a href="http://jqueryui.com/">jQuery UI 1.7</a>.
- The widget is styleable using <a href="http://jqueryui.com/themeroller/" title="jQuery UI Themeroller">Themeroller</a>.
- It works in an <em>unobtrusive</em> fashion, by just turning html multiple select inputs into a sexier equivalent. There's no extra markup needed.
- </p><p>
- For installation instructions please have a look at the corresponding <a href="http://www.quasipartikel.at/2009/05/10/jqueryui-multiselect/">blogpost</a>.<br/><br/>
-
- The source code is available at <a href="http://github.com/michael/multiselect/" title="Social Coding">Github</a>.<br/><br/>
-
- If you are looking for the original version, it has been moved <a href="http://quasipartikel.at/multiselect_original/">here</a>.<br/><br/>
- </p>
-
- <h1>Demo</h1>
-
- <script type="text/javascript"
- src="http://jqueryui.com/themeroller/themeswitchertool/">
- </script>
- <div id="switcher"></div>
-
- <h2>Choose countries</h2>
- <form action="index.html">
- <select id="countries" class="multiselect" multiple="multiple" name="countries[]">
- <option value="AFG">Afghanistan</option>
- <option value="ALB">Albania</option>
- <option value="DZA">Algeria</option>
- <option value="AND">Andorra</option>
- <option value="ARG">Argentina</option>
- <option value="ARM">Armenia</option>
- <option value="ABW">Aruba</option>
- <option value="AUS">Australia</option>
- <option value="AUT" selected="selected">Austria</option>
-
- <option value="AZE">Azerbaijan</option>
- <option value="BGD">Bangladesh</option>
- <option value="BLR">Belarus</option>
- <option value="BEL">Belgium</option>
- <option value="BIH">Bosnia and Herzegovina</option>
- <option value="BRA">Brazil</option>
- <option value="BRN">Brunei</option>
- <option value="BGR">Bulgaria</option>
- <option value="CAN">Canada</option>
-
- <option value="CHN">China</option>
- <option value="COL">Colombia</option>
- <option value="HRV">Croatia</option>
- <option value="CYP">Cyprus</option>
- <option value="CZE">Czech Republic</option>
- <option value="DNK">Denmark</option>
- <option value="EGY">Egypt</option>
- <option value="EST">Estonia</option>
- <option value="FIN">Finland</option>
-
- <option value="FRA">France</option>
- <option value="GEO">Georgia</option>
- <option value="DEU" selected="selected">Germany</option>
- <option value="GRC">Greece</option>
- <option value="HKG">Hong Kong</option>
- <option value="HUN">Hungary</option>
- <option value="ISL">Iceland</option>
- <option value="IND">India</option>
- <option value="IDN">Indonesia</option>
-
- <option value="IRN">Iran</option>
- <option value="IRL">Ireland</option>
- <option value="ISR">Israel</option>
- <option value="ITA">Italy</option>
- <option value="JPN">Japan</option>
- <option value="JOR">Jordan</option>
- <option value="KAZ">Kazakhstan</option>
- <option value="KWT">Kuwait</option>
- <option value="KGZ">Kyrgyzstan</option>
-
- <option value="LVA">Latvia</option>
- <option value="LBN">Lebanon</option>
- <option value="LIE">Liechtenstein</option>
- <option value="LTU">Lithuania</option>
- <option value="LUX">Luxembourg</option>
- <option value="MAC">Macau</option>
- <option value="MKD">Macedonia</option>
- <option value="MYS">Malaysia</option>
- <option value="MLT">Malta</option>
-
- <option value="MEX">Mexico</option>
- <option value="MDA">Moldova</option>
- <option value="MNG">Mongolia</option>
- <option value="NLD" selected="selected">Netherlands</option>
- <option value="NZL">New Zealand</option>
- <option value="NGA">Nigeria</option>
- <option value="NOR">Norway</option>
- <option value="PER">Peru</option>
- <option value="PHL">Philippines</option>
-
- <option value="POL">Poland</option>
- <option value="PRT">Portugal</option>
- <option value="QAT">Qatar</option>
- <option value="ROU">Romania</option>
- <option value="RUS">Russia</option>
- <option value="SMR">San Marino</option>
- <option value="SAU">Saudi Arabia</option>
- <option value="CSG">Serbia and Montenegro</option>
- <option value="SGP">Singapore</option>
-
- <option value="SVK">Slovakia</option>
- <option value="SVN">Slovenia</option>
- <option value="ZAF">South Africa</option>
- <option value="KOR">South Korea</option>
- <option value="ESP">Spain</option>
- <option value="LKA">Sri Lanka</option>
- <option value="SWE">Sweden</option>
- <option value="CHE">Switzerland</option>
- <option value="SYR">Syria</option>
-
- <option value="TWN">Taiwan</option>
- <option value="TJK">Tajikistan</option>
- <option value="THA">Thailand</option>
- <option value="TUR">Turkey</option>
- <option value="TKM">Turkmenistan</option>
- <option value="UKR">Ukraine</option>
- <option value="ARE">United Arab Emirates</option>
- <option value="GBR">United Kingdom</option>
- <option value="USA" selected="selected">United States</option>
-
- <option value="UZB">Uzbekistan</option>
- <option value="VAT">Vatican City</option>
- <option value="VNM">Vietnam</option>
- </select>
- </form>
- <h1>Credits</h1>
- <p>My name is <em>Michael Aufreiter</em>. Neither I have a website nor I have my own blog yet.
- Fortunately, I'm a member of <a href="http://www.quasipartikel.at">Quasipartikel</a>, a small
- office for data throwing affairs. We're based in Linz / Upper Austria and our website should be online pretty soon.
- So all fame should go there.
- </p>
- <h1>Misc</h1>
- <p>
- There are no limitations - Do whatever you want with this plugin.
- If you did some nice modifications, just let me know (via Github). I'd be happy to include them.
- </p>
- <a title="Clicky Web Analytics" href="http://getclicky.com/90161"><img alt="Clicky Web Analytics" src="http://static.getclicky.com/media/links/badge.gif" border="0" /></a>
- <script src="http://static.getclicky.com/90161.js" type="text/javascript"></script>
- <noscript><p><img alt="Clicky" width="1" height="1" src="http://static.getclicky.com/90161-db11.gif" /></p></noscript>
-</body>
+<a href="http://github.com/michael/multiselect"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub" /></a>
+
+<div id="wrapper">
+ <div id="header">
+ <h1>jQuery UI Multiselect</h1>
+ <p>
+ Another attempt of a <em>sortable</em>, <em>searchable</em> multiple select widget
+ </p>
+
+ <ul id="nav">
+ <li><a href="http://quasipartikel.at/2009/05/10/jqueryui-multiselect/">Blogpost</a></li>
+ <li><a href="http://github.com/michael/multiselect">Source</a></li>
+ <li><a href="http://github.com/michael/multiselect/issues">Bugs</a></li>
+ </ul>
+ </div>
+
+ <div id="content">
+ <p>
+ It depends on <a href="http://jquery.com/">jQuery 1.3</a> and <a href="http://jqueryui.com/">jQuery UI 1.7</a>.
+ The widget is styleable using <a href="http://jqueryui.com/themeroller/" title="jQuery UI Themeroller">Themeroller</a>.
+ It works in an <em>unobtrusive</em> fashion, by just turning html multiple select inputs into a sexier equivalent. There's no extra markup needed.
+ </p>
+
+ <ul>
+ <li>For installation instructions please have a look at the corresponding <a href="http://www.quasipartikel.at/2009/05/10/jqueryui-multiselect/">blogpost</a></li>
+ <li>Source code is available at <a href="http://github.com/michael/multiselect/" title="Social Coding">Github</a></li>
+ <li>In case you are looking for the original version, it has been moved <a href="http://quasipartikel.at/multiselect_original/">here</a></li>
+ <li>Bleeding Edge Demo is always available <a href="http://michael.github.com/multiselect">here</a> (thanks to Github Pages)</li>
+ </ul><br/>
+
+ <form action="index.html">
+ <select id="countries" class="multiselect" multiple="multiple" name="countries[]">
+ <option value="AFG">Afghanistan</option>
+ <option value="ALB">Albania</option>
+ <option value="DZA">Algeria</option>
+ <option value="AND">Andorra</option>
+ <option value="ARG">Argentina</option>
+ <option value="ARM">Armenia</option>
+ <option value="ABW">Aruba</option>
+ <option value="AUS">Australia</option>
+ <option value="AUT" selected="selected">Austria</option>
+
+ <option value="AZE">Azerbaijan</option>
+ <option value="BGD">Bangladesh</option>
+ <option value="BLR">Belarus</option>
+ <option value="BEL">Belgium</option>
+ <option value="BIH">Bosnia and Herzegovina</option>
+ <option value="BRA">Brazil</option>
+ <option value="BRN">Brunei</option>
+ <option value="BGR">Bulgaria</option>
+ <option value="CAN">Canada</option>
+
+ <option value="CHN">China</option>
+ <option value="COL">Colombia</option>
+ <option value="HRV">Croatia</option>
+ <option value="CYP">Cyprus</option>
+ <option value="CZE">Czech Republic</option>
+ <option value="DNK">Denmark</option>
+ <option value="EGY">Egypt</option>
+ <option value="EST">Estonia</option>
+ <option value="FIN">Finland</option>
+
+ <option value="FRA">France</option>
+ <option value="GEO">Georgia</option>
+ <option value="DEU" selected="selected">Germany</option>
+ <option value="GRC">Greece</option>
+ <option value="HKG">Hong Kong</option>
+ <option value="HUN">Hungary</option>
+ <option value="ISL">Iceland</option>
+ <option value="IND">India</option>
+ <option value="IDN">Indonesia</option>
+
+ <option value="IRN">Iran</option>
+ <option value="IRL">Ireland</option>
+ <option value="ISR">Israel</option>
+ <option value="ITA">Italy</option>
+ <option value="JPN">Japan</option>
+ <option value="JOR">Jordan</option>
+ <option value="KAZ">Kazakhstan</option>
+ <option value="KWT">Kuwait</option>
+ <option value="KGZ">Kyrgyzstan</option>
+
+ <option value="LVA">Latvia</option>
+ <option value="LBN">Lebanon</option>
+ <option value="LIE">Liechtenstein</option>
+ <option value="LTU">Lithuania</option>
+ <option value="LUX">Luxembourg</option>
+ <option value="MAC">Macau</option>
+ <option value="MKD">Macedonia</option>
+ <option value="MYS">Malaysia</option>
+ <option value="MLT">Malta</option>
+
+ <option value="MEX">Mexico</option>
+ <option value="MDA">Moldova</option>
+ <option value="MNG">Mongolia</option>
+ <option value="NLD" selected="selected">Netherlands</option>
+ <option value="NZL">New Zealand</option>
+ <option value="NGA">Nigeria</option>
+ <option value="NOR">Norway</option>
+ <option value="PER">Peru</option>
+ <option value="PHL">Philippines</option>
+
+ <option value="POL">Poland</option>
+ <option value="PRT">Portugal</option>
+ <option value="QAT">Qatar</option>
+ <option value="ROU">Romania</option>
+ <option value="RUS">Russia</option>
+ <option value="SMR">San Marino</option>
+ <option value="SAU">Saudi Arabia</option>
+ <option value="CSG">Serbia and Montenegro</option>
+ <option value="SGP">Singapore</option>
+
+ <option value="SVK">Slovakia</option>
+ <option value="SVN">Slovenia</option>
+ <option value="ZAF">South Africa</option>
+ <option value="KOR">South Korea</option>
+ <option value="ESP">Spain</option>
+ <option value="LKA">Sri Lanka</option>
+ <option value="SWE">Sweden</option>
+ <option value="CHE">Switzerland</option>
+ <option value="SYR">Syria</option>
+
+ <option value="TWN">Taiwan</option>
+ <option value="TJK">Tajikistan</option>
+ <option value="THA">Thailand</option>
+ <option value="TUR">Turkey</option>
+ <option value="TKM">Turkmenistan</option>
+ <option value="UKR">Ukraine</option>
+ <option value="ARE">United Arab Emirates</option>
+ <option value="GBR">United Kingdom</option>
+ <option value="USA" selected="selected">United States</option>
+
+ <option value="UZB">Uzbekistan</option>
+ <option value="VAT">Vatican City</option>
+ <option value="VNM">Vietnam</option>
+ </select>
+ </form>
+
+ <script type="text/javascript"
+ src="http://jqueryui.com/themeroller/themeswitchertool/">
+ </script>
+ <div id="switcher"></div>
+
+ <h2>Features</h2>
+ <ul>
+ <li>Search within available options, if there are a lots of them</li>
+ <li>Displaying counts of selected and available items</li>
+ <li>Select All / Deselect All Buttons</li>
+ <li>Dragging items from the available list to the selected list directly</li>
+ </ul>
+
+ <h2>Contributors</h2>
+ <ul>
+ <li><a href="http://github.com/michael/multiselect/">Michael Aufreiter</a></li>
+ <li><a href="http://github.com/yanickrochon/multiselect">Yanick Rochon</a></li>
+ </ul>
+ </p>
+ <h2>Misc</h2>
+ <p>
+ There are no limitations. Do whatever you want with this plugin.
+ If you did some nice modifications, just let me know (via Github). I'd be happy to include them.
+ </p>
+ </div>
+
+ <div id="footer">
+ <p class="left">A <a href="http://quasipartikel.at/">Quasipartikel</a> Production</p>
+ <p class="right">Template adopted from <a href="http://orderedlist.com/demos/fancy-zoom-jquery/">orderedlist.com</a></p>
+ <br class="clear"/>
+ </div>
+</div>
+</body>
</html>
View
2 js/locale/ui-multiselect-en.js
@@ -7,5 +7,5 @@
$.extend($.ui.multiselect.locale, {
addAll:'Add all',
removeAll:'Remove all',
- itemsSelected:'items selected'
+ itemsCount:'items selected'
});
View
2 js/locale/ui-multiselect-fr.js
@@ -7,5 +7,5 @@
$.extend($.ui.multiselect.locale, {
addAll:'Ajouter tout',
removeAll:'Supprimer tout',
- itemsSelected:'items sélectionnés'
+ itemsCount:'items sélectionnés'
});
View
4 js/ui.multiselect.js
@@ -136,7 +136,7 @@ $.widget("ui.multiselect", {
this._updateCount();
},
_updateCount: function() {
- this.selectedContainer.find('span.count').text(this.count+" "+$.ui.multiselect.locale.itemsSelected);
+ this.selectedContainer.find('span.count').text(this.count+" "+$.ui.multiselect.locale.itemsCount);
},
_getOptionNode: function(option) {
option = $(option);
@@ -299,7 +299,7 @@ $.widget("ui.multiselect", {
$.extend($.ui.multiselect, {
defaults: {
sortable: true,
- searchable: true,
+ searchable: false,
ajaxSearch: {
url: null,
params: {},

0 comments on commit cc76320

Please sign in to comment.
Something went wrong with that request. Please try again.