Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

added tzselect

  • Loading branch information...
commit 5bb6f790bc58d40777fd5758d432bf4b17e71d3c 1 parent bf06053
Kristian Mandrup authored August 26, 2012
22  README.md
Source Rendered
@@ -41,6 +41,7 @@ In addition to the original toolset, the following have been added:
41 41
 
42 42
 * fullscreen
43 43
 * knobs
  44
+* tzselect
44 45
 
45 46
 ## Fullscreen
46 47
 
@@ -77,6 +78,27 @@ Demo [pretty-switches](http://tutorialzine.com/2011/11/pretty-switches-css3-jque
77 78
 
78 79
 Note: You also need to add `knobs.css` to your project, fx using your `application.css` manifest.
79 80
 
  81
+## TZSelect
  82
+
  83
+```html
  84
+<form method="post" action="">
  85
+
  86
+  <!-- We are going to use jQuery to hide the select element and replace it -->
  87
+  <select name="fancySelect" class="makeMeFancy">
  88
+
  89
+    <!-- Notice the HTML5 data attributes -->
  90
+
  91
+    <option value="0" selected="selected" data-skip="1">Choose Your Product</option>
  92
+    <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>
  93
+    <option value="2" data-icon="img/products/ipod.png" data-html-text="iPod &lt;i&gt;in stock&lt;/i&gt;">iPod</option>
  94
+    <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>
  95
+    <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>
  96
+  </select>
  97
+</form>
  98
+```
  99
+
  100
+See [tzselect](http://tutorialzine.com/2010/11/better-select-jquery-css3/)
  101
+
80 102
 ## Contributing to jqtools-rails
81 103
  
82 104
 * Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet.
95  vendor/assets/javascripts/selector/tzselect.js
... ...
@@ -0,0 +1,95 @@
  1
+$(document).ready(function(){
  2
+
  3
+  // The select element to be replaced:
  4
+  var select = $('select.makeMeFancy');
  5
+
  6
+  var selectBoxContainer = $('<div>',{
  7
+    width   : select.outerWidth(),
  8
+    className : 'tzSelect',
  9
+    html    : '<div class="selectBox"></div>'
  10
+  });
  11
+
  12
+  var dropDown = $('<ul>',{className:'dropDown'});
  13
+  var selectBox = selectBoxContainer.find('.selectBox');
  14
+
  15
+  // Looping though the options of the original select element
  16
+
  17
+  select.find('option').each(function(i){
  18
+    var option = $(this);
  19
+
  20
+    if(i==select.attr('selectedIndex')){
  21
+      selectBox.html(option.text());
  22
+    }
  23
+
  24
+    // As of jQuery 1.4.3 we can access HTML5
  25
+    // data attributes with the data() method.
  26
+
  27
+    if(option.data('skip')){
  28
+      return true;
  29
+    }
  30
+
  31
+    // Creating a dropdown item according to the
  32
+    // data-icon and data-html-text HTML5 attributes:
  33
+
  34
+    var li = $('<li>',{
  35
+      html: '<img src="'+option.data('icon')+'" /><span>'+
  36
+          option.data('html-text')+'</span>'
  37
+    });
  38
+
  39
+    li.click(function(){
  40
+
  41
+      selectBox.html(option.text());
  42
+      dropDown.trigger('hide');
  43
+
  44
+      // When a click occurs, we are also reflecting
  45
+      // the change on the original select element:
  46
+      select.val(option.val());
  47
+
  48
+      return false;
  49
+    });
  50
+
  51
+    dropDown.append(li);
  52
+  });
  53
+
  54
+  selectBoxContainer.append(dropDown.hide());
  55
+  select.hide().after(selectBoxContainer);
  56
+
  57
+  // Binding custom show and hide events on the dropDown:
  58
+
  59
+  dropDown.bind('show',function(){
  60
+
  61
+    if(dropDown.is(':animated')){
  62
+      return false;
  63
+    }
  64
+
  65
+    selectBox.addClass('expanded');
  66
+    dropDown.slideDown();
  67
+
  68
+  }).bind('hide',function(){
  69
+
  70
+    if(dropDown.is(':animated')){
  71
+      return false;
  72
+    }
  73
+
  74
+    selectBox.removeClass('expanded');
  75
+    dropDown.slideUp();
  76
+
  77
+  }).bind('toggle',function(){
  78
+    if(selectBox.hasClass('expanded')){
  79
+      dropDown.trigger('hide');
  80
+    }
  81
+    else dropDown.trigger('show');
  82
+  });
  83
+
  84
+  selectBox.click(function(){
  85
+    dropDown.trigger('toggle');
  86
+    return false;
  87
+  });
  88
+
  89
+  // If we click anywhere on the page, while the
  90
+  // dropdown is shown, it is going to be hidden:
  91
+
  92
+  $(document).click(function(){
  93
+    dropDown.trigger('hide');
  94
+  });
  95
+});
100  vendor/assets/stylesheets/tzselect.css
... ...
@@ -0,0 +1,100 @@
  1
+
  2
+.tzSelect{
  3
+
  4
+  /* This is the container of the new select element */
  5
+
  6
+  height:34px;
  7
+  display:inline-block;
  8
+  min-width:200px;
  9
+  position:relative;
  10
+
  11
+  /* Preloading the background image for the dropdown */
  12
+  background:url(/assets/tzselect/dropdown_slice.png) no-repeat -99999px;
  13
+}
  14
+
  15
+.tzSelect .selectBox{
  16
+  position:absolute;
  17
+
  18
+  height:100%;
  19
+  width:100%;
  20
+
  21
+  /* Font settings */
  22
+
  23
+  font:13px/34px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  24
+  text-align:center;
  25
+  text-shadow:1px 1px 0 #EEEEEE;
  26
+  color:#666666;
  27
+
  28
+  /* Using CSS3 multiple backgrounds and a fallback */
  29
+
  30
+  background:url(/assets/tzselect/select_slice.png) repeat-x #ddd;
  31
+  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);
  32
+  background-position:0 -136px, right -204px, 50% -68px, 0 0;
  33
+  background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
  34
+
  35
+  cursor:pointer;
  36
+
  37
+  -moz-border-radius:3px;
  38
+  -webkit-border-radius:3px;
  39
+  border-radius:3px;
  40
+}
  41
+
  42
+.tzSelect .selectBox:hover,
  43
+.tzSelect .selectBox.expanded{
  44
+  background-position:0 -170px, right -238px, 50% -102px, 0 -34px;
  45
+  color:#2c5667;
  46
+  text-shadow:1px 1px 0 #9bc2d0;
  47
+}
  48
+
  49
+.tzSelect .dropDown{
  50
+  position:absolute;
  51
+  top:40px;
  52
+  left:0;
  53
+  width:100%;
  54
+  border:1px solid #32333b;
  55
+  border-width:0 1px 1px;
  56
+  list-style:none;
  57
+
  58
+  -moz-box-sizing:border-box;
  59
+  -webkit-box-sizing:border-box;
  60
+  box-sizing:border-box;
  61
+
  62
+  -moz-box-shadow:0 0 4px #111;
  63
+  -webkit-box-shadow:0 0 4px #111;
  64
+  box-shadow:0 0 4px #111;
  65
+}
  66
+
  67
+.tzSelect li{
  68
+  height:85px;
  69
+  cursor:pointer;
  70
+  position:relative;
  71
+
  72
+  /* Again, using CSS3 multiple backgrounds */
  73
+
  74
+  background:url(/assets/tzselect/dropdown_slice.png) repeat-x #222;
  75
+  background-image:url(/assets/tzselect/dropdown_slice.png),url(/assets/tzselect/dropdown_slice.png),url(/assets/tzselect/dropdown_slice.png);
  76
+  background-position: 50% -171px, 0 -85px, 0 0;
  77
+  background-repeat: no-repeat, no-repeat, repeat-x;
  78
+}
  79
+
  80
+.tzSelect li:hover{
  81
+  background-position: 50% -256px, 0 -85px, 0 0;
  82
+}
  83
+
  84
+.tzSelect li span{
  85
+  left:88px;
  86
+  position:absolute;
  87
+  top:27px;
  88
+}
  89
+
  90
+.tzSelect li i{
  91
+  color:#999999;
  92
+  display:block;
  93
+  font-size:12px;
  94
+}
  95
+
  96
+.tzSelect li img{
  97
+  left:9px;
  98
+  position:absolute;
  99
+  top:13px;
  100
+}

0 notes on commit 5bb6f79

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