Advertisement
Guest User

Bootstrap Dropdown Ajax Hack

a guest
Oct 2nd, 2012
1,669
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. !function ($) {
  2.  
  3.   "use strict"; // jshint ;_;
  4.  
  5.  
  6.  /* DROPDOWN CLASS DEFINITION
  7. * ========================= */
  8.  
  9.   var toggle = '[data-toggle=dropdown]'
  10.     , Dropdown = function (element) {
  11.         var $el = $(element).on('click.dropdown.data-api', this.toggle)
  12.         $('html').on('click.dropdown.data-api', function () {
  13.           $el.parent().removeClass('open')
  14.         })
  15.       }
  16.  
  17.   Dropdown.prototype = {
  18.  
  19.     constructor: Dropdown
  20.  
  21.   , toggle: function (e) {
  22.       var $this = $(this)
  23.         , $parent
  24.         , isActive
  25.  
  26.       if ($this.is('.disabled, :disabled')) return
  27.  
  28.       $parent = getParent($this)
  29.  
  30.       isActive = $parent.hasClass('open')
  31.  
  32.       clearMenus()
  33.  
  34.       if (!isActive) {
  35.         $parent.toggleClass('open')
  36.         $this.focus()
  37.         var $target = $this.attr('href');
  38.         if ($target && $target !='#') {
  39.             getRemoteMenu ($this)
  40.         }
  41.       }
  42.  
  43.       e.preventDefault()
  44.       e.stopPropagation()
  45.     }
  46.  
  47.   , keydown: function (e) {
  48.       var $this
  49.         , $items
  50.         , $active
  51.         , $parent
  52.         , isActive
  53.         , index
  54.  
  55.       if (!/(38|40|27)/.test(e.keyCode)) return
  56.  
  57.       $this = $(this)
  58.  
  59.       e.preventDefault()
  60.       e.stopPropagation()
  61.  
  62.       if ($this.is('.disabled, :disabled')) return
  63.  
  64.       $parent = getParent($this)
  65.  
  66.       isActive = $parent.hasClass('open')
  67.  
  68.       if (!isActive || (isActive && e.keyCode == 27)) return $this.click()
  69.  
  70.       $items = $('[role=menu] li:not(.divider) a', $parent)
  71.  
  72.       if (!$items.length) return
  73.  
  74.       index = $items.index($items.filter(':focus'))
  75.  
  76.       if (e.keyCode == 38 && index > 0) index-- // up
  77.       if (e.keyCode == 40 && index < $items.length - 1) index++ // down
  78.       if (!~index) index = 0
  79.  
  80.       $items
  81.         .eq(index)
  82.         .focus()
  83.     }
  84.  
  85.   }
  86.  
  87.   function clearMenus() {
  88.     getParent($(toggle))
  89.       .removeClass('open')
  90.   }
  91.  
  92.   function getRemoteMenu ($this){
  93.     $.post($this.attr('href'), $this.data(), function(data) {
  94.       var $parent = getParent($this);
  95.       $parent.find('.dropdown-menu').html(data);
  96.     });
  97.   }
  98.  
  99.   function getParent($this) {
  100.     var selector = $this.attr('data-target')
  101.       , $parent
  102.  
  103.     if (!selector) {
  104.       selector = $this.attr('href')
  105.       selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
  106.     }
  107.  
  108.     $parent = $(selector)
  109.     $parent.length || ($parent = $this.parent())
  110.  
  111.     return $parent
  112.   }
  113.  
  114.  
  115.   /* DROPDOWN PLUGIN DEFINITION
  116. * ========================== */
  117.  
  118.   $.fn.dropdown = function (option) {
  119.     return this.each(function () {
  120.       var $this = $(this)
  121.         , data = $this.data('dropdown')
  122.       if (!data) $this.data('dropdown', (data = new Dropdown(this)))
  123.       if (typeof option == 'string') data[option].call($this)
  124.     })
  125.   }
  126.  
  127.   $.fn.dropdown.Constructor = Dropdown
  128.  
  129.  
  130.   /* APPLY TO STANDARD DROPDOWN ELEMENTS
  131. * =================================== */
  132.  
  133.   $(function () {
  134.     $('html')
  135.       .on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
  136.     $('body')
  137.       .on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
  138.       .on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
  139.       .on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
  140.   })
  141.  
  142. }(window.jQuery);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement