選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
 
 
 
 
 
 

366 行
9.4 KiB

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