Permalink
Browse files

added tzselect

  • Loading branch information...
1 parent bf06053 commit 5bb6f790bc58d40777fd5758d432bf4b17e71d3c @kristianmandrup committed Aug 26, 2012
Showing with 217 additions and 0 deletions.
  1. +22 −0 README.md
  2. +95 −0 vendor/assets/javascripts/selector/tzselect.js
  3. +100 −0 vendor/assets/stylesheets/tzselect.css
View
@@ -41,6 +41,7 @@ In addition to the original toolset, the following have been added:
* fullscreen
* knobs
+* tzselect
## Fullscreen
@@ -77,6 +78,27 @@ Demo [pretty-switches](http://tutorialzine.com/2011/11/pretty-switches-css3-jque
Note: You also need to add `knobs.css` to your project, fx using your `application.css` manifest.
+## TZSelect
+
+```html
+<form method="post" action="">
+
+ <!-- We are going to use jQuery to hide the select element and replace it -->
+ <select name="fancySelect" class="makeMeFancy">
+
+ <!-- Notice the HTML5 data attributes -->
+
+ <option value="0" selected="selected" data-skip="1">Choose Your Product</option>
+ <option value="1" data-icon="img/products/iphone.png" data-html-text="iPhone 4&lt;i&gt;in stock&lt;/i&gt;">iPhone 4</option>
+ <option value="2" data-icon="img/products/ipod.png" data-html-text="iPod &lt;i&gt;in stock&lt;/i&gt;">iPod</option>
+ <option value="3" data-icon="img/products/air.png" data-html-text="MacBook Air&lt;i&gt;out of stock&lt;/i&gt;">MacBook Air</option>
+ <option value="4" data-icon="img/products/imac.png" data-html-text="iMac Station&lt;i&gt;in stock&lt;/i&gt;">iMac Station</option>
+ </select>
+</form>
+```
+
+See [tzselect](http://tutorialzine.com/2010/11/better-select-jquery-css3/)
+
## Contributing to jqtools-rails
* Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet.
@@ -0,0 +1,95 @@
+$(document).ready(function(){
+
+ // The select element to be replaced:
+ var select = $('select.makeMeFancy');
+
+ var selectBoxContainer = $('<div>',{
+ width : select.outerWidth(),
+ className : 'tzSelect',
+ html : '<div class="selectBox"></div>'
+ });
+
+ var dropDown = $('<ul>',{className:'dropDown'});
+ var selectBox = selectBoxContainer.find('.selectBox');
+
+ // Looping though the options of the original select element
+
+ select.find('option').each(function(i){
+ var option = $(this);
+
+ if(i==select.attr('selectedIndex')){
+ selectBox.html(option.text());
+ }
+
+ // As of jQuery 1.4.3 we can access HTML5
+ // data attributes with the data() method.
+
+ if(option.data('skip')){
+ return true;
+ }
+
+ // Creating a dropdown item according to the
+ // data-icon and data-html-text HTML5 attributes:
+
+ var li = $('<li>',{
+ html: '<img src="'+option.data('icon')+'" /><span>'+
+ option.data('html-text')+'</span>'
+ });
+
+ li.click(function(){
+
+ selectBox.html(option.text());
+ dropDown.trigger('hide');
+
+ // When a click occurs, we are also reflecting
+ // the change on the original select element:
+ select.val(option.val());
+
+ return false;
+ });
+
+ dropDown.append(li);
+ });
+
+ selectBoxContainer.append(dropDown.hide());
+ select.hide().after(selectBoxContainer);
+
+ // Binding custom show and hide events on the dropDown:
+
+ dropDown.bind('show',function(){
+
+ if(dropDown.is(':animated')){
+ return false;
+ }
+
+ selectBox.addClass('expanded');
+ dropDown.slideDown();
+
+ }).bind('hide',function(){
+
+ if(dropDown.is(':animated')){
+ return false;
+ }
+
+ selectBox.removeClass('expanded');
+ dropDown.slideUp();
+
+ }).bind('toggle',function(){
+ if(selectBox.hasClass('expanded')){
+ dropDown.trigger('hide');
+ }
+ else dropDown.trigger('show');
+ });
+
+ selectBox.click(function(){
+ dropDown.trigger('toggle');
+ return false;
+ });
+
+ // If we click anywhere on the page, while the
+ // dropdown is shown, it is going to be hidden:
+
+ $(document).click(function(){
+ dropDown.trigger('hide');
+ });
+});
@@ -0,0 +1,100 @@
+
+.tzSelect{
+
+ /* This is the container of the new select element */
+
+ height:34px;
+ display:inline-block;
+ min-width:200px;
+ position:relative;
+
+ /* Preloading the background image for the dropdown */
+ background:url(/assets/tzselect/dropdown_slice.png) no-repeat -99999px;
+}
+
+.tzSelect .selectBox{
+ position:absolute;
+
+ height:100%;
+ width:100%;
+
+ /* Font settings */
+
+ font:13px/34px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+ text-align:center;
+ text-shadow:1px 1px 0 #EEEEEE;
+ color:#666666;
+
+ /* Using CSS3 multiple backgrounds and a fallback */
+
+ background:url(/assets/tzselect/select_slice.png) repeat-x #ddd;
+ background-image:url(/assets/tzselect/img/select_slice.png),url(/assets/tzselect/select_slice.png),url(/assets/tzselect/select_slice.png),url(/assets/tzselect/select_slice.png);
+ background-position:0 -136px, right -204px, 50% -68px, 0 0;
+ background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
+
+ cursor:pointer;
+
+ -moz-border-radius:3px;
+ -webkit-border-radius:3px;
+ border-radius:3px;
+}
+
+.tzSelect .selectBox:hover,
+.tzSelect .selectBox.expanded{
+ background-position:0 -170px, right -238px, 50% -102px, 0 -34px;
+ color:#2c5667;
+ text-shadow:1px 1px 0 #9bc2d0;
+}
+
+.tzSelect .dropDown{
+ position:absolute;
+ top:40px;
+ left:0;
+ width:100%;
+ border:1px solid #32333b;
+ border-width:0 1px 1px;
+ list-style:none;
+
+ -moz-box-sizing:border-box;
+ -webkit-box-sizing:border-box;
+ box-sizing:border-box;
+
+ -moz-box-shadow:0 0 4px #111;
+ -webkit-box-shadow:0 0 4px #111;
+ box-shadow:0 0 4px #111;
+}
+
+.tzSelect li{
+ height:85px;
+ cursor:pointer;
+ position:relative;
+
+ /* Again, using CSS3 multiple backgrounds */
+
+ background:url(/assets/tzselect/dropdown_slice.png) repeat-x #222;
+ background-image:url(/assets/tzselect/dropdown_slice.png),url(/assets/tzselect/dropdown_slice.png),url(/assets/tzselect/dropdown_slice.png);
+ background-position: 50% -171px, 0 -85px, 0 0;
+ background-repeat: no-repeat, no-repeat, repeat-x;
+}
+
+.tzSelect li:hover{
+ background-position: 50% -256px, 0 -85px, 0 0;
+}
+
+.tzSelect li span{
+ left:88px;
+ position:absolute;
+ top:27px;
+}
+
+.tzSelect li i{
+ color:#999999;
+ display:block;
+ font-size:12px;
+}
+
+.tzSelect li img{
+ left:9px;
+ position:absolute;
+ top:13px;
+}

0 comments on commit 5bb6f79

Please sign in to comment.