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

Commit 0a9f98f

Browse files
author
Philippe Masset
committed
Initial commit
1 parent 019fb32 commit 0a9f98f

File tree

5 files changed

+481
-0
lines changed

5 files changed

+481
-0
lines changed

‎examples/index.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
5+
<link rel="stylesheet" href="../jquery.simpleselect.css" type="text/css">
6+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
7+
<script src="../jquery.simpleselect.js"></script>
8+
<script src="main.js"></script>
9+
<style>
10+
body{
11+
margin: 0;
12+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
13+
font-size: 13px;
14+
line-height: 18px;
15+
color: #333;
16+
background-color: #fff;
17+
}
18+
.select-container {
19+
position: absolute;
20+
top: 200px;
21+
}
22+
</style>
23+
</head>
24+
<body>
25+
26+
<div class="select-container" style="left: 100px;">
27+
<p>Regular select</p>
28+
<select id="the_select" name="the_select">
29+
<option>Option 1</option>
30+
<option selected="selected">Option 2 (pre-selected)</option>
31+
<option>Option 3</option>
32+
<option>Option 4</option>
33+
</select>
34+
</div>
35+
36+
<div class="select-container" style="left: 400px;">
37+
<p>Select with optgroups</p>
38+
<select>
39+
<optgroup>
40+
<option>Option 1.1</option>
41+
</optgroup>
42+
<optgroup>
43+
<option>Option 2.1</option>
44+
<option>Option 2.2</option>
45+
</optgroup>
46+
<optgroup>
47+
<option>Option 3.1</option>
48+
<option>Option 3.2</option>
49+
<option>Option 3.3</option>
50+
</optgroup>
51+
</select>
52+
</div>
53+
54+
<div class="select-container" style="left: 700px;">
55+
<p>Select with optgroups and optgroup labels</p>
56+
<select>
57+
<optgroup label="Group 1">
58+
<option>Option 1.1</option>
59+
</optgroup>
60+
<optgroup label="Group 2">
61+
<option>Option 2.1</option>
62+
<option>Option 2.2</option>
63+
</optgroup>
64+
<optgroup label="Group 3">
65+
<option>Option 3.1</option>
66+
<option>Option 3.2</option>
67+
<option>Option 3.3</option>
68+
</optgroup>
69+
</select>
70+
</div>
71+
</body>
72+
</html>

‎examples/main.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
$(document).bind("ready", function(){
2+
$("select")
3+
.simpleselect()
4+
.bind("change.simpleselect", function(){
5+
console.log('change; new value='+ $(this).val());
6+
});
7+
});

‎jquery.simpleselect.css‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
.hidden_select_container {
2+
width: 0;
3+
height: 0;
4+
overflow: hidden;
5+
}
6+
7+
.simpleselect {
8+
position: relative;
9+
color: #333;
10+
}
11+
12+
.simpleselect,
13+
.simpleselect .options {
14+
width: 200px;
15+
}
16+
17+
/* compensation for the border */
18+
.simpleselect .options {
19+
width: 198px;
20+
}
21+
22+
.simpleselect,
23+
.simpleselect .placeholder,
24+
.simpleselect .options .option {
25+
height: 40px;
26+
line-height: 40px;
27+
}
28+
29+
.simpleselect .placeholder,
30+
.simpleselect .options .option,
31+
.simpleselect .options .optgroup .optgroup-label {
32+
padding: 0 10px;
33+
cursor: pointer;
34+
}
35+
36+
37+
.simpleselect .options .optgroup .optgroup-label {
38+
cursor: default;
39+
font-weight: bold;
40+
}
41+
42+
.simpleselect .options .optgroup .option,
43+
.simpleselect.has-optgroup .placeholder {
44+
padding: 0 20px;
45+
}
46+
47+
.simpleselect .placeholder,
48+
.simpleselect .options {
49+
background: #e3e3e3;
50+
border: 1px solid #bbb;
51+
-webkit-border-radius: 3px;
52+
-moz-border-radius: 3px;
53+
-ms-border-radius: 3px;
54+
-o-border-radius: 3px;
55+
border-radius: 3px;
56+
-webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
57+
-moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
58+
box-shadow: inset 0 0 1px 1px #f6f6f6;
59+
}
60+
61+
.simpleselect .options {
62+
display: none;
63+
position: absolute;
64+
top: 0;
65+
left: 0;
66+
}
67+
68+
.simpleselect .options .option,
69+
.simpleselect .options .optgroup,
70+
.simpleselect .options .optgroup .optgroup-label {
71+
border-bottom: 1px solid #bbb;
72+
}
73+
74+
.simpleselect .options .option {
75+
-webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
76+
-moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
77+
box-shadow: inset 0 0 1px 1px #f6f6f6;
78+
}
79+
80+
.simpleselect .placeholder:hover,
81+
.simpleselect.active .placeholder,
82+
.simpleselect .options .option.active {
83+
background: #d9d9d9;
84+
}
85+
86+
.simpleselect.disabled .placeholder,
87+
.simpleselect.disabled .placeholder:hover {
88+
background: #f3f3f3;
89+
color: #aaa;
90+
border-color: #eee;
91+
cursor: default;
92+
}

0 commit comments

Comments
 (0)