Skip to content
This repository has been archived by the owner on Jan 20, 2019. It is now read-only.

Commit

Permalink
Huge rewrite (now version 2.0.0)
Browse files Browse the repository at this point in the history 
This update is backward compatible, but a lot of changes have been
introduced, as well as some breaking changes. Have a look at the doc
when upgrading!
  • Loading branch information
Philippe Masset committed Feb 26, 2014
1 parent cbbd5fa commit cdb5aab
Show file tree
Hide file tree
Showing 18 changed files with 769 additions and 417 deletions.
31 changes: 31 additions & 0 deletions examples/custom plugin options/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="../../jquery.simpleselect.min.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../../jquery.simpleselect.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<p>This SimpleSelect's behavior has been customized using the plugin options:</p>
<ul>
<li><code>fadingDuration</code> was set to <code>500</code> (instead of <code>0</code> by default), making the options list appear and disappear by fading in and out over 500 milliseconds</li>
<li><code>containerMargin</code> was set to <code>100</code> (instead of <code>5</code> by default), preventing the options list from getting any closer than 100 pixels from the window's edges</li>
</ul>
<label for="example-select">What's your favorite cat breed?</label>
<select id="example-select">
<option>Persian</option>
<option>Maine Coon</option>
<option>Exotic</option>
<option>Siamese</option>
<option>Abyssinian</option>
<option>Ragdoll</option>
<option>Birman</option>
<option>American Shorthair</option>
<option>Oriental</option>
<option>Sphynx</option>
</select>
</body>
</html>
8 changes: 8 additions & 0 deletions examples/custom plugin options/main.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
body {
padding: 200px;
margin: 0;
background: #fff;
font: 14px Arial, Helvetica, Geneva, sans-serif;
line-height: 1.5em;
color: #3a3a3a;
}
8 changes: 8 additions & 0 deletions examples/custom plugin options/main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
$(document).ready(function() {

$("#example-select").simpleselect({
fadingDuration: 500,
containerMargin: 100
});

});
36 changes: 36 additions & 0 deletions examples/disabling and re-enabling the simpleselect/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="../../jquery.simpleselect.min.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../../jquery.simpleselect.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div>
<button id="disable-select">Disable the <code>&lt;select&gt;</code></button> or
<button id="enable-select">Enable the <code>&lt;select&gt;</code></button> then
<button id="refresh-simpleselect-state">Refresh the state of the SimpleSelect</button>
<hr/>
<button id="disable-simpleselect">Disable both the <code>&lt;select&gt;</code> and the SimpleSelect</button>
<hr/>
<button id="enable-simpleselect">Enable both the <code>&lt;select&gt;</code> and the SimpleSelect</button>
</div>

<label for="example-select">What's your favorite cat breed?</label>
<select id="example-select">
<option>Persian</option>
<option>Maine Coon</option>
<option>Exotic</option>
<option>Siamese</option>
<option>Abyssinian</option>
<option>Ragdoll</option>
<option>Birman</option>
<option>American Shorthair</option>
<option>Oriental</option>
<option>Sphynx</option>
</select>
</body>
</html>
17 changes: 17 additions & 0 deletions examples/disabling and re-enabling the simpleselect/main.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
body {
padding: 200px;
margin: 0;
background: #fff;
font: 14px Arial, Helvetica, Geneva, sans-serif;
line-height: 1.5em;
color: #3a3a3a;
}

body > div:first-child {
display: inline-block;
margin-bottom: 40px;
}

label {
display: block;
}
25 changes: 25 additions & 0 deletions examples/disabling and re-enabling the simpleselect/main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
$(document).ready(function() {

var select = $("#example-select").simpleselect();

$("#disable-select").on("click", function() {
select.prop("disabled", true);
});

$("#enable-select").on("click", function() {
select.prop("disabled", false);
});

$("#refresh-simpleselect-state").on("click", function() {
select.simpleselect("refreshState");
});

$("#disable-simpleselect").on("click", function() {
select.simpleselect("disable");
});

$("#enable-simpleselect").on("click", function() {
select.simpleselect("enable");
});

});
82 changes: 0 additions & 82 deletions examples/index.html
View file

This file was deleted.

14 changes: 0 additions & 14 deletions examples/main.js
View file

This file was deleted.

35 changes: 35 additions & 0 deletions examples/updating select options on the fly/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="../../jquery.simpleselect.min.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../../jquery.simpleselect.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div>
<label for="example-select">What's your favorite cat breed?</label>
<select id="example-select">
<option>Persian</option>
<option>Maine Coon</option>
<option>Exotic</option>
<option>Siamese</option>
<option>Abyssinian</option>
<option>Ragdoll</option>
<option>Birman</option>
<option>American Shorthair</option>
<option>Oriental</option>
<option>Sphynx</option>
</select>
</div>
<div>
<form id="add-option-form">
<label for="add-option">Add an option to the select, then open it</label>
<input type="text" id="add-option" value="Burmese"/> <input type="checkbox" id="should-select-option"/> <label for="should-select-option">The new option should be selected</label>
<input type="submit"/>
</form>
</div>
</body>
</html>
35 changes: 35 additions & 0 deletions examples/updating select options on the fly/main.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
body {
padding: 160px;
margin: 0;
background: #fff;
font: 14px Arial, Helvetica, Geneva, sans-serif;
line-height: 1.5em;
color: #3a3a3a;
}

body > div {
float: left;
margin: 40px 40px 0 0;
}

input[type="text"] {
height: 18px;
padding: 9px 10px;
border: 1px solid #ddd;
line-height: 18px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

input[type="submit"] {
visibility: hidden;
}

label {
display: block;
}

label[for="should-select-option"] {
display: inline;
}
20 changes: 20 additions & 0 deletions examples/updating select options on the fly/main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
$(document).ready(function() {

var select = $("#example-select").simpleselect(),
newOptionInput = $("#add-option"),
newOptionAutoSelectionCheckbox = $("#should-select-option"),
newOption;

$("#add-option-form").on("submit", function(e) {
e.preventDefault();

newOption = $("<option>").text(newOptionInput.val());
if (newOptionAutoSelectionCheckbox.prop("checked")) newOption.prop("selected", true);

select
.append(newOption)
.simpleselect("refreshContents")
.simpleselect("setActive");
});

});
31 changes: 31 additions & 0 deletions examples/watching the change event/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="../../jquery.simpleselect.min.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../../jquery.simpleselect.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div>
<label for="example-select">What's your favorite cat breed?</label>
<select id="example-select">
<option>Persian</option>
<option>Maine Coon</option>
<option>Exotic</option>
<option>Siamese</option>
<option>Abyssinian</option>
<option>Ragdoll</option>
<option>Birman</option>
<option>American Shorthair</option>
<option>Oriental</option>
<option>Sphynx</option>
</select>
</div>
<div class="answer">
Answer: <span id="cat-breed-display"><i>Select a breed</i></span>
</div>
</body>
</html>
25 changes: 25 additions & 0 deletions examples/watching the change event/main.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
body {
padding: 160px;
margin: 0;
background: #fff;
font: 14px Arial, Helvetica, Geneva, sans-serif;
line-height: 1.5em;
color: #3a3a3a;
}

body > div {
float: left;
margin: 40px 40px 0 0;
}

.answer {
padding-top: 29px;
}

.answer #cat-breed-display {
font-weight: bold;
}

label {
display: block;
}
Loading

0 comments on commit cdb5aab

Please sign in to comment.