jquery.ui.button.js 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419
  1. /*!
  2. * jQuery UI Button v1.9 stable
  3. * http://jqueryui.com
  4. *
  5. * Copyright 2012 jQuery Foundation and other contributors
  6. * Released under the MIT license.
  7. * http://jquery.org/license
  8. *
  9. * http://api.jqueryui.com/button/
  10. *
  11. * Depends:
  12. * jquery.ui.core.js
  13. * jquery.ui.widget.js
  14. */
  15. (function( $, undefined ) {
  16. var lastActive, startXPos, startYPos, clickDragged,
  17. baseClasses = "ui-button ui-widget ui-state-default ui-corner-all",
  18. stateClasses = "ui-state-hover ui-state-active ",
  19. typeClasses = "ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon-primary ui-button-text-icon-secondary ui-button-text-only",
  20. formResetHandler = function() {
  21. var buttons = $( this ).find( ":ui-button" );
  22. setTimeout(function() {
  23. buttons.button( "refresh" );
  24. }, 1 );
  25. },
  26. radioGroup = function( radio ) {
  27. var name = radio.name,
  28. form = radio.form,
  29. radios = $( [] );
  30. if ( name ) {
  31. if ( form ) {
  32. radios = $( form ).find( "[name='" + name + "']" );
  33. } else {
  34. radios = $( "[name='" + name + "']", radio.ownerDocument )
  35. .filter(function() {
  36. return !this.form;
  37. });
  38. }
  39. }
  40. return radios;
  41. };
  42. $.widget( "ui.button", {
  43. version: "@VERSION",
  44. defaultElement: "<button>",
  45. options: {
  46. disabled: null,
  47. text: true,
  48. label: null,
  49. icons: {
  50. primary: null,
  51. secondary: null
  52. }
  53. },
  54. _create: function() {
  55. this.element.closest( "form" )
  56. .unbind( "reset" + this.eventNamespace )
  57. .bind( "reset" + this.eventNamespace, formResetHandler );
  58. if ( typeof this.options.disabled !== "boolean" ) {
  59. this.options.disabled = !!this.element.prop( "disabled" );
  60. } else {
  61. this.element.prop( "disabled", this.options.disabled );
  62. }
  63. this._determineButtonType();
  64. this.hasTitle = !!this.buttonElement.attr( "title" );
  65. var that = this,
  66. options = this.options,
  67. toggleButton = this.type === "checkbox" || this.type === "radio",
  68. activeClass = !toggleButton ? "ui-state-active" : "",
  69. focusClass = "ui-state-focus";
  70. if ( options.label === null ) {
  71. options.label = (this.type === "input" ? this.buttonElement.val() : this.buttonElement.html());
  72. }
  73. this._hoverable( this.buttonElement );
  74. this.buttonElement
  75. .addClass( baseClasses )
  76. .attr( "role", "button" )
  77. .bind( "mouseenter" + this.eventNamespace, function() {
  78. if ( options.disabled ) {
  79. return;
  80. }
  81. if ( this === lastActive ) {
  82. $( this ).addClass( "ui-state-active" );
  83. }
  84. })
  85. .bind( "mouseleave" + this.eventNamespace, function() {
  86. if ( options.disabled ) {
  87. return;
  88. }
  89. $( this ).removeClass( activeClass );
  90. })
  91. .bind( "click" + this.eventNamespace, function( event ) {
  92. if ( options.disabled ) {
  93. event.preventDefault();
  94. event.stopImmediatePropagation();
  95. }
  96. });
  97. this.element
  98. .bind( "focus" + this.eventNamespace, function() {
  99. // no need to check disabled, focus won't be triggered anyway
  100. that.buttonElement.addClass( focusClass );
  101. })
  102. .bind( "blur" + this.eventNamespace, function() {
  103. that.buttonElement.removeClass( focusClass );
  104. });
  105. if ( toggleButton ) {
  106. this.element.bind( "change" + this.eventNamespace, function() {
  107. if ( clickDragged ) {
  108. return;
  109. }
  110. that.refresh();
  111. });
  112. // if mouse moves between mousedown and mouseup (drag) set clickDragged flag
  113. // prevents issue where button state changes but checkbox/radio checked state
  114. // does not in Firefox (see ticket #6970)
  115. this.buttonElement
  116. .bind( "mousedown" + this.eventNamespace, function( event ) {
  117. if ( options.disabled ) {
  118. return;
  119. }
  120. clickDragged = false;
  121. startXPos = event.pageX;
  122. startYPos = event.pageY;
  123. })
  124. .bind( "mouseup" + this.eventNamespace, function( event ) {
  125. if ( options.disabled ) {
  126. return;
  127. }
  128. if ( startXPos !== event.pageX || startYPos !== event.pageY ) {
  129. clickDragged = true;
  130. }
  131. });
  132. }
  133. if ( this.type === "checkbox" ) {
  134. this.buttonElement.bind( "click" + this.eventNamespace, function() {
  135. if ( options.disabled || clickDragged ) {
  136. return false;
  137. }
  138. $( this ).toggleClass( "ui-state-active" );
  139. that.buttonElement.attr( "aria-pressed", that.element[0].checked );
  140. });
  141. } else if ( this.type === "radio" ) {
  142. this.buttonElement.bind( "click" + this.eventNamespace, function() {
  143. if ( options.disabled || clickDragged ) {
  144. return false;
  145. }
  146. $( this ).addClass( "ui-state-active" );
  147. that.buttonElement.attr( "aria-pressed", "true" );
  148. var radio = that.element[ 0 ];
  149. radioGroup( radio )
  150. .not( radio )
  151. .map(function() {
  152. return $( this ).button( "widget" )[ 0 ];
  153. })
  154. .removeClass( "ui-state-active" )
  155. .attr( "aria-pressed", "false" );
  156. });
  157. } else {
  158. this.buttonElement
  159. .bind( "mousedown" + this.eventNamespace, function() {
  160. if ( options.disabled ) {
  161. return false;
  162. }
  163. $( this ).addClass( "ui-state-active" );
  164. lastActive = this;
  165. that.document.one( "mouseup", function() {
  166. lastActive = null;
  167. });
  168. })
  169. .bind( "mouseup" + this.eventNamespace, function() {
  170. if ( options.disabled ) {
  171. return false;
  172. }
  173. $( this ).removeClass( "ui-state-active" );
  174. })
  175. .bind( "keydown" + this.eventNamespace, function(event) {
  176. if ( options.disabled ) {
  177. return false;
  178. }
  179. if ( event.keyCode === $.ui.keyCode.SPACE || event.keyCode === $.ui.keyCode.ENTER ) {
  180. $( this ).addClass( "ui-state-active" );
  181. }
  182. })
  183. .bind( "keyup" + this.eventNamespace, function() {
  184. $( this ).removeClass( "ui-state-active" );
  185. });
  186. if ( this.buttonElement.is("a") ) {
  187. this.buttonElement.keyup(function(event) {
  188. if ( event.keyCode === $.ui.keyCode.SPACE ) {
  189. // TODO pass through original event correctly (just as 2nd argument doesn't work)
  190. $( this ).click();
  191. }
  192. });
  193. }
  194. }
  195. // TODO: pull out $.Widget's handling for the disabled option into
  196. // $.Widget.prototype._setOptionDisabled so it's easy to proxy and can
  197. // be overridden by individual plugins
  198. this._setOption( "disabled", options.disabled );
  199. this._resetButton();
  200. },
  201. _determineButtonType: function() {
  202. var ancestor, labelSelector, checked;
  203. if ( this.element.is("[type=checkbox]") ) {
  204. this.type = "checkbox";
  205. } else if ( this.element.is("[type=radio]") ) {
  206. this.type = "radio";
  207. } else if ( this.element.is("input") ) {
  208. this.type = "input";
  209. } else {
  210. this.type = "button";
  211. }
  212. if ( this.type === "checkbox" || this.type === "radio" ) {
  213. // we don't search against the document in case the element
  214. // is disconnected from the DOM
  215. ancestor = this.element.parents().last();
  216. labelSelector = "label[for='" + this.element.attr("id") + "']";
  217. this.buttonElement = ancestor.find( labelSelector );
  218. if ( !this.buttonElement.length ) {
  219. ancestor = ancestor.length ? ancestor.siblings() : this.element.siblings();
  220. this.buttonElement = ancestor.filter( labelSelector );
  221. if ( !this.buttonElement.length ) {
  222. this.buttonElement = ancestor.find( labelSelector );
  223. }
  224. }
  225. this.element.addClass( "ui-helper-hidden-accessible" );
  226. checked = this.element.is( ":checked" );
  227. if ( checked ) {
  228. this.buttonElement.addClass( "ui-state-active" );
  229. }
  230. this.buttonElement.prop( "aria-pressed", checked );
  231. } else {
  232. this.buttonElement = this.element;
  233. }
  234. },
  235. widget: function() {
  236. return this.buttonElement;
  237. },
  238. _destroy: function() {
  239. this.element
  240. .removeClass( "ui-helper-hidden-accessible" );
  241. this.buttonElement
  242. .removeClass( baseClasses + " " + stateClasses + " " + typeClasses )
  243. .removeAttr( "role" )
  244. .removeAttr( "aria-pressed" )
  245. .html( this.buttonElement.find(".ui-button-text").html() );
  246. if ( !this.hasTitle ) {
  247. this.buttonElement.removeAttr( "title" );
  248. }
  249. },
  250. _setOption: function( key, value ) {
  251. this._super( key, value );
  252. if ( key === "disabled" ) {
  253. if ( value ) {
  254. this.element.prop( "disabled", true );
  255. } else {
  256. this.element.prop( "disabled", false );
  257. }
  258. return;
  259. }
  260. this._resetButton();
  261. },
  262. refresh: function() {
  263. //See #8237 & #8828
  264. var isDisabled = this.element.is( "input, button" ) ? this.element.is( ":disabled" ) : this.element.hasClass( "ui-button-disabled" );
  265. if ( isDisabled !== this.options.disabled ) {
  266. this._setOption( "disabled", isDisabled );
  267. }
  268. if ( this.type === "radio" ) {
  269. radioGroup( this.element[0] ).each(function() {
  270. if ( $( this ).is( ":checked" ) ) {
  271. $( this ).button( "widget" )
  272. .addClass( "ui-state-active" )
  273. .attr( "aria-pressed", "true" );
  274. } else {
  275. $( this ).button( "widget" )
  276. .removeClass( "ui-state-active" )
  277. .attr( "aria-pressed", "false" );
  278. }
  279. });
  280. } else if ( this.type === "checkbox" ) {
  281. if ( this.element.is( ":checked" ) ) {
  282. this.buttonElement
  283. .addClass( "ui-state-active" )
  284. .attr( "aria-pressed", "true" );
  285. } else {
  286. this.buttonElement
  287. .removeClass( "ui-state-active" )
  288. .attr( "aria-pressed", "false" );
  289. }
  290. }
  291. },
  292. _resetButton: function() {
  293. if ( this.type === "input" ) {
  294. if ( this.options.label ) {
  295. this.element.val( this.options.label );
  296. }
  297. return;
  298. }
  299. var buttonElement = this.buttonElement.removeClass( typeClasses ),
  300. buttonText = $( "<span></span>", this.document[0] )
  301. .addClass( "ui-button-text" )
  302. .html( this.options.label )
  303. .appendTo( buttonElement.empty() )
  304. .text(),
  305. icons = this.options.icons,
  306. multipleIcons = icons.primary && icons.secondary,
  307. buttonClasses = [];
  308. if ( icons.primary || icons.secondary ) {
  309. if ( this.options.text ) {
  310. buttonClasses.push( "ui-button-text-icon" + ( multipleIcons ? "s" : ( icons.primary ? "-primary" : "-secondary" ) ) );
  311. }
  312. if ( icons.primary ) {
  313. buttonElement.prepend( "<span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span>" );
  314. }
  315. if ( icons.secondary ) {
  316. buttonElement.append( "<span class='ui-button-icon-secondary ui-icon " + icons.secondary + "'></span>" );
  317. }
  318. if ( !this.options.text ) {
  319. buttonClasses.push( multipleIcons ? "ui-button-icons-only" : "ui-button-icon-only" );
  320. if ( !this.hasTitle ) {
  321. buttonElement.attr( "title", $.trim( buttonText ) );
  322. }
  323. }
  324. } else {
  325. buttonClasses.push( "ui-button-text-only" );
  326. }
  327. buttonElement.addClass( buttonClasses.join( " " ) );
  328. }
  329. });
  330. $.widget( "ui.buttonset", {
  331. version: "@VERSION",
  332. options: {
  333. items: "button, input[type=button], input[type=submit], input[type=reset], input[type=checkbox], input[type=radio], a, :data(button)"
  334. },
  335. _create: function() {
  336. this.element.addClass( "ui-buttonset" );
  337. },
  338. _init: function() {
  339. this.refresh();
  340. },
  341. _setOption: function( key, value ) {
  342. if ( key === "disabled" ) {
  343. this.buttons.button( "option", key, value );
  344. }
  345. this._super( key, value );
  346. },
  347. refresh: function() {
  348. var rtl = this.element.css( "direction" ) === "rtl";
  349. this.buttons = this.element.find( this.options.items )
  350. .filter( ":ui-button" )
  351. .button( "refresh" )
  352. .end()
  353. .not( ":ui-button" )
  354. .button()
  355. .end()
  356. .map(function() {
  357. return $( this ).button( "widget" )[ 0 ];
  358. })
  359. .removeClass( "ui-corner-all ui-corner-left ui-corner-right" )
  360. .filter( ":first" )
  361. .addClass( rtl ? "ui-corner-right" : "ui-corner-left" )
  362. .end()
  363. .filter( ":last" )
  364. .addClass( rtl ? "ui-corner-left" : "ui-corner-right" )
  365. .end()
  366. .end();
  367. },
  368. _destroy: function() {
  369. this.element.removeClass( "ui-buttonset" );
  370. this.buttons
  371. .map(function() {
  372. return $( this ).button( "widget" )[ 0 ];
  373. })
  374. .removeClass( "ui-corner-left ui-corner-right" )
  375. .end()
  376. .button( "destroy" );
  377. }
  378. });
  379. }( jQuery ) );