diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..6035f5d --- /dev/null +++ b/bower.json @@ -0,0 +1,7 @@ +{ + "name": "jq-dropdown", + "version": "0.1.0", + dependencies": { + "jquery": ">=1.10.2" + } +} diff --git a/jquery.dropdown.css b/jquery.dropdown.css index 867455d..31327e8 100644 --- a/jquery.dropdown.css +++ b/jquery.dropdown.css @@ -1,11 +1,11 @@ -.dropdown { +.jq-dropdown { position: absolute; z-index: 9999999; display: none; } -.dropdown .dropdown-menu, -.dropdown .dropdown-panel { +.jq-dropdown .dropdown-menu, +.jq-dropdown .dropdown-panel { min-width: 160px; max-width: 360px; list-style: none; @@ -19,15 +19,15 @@ margin: 0; } -.dropdown .dropdown-panel { +.jq-dropdown .dropdown-panel { padding: 10px; } -.dropdown.dropdown-tip { +.jq-dropdown.dropdown-tip { margin-top: 8px; } -.dropdown.dropdown-tip:before { +.jq-dropdown.dropdown-tip:before { position: absolute; top: -6px; left: 9px; @@ -39,12 +39,12 @@ display: inline-block; } -.dropdown.dropdown-tip.dropdown-anchor-right:before { +.jq-dropdown.dropdown-tip.dropdown-anchor-right:before { left: auto; right: 9px; } -.dropdown.dropdown-tip:after { +.jq-dropdown.dropdown-tip:after { position: absolute; top: -5px; left: 10px; @@ -55,27 +55,27 @@ display: inline-block; } -.dropdown.dropdown-tip.dropdown-anchor-right:after { +.jq-dropdown.dropdown-tip.dropdown-anchor-right:after { left: auto; right: 10px; } -.dropdown.dropdown-scroll .dropdown-menu, -.dropdown.dropdown-scroll .dropdown-panel { +.jq-dropdown.dropdown-scroll .dropdown-menu, +.jq-dropdown.dropdown-scroll .dropdown-panel { max-height: 358px; overflow: auto; } -.dropdown .dropdown-menu LI { +.jq-dropdown .dropdown-menu LI { list-style: none; padding: 0 0; margin: 0; line-height: 18px; } -.dropdown .dropdown-menu LI > A, -.dropdown .dropdown-menu LABEL { +.jq-dropdown .dropdown-menu LI > A, +.jq-dropdown .dropdown-menu LABEL { display: block; color: #555; text-decoration: none; @@ -84,30 +84,16 @@ white-space: nowrap; } -.dropdown .dropdown-menu LI > A:hover, -.dropdown .dropdown-menu LABEL:hover { +.jq-dropdown .dropdown-menu LI > A:hover, +.jq-dropdown .dropdown-menu LABEL:hover { background-color: #08C; color: #FFF; cursor: pointer; } -.dropdown .dropdown-menu .dropdown-divider { +.jq-dropdown .dropdown-menu .dropdown-divider { font-size: 1px; border-top: solid 1px #E5E5E5; padding: 0; margin: 5px 0; } - -/* Icon Examples - icons courtesy of http://p.yusukekamiyamane.com/ */ -.dropdown.has-icons LI > A { - padding-left: 30px; - background-position: 8px center; - background-repeat: no-repeat; -} - -.dropdown .undo A { background-image: url(icons/arrow-curve-180-left.png); } -.dropdown .redo A { background-image: url(icons/arrow-curve.png); } -.dropdown .cut A { background-image: url(icons/scissors.png); } -.dropdown .copy A { background-image: url(icons/document-copy.png); } -.dropdown .paste A { background-image: url(icons/clipboard.png); } -.dropdown .delete A { background-image: url(icons/cross-script.png); } \ No newline at end of file diff --git a/jquery.dropdown.js b/jquery.dropdown.js index 2664761..762d561 100644 --- a/jquery.dropdown.js +++ b/jquery.dropdown.js @@ -56,7 +56,7 @@ if (jQuery) (function ($) { trigger.addClass('dropdown-open'); dropdown .data('dropdown-trigger', trigger) - .show(); + .slideDown(); // Position it position(); @@ -76,7 +76,7 @@ if (jQuery) (function ($) { var targetGroup = event ? $(event.target).parents().addBack() : null; // Are we clicking anywhere in a dropdown? - if (targetGroup && targetGroup.is('.dropdown')) { + if (targetGroup && targetGroup.is('.jq-dropdown')) { // Is it a dropdown menu? if (targetGroup.is('.dropdown-menu')) { // Did we click on an option? If so close it. @@ -88,10 +88,10 @@ if (jQuery) (function ($) { } // Hide any dropdown that may be showing - $(document).find('.dropdown:visible').each(function () { + $(document).find('.jq-dropdown:visible').each(function () { var dropdown = $(this); dropdown - .hide() + .slideUp() .removeData('dropdown-trigger') .trigger('hide', { dropdown: dropdown }); }); @@ -103,7 +103,7 @@ if (jQuery) (function ($) { function position() { - var dropdown = $('.dropdown:visible').eq(0), + var dropdown = $('.jq-dropdown:visible').eq(0), trigger = dropdown.data('dropdown-trigger'), hOffset = trigger ? parseInt(trigger.attr('data-horizontal-offset') || 0, 10) : null, vOffset = trigger ? parseInt(trigger.attr('data-vertical-offset') || 0, 10) : null; @@ -128,8 +128,8 @@ if (jQuery) (function ($) { } } - $(document).on('click.dropdown', '[data-dropdown]', show); - $(document).on('click.dropdown', hide); + $(document).on('click.jq-dropdown', '[data-dropdown]', show); + $(document).on('click.jq-dropdown', hide); $(window).on('resize', position); -})(jQuery); \ No newline at end of file +})(jQuery); diff --git a/jquery.dropdown.min.js b/jquery.dropdown.min.js deleted file mode 100644 index 7599854..0000000 --- a/jquery.dropdown.min.js +++ /dev/null @@ -1,8 +0,0 @@ -/* - * jQuery dropdown: A simple dropdown plugin - * - * Copyright 2013 Cory LaViska for A Beautiful Site, LLC. (http://abeautifulsite.net/) - * - * Licensed under the MIT license: http://opensource.org/licenses/MIT - * -*/jQuery&&function(e){function t(t,i){var s=t?e(this):i,o=e(s.attr("data-dropdown")),u=s.hasClass("dropdown-open");if(t){if(e(t.target).hasClass("dropdown-ignore"))return;t.preventDefault();t.stopPropagation()}else if(s!==i.target&&e(i.target).hasClass("dropdown-ignore"))return;n();if(u||s.hasClass("dropdown-disabled"))return;s.addClass("dropdown-open");o.data("dropdown-trigger",s).show();r();o.trigger("show",{dropdown:o,trigger:s})}function n(t){var n=t?e(t.target).parents().addBack():null;if(n&&n.is(".dropdown")){if(!n.is(".dropdown-menu"))return;if(!n.is("A"))return}e(document).find(".dropdown:visible").each(function(){var t=e(this);t.hide().removeData("dropdown-trigger").trigger("hide",{dropdown:t})});e(document).find(".dropdown-open").removeClass("dropdown-open")}function r(){var t=e(".dropdown:visible").eq(0),n=t.data("dropdown-trigger"),r=n?parseInt(n.attr("data-horizontal-offset")||0,10):null,i=n?parseInt(n.attr("data-vertical-offset")||0,10):null;if(t.length===0||!n)return;t.hasClass("dropdown-relative")?t.css({left:t.hasClass("dropdown-anchor-right")?n.position().left-(t.outerWidth(!0)-n.outerWidth(!0))-parseInt(n.css("margin-right"),10)+r:n.position().left+parseInt(n.css("margin-left"),10)+r,top:n.position().top+n.outerHeight(!0)-parseInt(n.css("margin-top"),10)+i}):t.css({left:t.hasClass("dropdown-anchor-right")?n.offset().left-(t.outerWidth()-n.outerWidth())+r:n.offset().left+r,top:n.offset().top+n.outerHeight()+i})}e.extend(e.fn,{dropdown:function(r,i){switch(r){case"show":t(null,e(this));return e(this);case"hide":n();return e(this);case"attach":return e(this).attr("data-dropdown",i);case"detach":n();return e(this).removeAttr("data-dropdown");case"disable":return e(this).addClass("dropdown-disabled");case"enable":n();return e(this).removeClass("dropdown-disabled")}}});e(document).on("click.dropdown","[data-dropdown]",t);e(document).on("click.dropdown",n);e(window).on("resize",r)}(jQuery); \ No newline at end of file diff --git a/readme.md b/readme.md index 005fea6..c13e8ee 100644 --- a/readme.md +++ b/readme.md @@ -1,9 +1,15 @@ -# jQuery Bootstrap-style Dropdowns # +# jQ Bootstrap-style Dropdowns# -Copyright 2013 Cory LaViska for [A Beautiful Site, LLC.](http://abeautifulsite.net/) +This is a fork of Jquery Drop down . The primary disadvantage with Jquery dropdown is that it overrides the bootstrap default dropdowns. Hence if you have used exitsing drop downs in your website all of them will be rendered useless. + +I have modified it to not do so. I have also added animations. The long term plan is to make it into an angular directive as well. + +The original work is here [A Beautiful Site, LLC.](http://abeautifulsite.net/) Licensed under the MIT license: http://opensource.org/licenses/MIT ## Demo & Documentation ## -http://labs.abeautifulsite.net/jquery-dropdown/ \ No newline at end of file +All the features mentioned here are working in this too. The main change is that it adds a class .jq-dropdown and has animation while showing and hiding the dropdown. + +http://labs.abeautifulsite.net/jquery-dropdown/