Skip to content

Instantly share code, notes, and snippets.

@awesome
Last active August 29, 2015 13:57
Show Gist options
  • Save awesome/0a9bf6dbc783502c4bc1 to your computer and use it in GitHub Desktop.
Save awesome/0a9bf6dbc783502c4bc1 to your computer and use it in GitHub Desktop.
<select id='awesome' name='awesome'>
<option value='some_value'>Some Name</option>
<option selected='selected' value='default_value'>Default Name</option>
<option value='other_value'>Other Name</option>
</select>
<script>
$(function () {
$('#awesome').dropkick({
change: function (value, label) {
alert('You picked: ' + label + ':' + value);
}
})
// onload default selected
var selected_val = $('#dk_container_awesome').find('[selected="selected"]').attr('value');
$('#dk_container_awesome').find('.dk_options_inner').find('[data-dk-dropdown-value="' + selected_val + '"]').closest('li').attr('class', 'dk_option_current');
});
</script>
<style>
.dk_options_inner {
padding-left: 0;
margin-bottom: 0;
margin-top: 0;
}
</style>
.dk_container{background-color:#f5f5f5;font-family:"Helvetica",Arial,sans-serif;font-size:12px;font-weight:bold;margin-bottom:18px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px}.dk_container:focus{outline:0}.dk_container a{cursor:pointer;text-decoration:none}.dk_toggle{border:1px solid #ccc;color:#333;padding:7px 45px 7px 10px;text-shadow:#fff 1px 1px 0;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-webkit-transition:border-color 0.5s;-moz-transition:border-color 0.5s;-o-transition:border-color 0.5s;transition:border-color 0.5s;position:relative}.dk_toggle:hover{border-color:#8c8c8c}.dk_toggle:after{position:absolute;top:45%;right:10px;content:'';border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #4b4b4b}.dk_focus .dk_toggle{border-color:#40b5e2;box-shadow:0 0 5px #40b5e2;-moz-box-shadow:0 0 5px #40b5e2;-webkit-box-shadow:0 0 5px #40b5e2}.dk_open{box-shadow:0 0 5px #40b5e2;-moz-box-shadow:0 0 5px #40b5e2;-webkit-box-shadow:0 0 5px #40b5e2;z-index:10}.dk_open .dk_toggle{background-color:#ececec;border-color:#8c8c8c;color:#ccc;box-shadow:inset 0 -2px 5px #ccc;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0}.dk_options{background:#fefefe;box-shadow:rgba(0,0,0,0.2) 0 2px 8px;-moz-box-shadow:rgba(0,0,0,0.2) 0 2px 8px;-webkit-box-shadow:rgba(0,0,0,0.2) 0 2px 8px;border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px}.dk_options a{background-color:#fff;border-bottom:1px solid #999;font-weight:bold;padding:8px 10px}.dk_options a:hover,.dk_options .dk_option_current a{background-color:#0084c7;border-bottom-color:#004c72;color:#fff;text-decoration:none;text-shadow:rgba(0,0,0,0.5) 0 1px 0}.dk_options li:last-child a{border-bottom:none}.dk_options .disabled{cursor:default}.dk_options .disabled a{color:#aaa}.dk_options .disabled:hover,.dk_options .disabled:hover a{cursor:default;background-color:#fff;border-bottom-color:#999;text-shadow:none}.dk_options_inner{max-height:250px;border:1px solid #8c8c8e;border-bottom-width:2px;border-bottom-color:#999;color:#333;text-shadow:#fff 0 1px 0;border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px}.dk_container{display:none;float:left}.dk_container a{outline:0}.dk_toggle{display:-moz-inline-stack;display:inline-block;*display:inline;position:relative;zoom:1}.dk_open{position:relative}.dk_open .dk_options{display:block}.dk_open .dk_label{color:inherit}.dk_options{display:none;margin-top:-1px;position:absolute;right:0;width:100%}.dk_options a,.dk_options a:link,.dk_options a:visited{display:block}.dk_options_inner{overflow:auto;position:relative;-webkit-overflow-scrolling:touch}.dk_container select{position:absolute;top:-99999em;visibility:hidden}.dk_mobile{position:relative}.dk_mobile select{display:block;width:100%;height:100%;top:0;left:0;visibility:visible;opacity:0;appearance:none;-moz-appearance:none;-webkit-appearance:none}
/*
* DropKick 1.4
*
* Highly customizable <select> lists
* https://github.com/robdel12/DropKick
*
* Created by: Jamie Lottering <http://github.com/JamieLottering> <http://twitter.com/JamieLottering>
*
*
*/(function(e,t,n){"use strict";var r=navigator.userAgent.match(/MSIE ([0-9]{1,}[\.0-9]{0,})/),i=!!r,s=i&&parseFloat(r[1])<7,o=navigator.userAgent.match(/iPad|iPhone|Android|IEMobile|BlackBerry/i),u={},a=[],f={left:37,up:38,right:39,down:40,enter:13,tab:9,zero:48,z:90,last:221},l=['<div class="dk_container" id="dk_container_{{ id }}" tabindex="{{ tabindex }}" aria-hidden="true">','<a class="dk_toggle dk_label">{{ label }}</a>','<div class="dk_options">','<ul class="dk_options_inner" role="main" aria-hidden="true">',"</ul>","</div>","</div>"].join(""),c='<li><a data-dk-dropdown-value="{{ value }}">{{ text }}</a></li>',h={startSpeed:400,theme:!1,changes:!1,syncReverse:!0,nativeMobile:!0,autoWidth:!0},p=null,d=null,v=function(e,t,n){var r,i,s,o;r=e.attr("data-dk-dropdown-value");i=e.text();s=t.data("dropkick");o=s.$select;o.val(r).trigger("change");t.find(".dk_label").text(i);n=n||!1;s.settings.change&&!n&&!s.settings.syncReverse&&s.settings.change.call(o,r,i)},m=function(e){e.removeClass("dk_open dk_open_top");p=null},g=function(n){var r=n.find(".dk_toggle"),i=n.find(".dk_options").outerHeight(),s=e(t).height()-r.outerHeight()-r.offset().top+e(t).scrollTop(),o=r.offset().top-e(t).scrollTop();return i<o?i<s:!0},y=function(e,t,n){var r=e.find(".dk_options_inner"),i=t.prevAll("li").outerHeight()*t.prevAll("li").length,s=r.scrollTop(),o=r.height()+r.scrollTop()-t.outerHeight();(n&&n.type==="keydown"||i<s||i>o)&&r.scrollTop(i)},b=function(e,t){var n=g(e);p=e.toggleClass("dk_open");var n=g(e),r=n?"dk_open":"dk_open_top dk_open";e.find(".dk_options").css({top:n?e.find(".dk_toggle").outerHeight()-1:"",bottom:n?"":e.find(".dk_toggle").outerHeight()-1});p=e.addClass(r);y(e,e.find(".dk_option_current"),t)},w=function(e,t,n){t.find(".dk_option_current").removeClass("dk_option_current");e.addClass("dk_option_current");y(t,e,n)},E=function(t,n){var r=t.keyCode,i=n.data("dropkick"),s=String.fromCharCode(r),o=n.find(".dk_options"),u=n.hasClass("dk_open"),a=o.find("li"),l=n.find(".dk_option_current"),c=a.first(),h=a.last(),p,d,g,y,E,S,x;switch(r){case f.enter:if(u){if(!l.hasClass("disabled")){v(l.find("a"),n);m(n)}}else b(n,t);t.preventDefault();break;case f.tab:if(u){l.length&&v(l.find("a"),n);m(n)}break;case f.up:d=l.prev("li");u?d.length?w(d,n,t):w(h,n,t):b(n,t);t.preventDefault();break;case f.down:if(u){p=l.next("li").first();p.length?w(p,n,t):w(c,n,t)}else b(n,t);t.preventDefault();break;default:}if(r>=f.zero&&r<=f.z){g=(new Date).getTime();if(i.finder===null||i.finder===undefined){i.finder=s.toUpperCase();i.timer=g}else if(g>parseInt(i.timer,10)+1e3){i.finder=s.toUpperCase();i.timer=g}else{i.finder=i.finder+s.toUpperCase();i.timer=g}y=a.find("a");for(E=0,S=y.length;E<S;E++){x=e(y[E]);if(x.html().toUpperCase().indexOf(i.finder)===0){v(x,n);w(x.parent(),n,t);break}}n.data("dropkick",i)}},S=function(t){return e.trim(t).length>0?t:!1},x=function(t,n){var r=t.replace("{{ id }}",n.id).replace("{{ label }}",n.label).replace("{{ tabindex }}",n.tabindex),i=[],s,o,u,a,f;if(n.options&&n.options.length)for(o=0,u=n.options.length;o<u;o++){a=e(n.options[o]);o===0&&a.attr("selected")!==undefined&&a.attr("disabled")!==undefined?f=null:f=c.replace("{{ value }}",a.val()).replace("{{ current }}",S(a.val())===n.value?"dk_option_current":"").replace("{{ disabled }}",a.attr("disabled")!==undefined?"disabled":"").replace("{{ text }}",e.trim(a.html()));i[i.length]=f}s=e(r);s.find(".dk_options_inner").html(i.join(""));return s};s||(n.documentElement.className=n.documentElement.className+" dk_fouc");u.init=function(t){t=e.extend({},h,t);l=t.dropdownTemplate?t.dropdownTemplate:l;c=t.optionTemplate?t.optionTemplate:c;return this.each(function(){var n=e(this),r=n.find(":selected").first(),i=n.find("option"),s=n.data("dropkick")||{},u=n.attr("id")||n.attr("name"),f=t.width||n.outerWidth(),c=n.attr("tabindex")||"0",h=!1,p,v;if(s.id)return n;s.settings=t;s.tabindex=c;s.id=u;s.$original=r;s.$select=n;s.value=S(n.val())||S(r.attr("value"));s.label=r.text();s.options=i;h=x(l,s);s.settings.autoWidth&&h.find(".dk_toggle").css({width:f+"px"});n.before(h).appendTo(h);h=e('div[id="dk_container_'+u+'"]').fadeIn(t.startSpeed);p=t.theme||"default";h.addClass("dk_theme_"+p);s.theme=p;s.$dk=h;n.data("dropkick",s);h.addClass(n.attr("class"));h.data("dropkick",s);a[a.length]=n;h.on("focus.dropkick",function(){d=h.addClass("dk_focus")}).on("blur.dropkick",function(){h.removeClass("dk_focus");d=null});o&&s.settings.nativeMobile&&h.addClass("dk_mobile");s.settings.syncReverse&&n.on("change",function(t){var r=n.val(),i=e('a[data-dk-dropdown-value="'+r+'"]',h),o=i.text();h.find(".dk_label").text(o);s.settings.change&&s.settings.change.call(n,r,o);w(i.parent(),h,t)});v=n.attr("form")?e("#"+n.attr("form").replace(" ",", #")):n.closest("form");v.length&&v.on("reset",function(){n.dropkick("reset")})})};u.theme=function(t){var n=e(this).data("dropkick"),r=n.$dk,i="dk_theme_"+n.theme;r.removeClass(i).addClass("dk_theme_"+t);n.theme=t};u.reset=function(){return this.each(function(){var t=e(this).data("dropkick"),n=t.$dk,r=e('a[data-dk-dropdown-value="'+t.$original.attr("value")+'"]',n);t.$original.prop("selected",!0);n.find(".dk_label").text(t.label);w(r.parent(),n)})};u.setValue=function(t){return this.each(function(){var n=e(this).data("dropkick").$dk,r=e('.dk_options a[data-dk-dropdown-value="'+t+'"]',n);r.length?v(r,n)|w(r.parent(),n):console.warn("There is no option with this value in "+n.selector)})};u.refresh=function(){return this.each(function(){var t=e(this).data("dropkick"),n=t.$select,r=t.$dk,i,s;t.options=n.find("option");s=x(l,t).find(".dk_options_inner");r.find(".dk_options_inner").replaceWith(s);i=e('a[data-dk-dropdown-value="'+n.val()+'"]',r);w(i.parent(),r)})};e.fn.dropkick=function(e){if(!s){if(u[e])return u[e].apply(this,Array.prototype.slice.call(arguments,1));if(typeof e=="object"||!e)return u.init.apply(this,arguments)}};e(function(){e(n).on(i?"mousedown":"click",".dk_options a",function(){var t=e(this),n=t.parents(".dk_container").first();if(!t.parent().hasClass("disabled")){v(t,n);w(t.parent(),n);m(n)}return!1});e(n).on("keydown.dk_nav",function(e){var t;p?t=p:d&&(t=d);t&&E(e,t)});e(n).on("click",null,function(t){var n=e(t.target),r;if(p&&n.closest(".dk_container").length===0)m(p);else{if(n.is(".dk_toggle, .dk_label")){r=n.parents(".dk_container").first();if(r.hasClass("dk_open"))m(r);else{p&&m(p);b(r,t)}return!1}n.attr("for")&&!!e("#dk_container_"+n.attr("for"))[0]&&e("#dk_container_"+n.attr("for")).trigger("focus.dropkick")}});var r="onwheel"in t?"wheel":"onmousewheel"in n?"mousewheel":"MouseScrollEvent"in t?"DOMMouseScroll MozMousePixelScroll":!1;r&&e(n).on(r,".dk_options_inner",function(e){var t=e.originalEvent.wheelDelta||-e.originalEvent.deltaY||-e.originalEvent.detail;if(i){this.scrollTop-=Math.round(t/10);return!1}return t>0&&this.scrollTop<=0||t<0&&this.scrollTop>=this.scrollHeight-this.offsetHeight?!1:!0})})})(jQuery,window,document);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment