Skip to content
This repository has been archived by the owner on Nov 16, 2017. It is now read-only.

Commit

Permalink
more examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucasmazza
lucasmazza committed Jun 2, 2011
1 parent 4577c29 commit 0892ee0
Show file tree
Hide file tree
Showing 3 changed files with 177 additions and 6 deletions.
24 changes: 24 additions & 0 deletions example/example.css
View file
@@ -0,0 +1,24 @@
.clearfix{zoom:1;}
.clearfix:before,.clearfix:after{content:"\0020";display:block;height:0;visibility:hidden}
.clearfix:after{clear:both}
.left{float:left}
.right{float:right}
html{background-color:#eaeaea}
body{font:14px/1.4 "Lucida Grande",Verdana,Verdana,Arial,Helvetica,sans-serif;color:#444}
h1,h2{font-weight:bold;text-align:center}
h1{margin:40px 0 10px;font-size:20px;color:#222;text-shadow:1px 1px 1px #999}
h2{font-size:16px;margin:5px 0 10px;color:#b83000;text-shadow:1px 1px 1px #aaa}
.examples{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;border:1px solid #aaa;background:#fff;padding:20px 0;width:800px;margin:0 auto}
.line{width:100%;margin-top:15px;border-top:1px dotted #aaa;height:0}
.dropdown-container{margin:0 auto;width:230px;border:1px solid #ccc;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
.dropdown-container .dropdown-header{position:relative;z-index:0}
.dropdown-container .dropdown-current,.dropdown-container .dropdown-expand{height:22px;line-height:22px;float:left}
.dropdown-container .dropdown-current{background-color:#fff;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px;width:200px;text-indent:10px}
.dropdown-container .dropdown-expand{border-left:1px solid #ccc;-webkit-border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0;line-height:22px;width:29px;text-align:center;color:#666;text-shadow:1px 1px 1px #fff;font-weight:bold;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#eee', endColorstr='#ccc');background:-moz-linear-gradient(top,#eee,#ccc);background:-webkit-gradient(linear,0% 0%,0% 100%,from(#eee),to(#ccc))}
.dropdown-container .dropdown-items{z-index:1;width:220px;top:22px;left:-1px;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;border:1px solid #ccc;padding:5px;background-color:#fff}
.dropdown-container.expanded{-webkit-border-radius:6px 6px 0 0;-moz-border-radius:6px 6px 0 0;border-radius:6px 6px 0 0;}
.dropdown-container.expanded .dropdown-expand{-webkit-border-radius:0 5px 0 0;-moz-border-radius:0 5px 0 0;border-radius:0 5px 0 0}
.dropdown-container.red{border-color:#900;}
.dropdown-container.red .dropdown-current{background:rgba(153,0,0,0.2)}
.dropdown-container.red .dropdown-expand{border-left:1px solid #900;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ff1a1a', endColorstr='#b30000');background:-moz-linear-gradient(top,#ff1a1a,#b30000);background:-webkit-gradient(linear,0% 0%,0% 100%,from(#ff1a1a),to(#b30000));color:#fff;text-shadow:1px 1px 1px #222}
.dropdown-container.red .dropdown-items{border-color:#900;background:rgba(153,0,0,0.2)}
126 changes: 126 additions & 0 deletions example/example.styl
View file
@@ -0,0 +1,126 @@
.clearfix
zoom 1
&:before, &:after
content "\0020"
display block
height: 0
visibility hidden
&:after
clear both

.left
float left
.right
float right

opacity(n)
opacity n
filter unquote('progid:DXImageTransform.Microsoft.Alpha(Opacity=' + round(n * 100) + ')')

border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments

gradient(begin end)
filter unquote("progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='" + begin + "', endColorstr='"+end+"')")
background -moz-linear-gradient(top, begin, end)
background -webkit-gradient(linear, 0% 0%, 0% 100%, from(begin), to(end))

box-shadow()
-webkit-box-shadow arguments
-moz-box-shadow arguments
box-shadow arguments

html
background-color #EAEAEA

body
font: 14px / 1.4 'Lucida Grande', Verdana, Verdana, Arial, Helvetica, sans-serif
color #444

h1, h2
font-weight bold
text-align center

h1
margin 40px 0 10px
font-size 20px
color #222
text-shadow 1px 1px 1px #999

h2
font-size 16px
margin 5px 0 10px
color #b83000
text-shadow 1px 1px 1px #AAA

.examples
border-radius 5px
border 1px solid #AAA
background #FFF
padding 20px 0
width 800px
margin 0 auto

.line
width 100%
margin-top 15px
border-top 1px dotted #AAA
height 0

.dropdown-container
margin 0 auto
width 230px
border 1px solid #CCC
border-radius 6px

.dropdown-header
position relative
z-index 0
.dropdown-current, .dropdown-expand
height 22px
line-height 22px
float left
.dropdown-current
background-color #FFF
border-radius 5px 0 0 5px
width 200px
text-indent 10px
.dropdown-expand
border-left 1px solid #CCC
border-radius 0 5px 5px 0
line-height 22px
width 29px
text-align center
color #666
text-shadow 1px 1px 1px #FFF
font-weight bold
gradient #EEE, #CCC
.dropdown-items
z-index 1
width 220px
top 22px
left -1px
border-radius 0 0 5px 5px
border 1px solid #CCC
padding 5px
background-color #FFF

&.expanded
border-radius 6px 6px 0 0
.dropdown-expand
border-radius 0 5px 0 0

&.red
border-color #990000
.dropdown-current
background rgba(#990000, 0.2)
.dropdown-expand
border-left 1px solid #990000
gradient lighten(#FF0000,10%), darken(#FF0000, 30%)
color #FFF
text-shadow 1px 1px 1px #222
.dropdown-items
border-color #990000
background rgba(#990000, 0.2)
33 changes: 27 additions & 6 deletions example/index.html
View file
Expand Up @@ -10,20 +10,41 @@
<title>jquery.dropdown example page</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
<link rel='stylesheet' href='../lib/jquery.dropdown.css'>
<link rel='stylesheet' href='example.css'>
</head>
<body>
<h1>jquery.dropdown Example page</h1>
<div class='examples'>
<h2>Simple usage</h2>
<select id='basic'>
<option value='1'>The Matrix</option>
<option value='2'>The Matrix Reloaded</option>
<option value='3'>The Matrix Revolution</option>
</select>
<div class='line'></div>
<h2>Fade effect</h2>
<select id='fade'>
<option value='1'>The Matrix</option>
<option value='2'>The Matrix Reloaded</option>
<option value='3'>The Matrix Revolution</option>
</select>
<div class='line'></div>
<h2>Custom class</h2>
<select id='red'>
<option value='1'>The Matrix</option>
<option value='2'>The Matrix Reloaded</option>
<option value='3'>The Matrix Revolution</option>
</select>

<select>
<option value='1'>The Matrix</option>
<option value='2'>The Matrix Reloaded</option>
<option value='3'>The Matrix Revolution</option>
</select>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
<script src="../lib/jquery.dropdown.js"></script>
<script>
$(function($){
$('select').dropdown();
$('#basic').dropdown({classes:'clearfix'});
$('#fade').dropdown({classes:'clearfix',slide: false});
$('#red').dropdown({classes:'clearfix red'});
});
</script>
</body>
Expand Down

0 comments on commit 0892ee0

Please sign in to comment.