From 2b8e797c630d4a1653d832f41a07626da98738cf Mon Sep 17 00:00:00 2001 From: Florian HENRY Date: Thu, 16 Jul 2015 15:45:34 +0200 Subject: [PATCH 1/5] NEW : upgrade version of ColVis datable extre feature --- .../datatables/extras/ColVis/css/ColVis.css | 173 ++- .../extras/ColVis/css/ColVisAlt.css | 104 -- .../extras/ColVis/images/button.png | Bin 1161 -> 0 bytes .../datatables/extras/ColVis/js/ColVis.js | 1192 +++++++++-------- .../datatables/extras/ColVis/js/ColVis.min.js | 58 +- 5 files changed, 816 insertions(+), 711 deletions(-) mode change 100644 => 100755 htdocs/includes/jquery/plugins/datatables/extras/ColVis/css/ColVis.css delete mode 100644 htdocs/includes/jquery/plugins/datatables/extras/ColVis/css/ColVisAlt.css delete mode 100644 htdocs/includes/jquery/plugins/datatables/extras/ColVis/images/button.png mode change 100644 => 100755 htdocs/includes/jquery/plugins/datatables/extras/ColVis/js/ColVis.js diff --git a/htdocs/includes/jquery/plugins/datatables/extras/ColVis/css/ColVis.css b/htdocs/includes/jquery/plugins/datatables/extras/ColVis/css/ColVis.css old mode 100644 new mode 100755 index a3bf8e20958..51f546de8ed --- a/htdocs/includes/jquery/plugins/datatables/extras/ColVis/css/ColVis.css +++ b/htdocs/includes/jquery/plugins/datatables/extras/ColVis/css/ColVis.css @@ -2,21 +2,69 @@ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ColVis styles */ -.ColVis { +div.ColVis { float: right; margin-bottom: 1em; } -.ColVis_Button { +button.ColVis_Button, +ul.ColVis_collection li { position: relative; float: left; margin-right: 3px; - padding: 3px 5px; - height: 30px; - background-color: #fff; - border: 1px solid #d0d0d0; + padding: 5px 8px; + border: 1px solid #999; cursor: pointer; *cursor: hand; + font-size: 0.88em; + color: black !important; + white-space: nowrap; + + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + -ms-border-radius: 2px; + -o-border-radius: 2px; + border-radius: 2px; + + -webkit-box-shadow: 1px 1px 3px #ccc; + -moz-box-shadow: 1px 1px 3px #ccc; + -ms-box-shadow: 1px 1px 3px #ccc; + -o-box-shadow: 1px 1px 3px #ccc; + box-shadow: 1px 1px 3px #ccc; + + /* Generated by http://www.colorzilla.com/gradient-editor/ */ + background: #ffffff; /* Old browsers */ + background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* Chrome10+,Safari5.1+ */ + background: -moz-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* FF3.6+ */ + background: -ms-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* IE10+ */ + background: -o-linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* Opera 11.10+ */ + background: linear-gradient(top, #ffffff 0%,#f3f3f3 89%,#f9f9f9 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9f9f9',GradientType=0 ); /* IE6-9 */ +} + +.ColVis_Button:hover, +ul.ColVis_collection li:hover { + border: 1px solid #666; + text-decoration: none !important; + + -webkit-box-shadow: 1px 1px 3px #999; + -moz-box-shadow: 1px 1px 3px #999; + -ms-box-shadow: 1px 1px 3px #999; + -o-box-shadow: 1px 1px 3px #999; + box-shadow: 1px 1px 3px #999; + + background: #f3f3f3; /* Old browsers */ + background: -webkit-linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* Chrome10+,Safari5.1+ */ + background: -moz-linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* FF3.6+ */ + background: -ms-linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* IE10+ */ + background: -o-linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* Opera 11.10+ */ + background: linear-gradient(top, #f3f3f3 0%,#e2e2e2 89%,#f4f4f4 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */ +} + +button.ColVis_Button { + height: 30px; + padding: 3px 8px; } button.ColVis_Button::-moz-focus-inner { @@ -24,30 +72,105 @@ button.ColVis_Button::-moz-focus-inner { padding: 0; } -.ColVis_text_hover { - border: 1px solid #999; - background-color: #f0f0f0; +button.ColVis_Button:active { + outline: none; } + div.ColVis_collectionBackground { + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; background-color: black; z-index: 1100; } -div.ColVis_collection { - position: relative; +ul.ColVis_collection { + list-style: none; width: 150px; - background-color: #f3f3f3; - padding: 3px; + padding: 8px 8px 4px 8px; + margin: 0; border: 1px solid #ccc; - z-index: 1102; + border: 1px solid rgba( 0, 0, 0, 0.4 ); + background-color: #f3f3f3; + background-color: rgba( 255, 255, 255, 0.3 ); + overflow: hidden; + z-index: 2002; + + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; + border-radius: 5px; + + -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); + -ms-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); + -o-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); + box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); } -div.ColVis_collection button.ColVis_Button { - background-color: white; - width: 100%; +ul.ColVis_collection li { + position: relative; + height: auto; + left: 0; + right: 0; + padding: 0.5em; + + display: block; float: none; - margin-bottom: 2px; + margin-bottom: 4px; + + -webkit-box-shadow: 1px 1px 3px #999; + -moz-box-shadow: 1px 1px 3px #999; + -ms-box-shadow: 1px 1px 3px #999; + -o-box-shadow: 1px 1px 3px #999; + box-shadow: 1px 1px 3px #999; +} + +ul.ColVis_collection li { + text-align: left; +} + +ul.ColVis_collection li.ColVis_Button:hover { + border: 1px solid #999; + background-color: #f0f0f0; +} + +ul.ColVis_collection li span { + display: inline-block; + padding-left: 0.5em; + cursor: pointer; +} + + +ul.ColVis_collection li.ColVis_Special { + border-color: #555; + background: rgb(237,237,237); /* Old browsers */ + background: -webkit-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(214,214,214,1) 77%,rgba(232,232,232,1) 100%); /* Chrome10+,Safari5.1+ */ + background: -moz-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(214,214,214,1) 77%, rgba(232,232,232,1) 100%); /* FF3.6+ */ + background: -ms-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(214,214,214,1) 77%,rgba(232,232,232,1) 100%); /* IE10+ */ + background: -o-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(214,214,214,1) 77%,rgba(232,232,232,1) 100%); /* Opera 11.10+ */ + background: linear-gradient(to bottom, rgba(237,237,237,1) 0%,rgba(214,214,214,1) 77%,rgba(232,232,232,1) 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e8e8e8',GradientType=0 ); /* IE6-9 */ +} + +ul.ColVis_collection li.ColVis_Special:hover { + background: #e2e2e2; /* Old browsers */ + background: -webkit-linear-gradient(top, #d0d0d0 0%,#d5d5d5 89%,#e2e2e2 100%); /* Chrome10+,Safari5.1+ */ + background: -moz-linear-gradient(top, #d0d0d0 0%,#d5d5d5 89%,#e2e2e2 100%); /* FF3.6+ */ + background: -ms-linear-gradient(top, #d0d0d0 0%,#d5d5d5 89%,#e2e2e2 100%); /* IE10+ */ + background: -o-linear-gradient(top, #d0d0d0 0%,#d5d5d5 89%,#e2e2e2 100%); /* Opera 11.10+ */ + background: linear-gradient(top, #d0d0d0 0%,#d5d5d5 89%,#e2e2e2 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-9 */ +} + + +span.ColVis_radio { + display: inline-block; + width: 20px; } div.ColVis_catcher { @@ -60,17 +183,3 @@ div.ColVis_catcher { } - -button.ColVis_Button { - text-align: left; -} - -div.ColVis_collection button.ColVis_Button:hover { - border: 1px solid #999; - background-color: #f0f0f0; -} - -span.ColVis_radio { - display: inline-block; - width: 20px; -} diff --git a/htdocs/includes/jquery/plugins/datatables/extras/ColVis/css/ColVisAlt.css b/htdocs/includes/jquery/plugins/datatables/extras/ColVis/css/ColVisAlt.css deleted file mode 100644 index 93f35b61d7d..00000000000 --- a/htdocs/includes/jquery/plugins/datatables/extras/ColVis/css/ColVisAlt.css +++ /dev/null @@ -1,104 +0,0 @@ -/* - * An alternative styling for ColVis - * Note you will likely have to change the path for the background image used by jQuery UI theming: - * ../../../../examples/examples_support/themes/smoothness - */ - -.ColVis { - position: absolute; - right: 0; - top: 0; - width: 15px; - height: 30px; -} - -.ColVis_MasterButton { - height: 100%; - width: 100%; - border-left-width: 0; - cursor: pointer; - *cursor: hand; - background: url('../images/button.png') no-repeat top left; -} - -button.ColVis_Button::-moz-focus-inner { - border: none !important; - padding: 0; -} - -.ColVis_text_hover { - border: 1px solid #999; - background-color: #f0f0f0; -} - -div.ColVis_collectionBackground { - background-color: black; - z-index: 1100; -} - -div.ColVis_collection { - position: relative; - width: 150px; - background-color: #f9f9f9; - padding: 3px; - border: 1px solid #ccc; - z-index: 1102; -} - -div.ColVis_collection button.ColVis_Button { - height: 30px; - width: 100%; - margin-right: 3px; - margin-bottom: 2px; - padding: 3px 5px; - cursor: pointer; - *cursor: hand; - text-align: left; -} - -div.ColVis_collection button.ColVis_Button:hover { - border: 1px solid #999; - background-color: #f0f0f0; -} - -div.ColVis_catcher { - position: absolute; - z-index: 1101; -} - -span.ColVis_radio { - display: inline-block; - width: 20px; -} - -button.ColVis_Restore { - margin-top: 15px; -} - -button.ColVis_Restore span { - display: inline-block; - padding-left: 10px; - text-align: left; -} - -.disabled { - color: #999; -} - - - -/* - * Styles needed for DataTables scrolling - */ -div.dataTables_scrollHead { - position: relative; - overflow: hidden; -} - -div.dataTables_scrollBody { - overflow-y: scroll; -} - -div.dataTables_scrollFoot { - overflow: hidden; -} diff --git a/htdocs/includes/jquery/plugins/datatables/extras/ColVis/images/button.png b/htdocs/includes/jquery/plugins/datatables/extras/ColVis/images/button.png deleted file mode 100644 index 38f032004fc6ccd992278581b9e5a1e6b367acd5..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1161 zcmaJ>U1$?o6rS|Y7_7GS!CJ(O?LQ$o(no8re*ul$&=93(ZFQ=J=O;IhaIa8AR5e6C5tLh>8-M#xXP?Zq9 z-!DSZjG#Vs_mG9Uh7u`xs9z2$bn8yglH-YhhOh*3+F{-1b0K;`mnUmyo1wu11owyN zMN?_96GRLP0lyD=Wf*`U!1~yx?aj^2jevtJWFW_|oR@9pn>Zdqu=LO*o2B&dNg=kB zi$o#14`Y*Om~1xd%QpE8tCwMe!JwnTabAM(+Jicla$eo8FDMAemMzu9s-Xi%QOXzt zI7AbtizR60vaD_|wTU#0$w?-|`k+%%0Vs;!hicj~+Qv!r&F}vT+o?elF-c?_1C~q< zuBYBfW%3aVN!YMbhH<#i#m+th8+M;zf=HJih?1=8PP~8@MLw?ESkh$_7eX{q@Tsc8 zhodkI{X!%P*#OH5v9MoYV=-1}inNDg+ap|oD;V;ChICxuD&M$5QLZxznn^MX$Wo6Y zC1x2KSSXoSi+drKig{V&D#g9D7v(a<4C5T^e-65^MW)ADE{`noqDxtuWf7f50+cEbzcHxuj;j^}vRF>mLN{&1oUIS*_4L{ua zZHzh;{&=_a=4gH*l&`6qstHUyOr(adUb?(e{c<+?)_ZgGwN(A{$?Dnkt*!1~hMx!8 z-j<;G(nrq}@Ok6DMvj|}RQ^*bj{h`1dcWiY1AeT?FksAczJY%C>(gNO=Dif$bNt5d Sk7~|2KZkfUAxyL%8vY7$^n2L= diff --git a/htdocs/includes/jquery/plugins/datatables/extras/ColVis/js/ColVis.js b/htdocs/includes/jquery/plugins/datatables/extras/ColVis/js/ColVis.js old mode 100644 new mode 100755 index 10d66e15b30..57a4326a552 --- a/htdocs/includes/jquery/plugins/datatables/extras/ColVis/js/ColVis.js +++ b/htdocs/includes/jquery/plugins/datatables/extras/ColVis/js/ColVis.js @@ -1,52 +1,68 @@ -/* - * File: ColVis.js - * Version: 1.0.8 - * CVS: $Id$ - * Description: Controls for column visiblity in DataTables - * Author: Allan Jardine (www.sprymedia.co.uk) - * Created: Wed Sep 15 18:23:29 BST 2010 - * Modified: $Date$ by $Author$ - * Language: Javascript - * License: GPL v2 or BSD 3 point style - * Project: Just a little bit of fun :-) - * Contact: www.sprymedia.co.uk/contact - * - * Copyright 2010-2011 Allan Jardine, all rights reserved. - * - * This source file is free software, under either the GPL v2 license or a - * BSD style license, available at: - * http://datatables.net/license_gpl2 - * http://datatables.net/license_bsd +/*! ColVis 1.1.2 + * ©2010-2015 SpryMedia Ltd - datatables.net/license */ -(function($) { +/** + * @summary ColVis + * @description Controls for column visibility in DataTables + * @version 1.1.2 + * @file dataTables.colReorder.js + * @author SpryMedia Ltd (www.sprymedia.co.uk) + * @contact www.sprymedia.co.uk/contact + * @copyright Copyright 2010-2015 SpryMedia Ltd. + * + * This source file is free software, available under the following license: + * MIT license - http://datatables.net/license/mit + * + * This source file is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY + * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details. + * + * For details please refer to: http://www.datatables.net + */ -/** - * ColVis provides column visiblity control for DataTables +(function(window, document, undefined) { + + +var factory = function( $, DataTable ) { +"use strict"; + +/** + * ColVis provides column visibility control for DataTables + * * @class ColVis * @constructor - * @param {object} DataTables settings object + * @param {object} DataTables settings object. With DataTables 1.10 this can + * also be and API instance, table node, jQuery collection or jQuery selector. + * @param {object} ColVis configuration options */ -ColVis = function( oDTSettings, oInit ) +var ColVis = function( oDTSettings, oInit ) { /* Santiy check that we are a new instance */ if ( !this.CLASS || this.CLASS != "ColVis" ) { alert( "Warning: ColVis must be initialised with the keyword 'new'" ); } - + if ( typeof oInit == 'undefined' ) { oInit = {}; } - - + + var camelToHungarian = $.fn.dataTable.camelToHungarian; + if ( camelToHungarian ) { + camelToHungarian( ColVis.defaults, ColVis.defaults, true ); + camelToHungarian( ColVis.defaults, oInit ); + } + + /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Public class variables * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ - + /** - * @namespace Settings object which contains customisable information for ColVis instance + * @namespace Settings object which contains customisable information for + * ColVis instance. Augmented by ColVis.defaults */ this.s = { /** @@ -56,7 +72,7 @@ ColVis = function( oDTSettings, oInit ) * @default null */ "dt": null, - + /** * Customisation object * @property oInit @@ -64,39 +80,7 @@ ColVis = function( oDTSettings, oInit ) * @default passed in */ "oInit": oInit, - - /** - * Callback function to tell the user when the state has changed - * @property fnStateChange - * @type function - * @default null - */ - "fnStateChange": null, - - /** - * Mode of activation. Can be 'click' or 'mouseover' - * @property activate - * @type String - * @default click - */ - "activate": "click", - - /** - * Position of the collection menu when shown - align "left" or "right" - * @property sAlign - * @type String - * @default right - */ - "sAlign": "left", - - /** - * Text used for the button - * @property buttonText - * @type String - * @default Show / hide columns - */ - "buttonText": "Show / hide columns", - + /** * Flag to say if the collection is hidden * @property hidden @@ -104,92 +88,17 @@ ColVis = function( oDTSettings, oInit ) * @default true */ "hidden": true, - + /** - * List of columns (integers) which should be excluded from the list - * @property aiExclude - * @type Array - * @default [] - */ - "aiExclude": [], - - /** - * Store the original viisbility settings so they could be restored + * Store the original visibility settings so they could be restored * @property abOriginal * @type Array * @default [] */ - "abOriginal": [], - - /** - * Show Show-All button - * @property bShowAll - * @type Array - * @default [] - */ - "bShowAll": false, - - /** - * Show All button text - * @property sShowAll - * @type String - * @default Restore original - */ - "sShowAll": "Show All", - - /** - * Show restore button - * @property bRestore - * @type Array - * @default [] - */ - "bRestore": false, - - /** - * Restore button text - * @property sRestore - * @type String - * @default Restore original - */ - "sRestore": "Restore original", - - /** - * Overlay animation duration in mS - * @property iOverlayFade - * @type Integer - * @default 500 - */ - "iOverlayFade": 500, - - /** - * Label callback for column names. Takes three parameters: 1. the column index, 2. the column - * title detected by DataTables and 3. the TH node for the column - * @property fnLabel - * @type Function - * @default null - */ - "fnLabel": null, - - /** - * Indicate if ColVis should automatically calculate the size of buttons or not. The default - * is for it to do so. Set to "css" to disable the automatic sizing - * @property sSize - * @type String - * @default auto - */ - "sSize": "auto", - - /** - * Indicate if the column list should be positioned by Javascript, visually below the button - * or allow CSS to do the positioning - * @property bCssPosition - * @type boolean - * @default false - */ - "bCssPosition": false + "abOriginal": [] }; - - + + /** * @namespace Common and useful DOM elements for the class instance */ @@ -201,7 +110,7 @@ ColVis = function( oDTSettings, oInit ) * @default null */ "wrapper": null, - + /** * Activation button * @property button @@ -209,7 +118,7 @@ ColVis = function( oDTSettings, oInit ) * @default null */ "button": null, - + /** * Collection list node * @property collection @@ -217,7 +126,7 @@ ColVis = function( oDTSettings, oInit ) * @default null */ "collection": null, - + /** * Background node used for shading the display and event capturing * @property background @@ -225,7 +134,7 @@ ColVis = function( oDTSettings, oInit ) * @default null */ "background": null, - + /** * Element to position over the activation button to catch mouse events when using mouseover * @property catcher @@ -233,7 +142,7 @@ ColVis = function( oDTSettings, oInit ) * @default null */ "catcher": null, - + /** * List of button elements * @property buttons @@ -241,7 +150,15 @@ ColVis = function( oDTSettings, oInit ) * @default [] */ "buttons": [], - + + /** + * List of group button elements + * @property groupButtons + * @type Array + * @default [] + */ + "groupButtons": [], + /** * Restore button * @property restore @@ -250,13 +167,16 @@ ColVis = function( oDTSettings, oInit ) */ "restore": null }; - + /* Store global reference */ ColVis.aInstances.push( this ); - + /* Constructor logic */ - this.s.dt = oDTSettings; - this._fnConstruct(); + this.s.dt = $.fn.dataTable.Api ? + new $.fn.dataTable.Api( oDTSettings ).settings()[0] : + oDTSettings; + + this._fnConstruct( oInit ); return this; }; @@ -266,73 +186,98 @@ ColVis.prototype = { /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Public methods * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ - + /** - * Rebuild the list of buttons for this instance (i.e. if there is a column header update) + * Get the ColVis instance's control button so it can be injected into the + * DOM + * @method button + * @returns {node} ColVis button + */ + button: function () + { + return this.dom.wrapper; + }, + + /** + * Alias of `rebuild` for backwards compatibility * @method fnRebuild - * @returns void */ "fnRebuild": function () + { + this.rebuild(); + }, + + /** + * Rebuild the list of buttons for this instance (i.e. if there is a column + * header update) + * @method fnRebuild + */ + rebuild: function () { /* Remove the old buttons */ - for ( var i=this.dom.buttons.length-1 ; i>=0 ; i-- ) - { - if ( this.dom.buttons[i] !== null ) - { - this.dom.collection.removeChild( this.dom.buttons[i] ); - } + for ( var i=this.dom.buttons.length-1 ; i>=0 ; i-- ) { + this.dom.collection.removeChild( this.dom.buttons[i] ); } this.dom.buttons.splice( 0, this.dom.buttons.length ); - - if ( this.dom.restore ) - { + this.dom.groupButtons.splice(0, this.dom.groupButtons.length); + + if ( this.dom.restore ) { this.dom.restore.parentNode( this.dom.restore ); } - + /* Re-add them (this is not the optimal way of doing this, it is fast and effective) */ + this._fnAddGroups(); this._fnAddButtons(); - + /* Update the checkboxes */ this._fnDrawCallback(); }, - - - + + /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Private methods (they are of course public in JS, but recommended as private) * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ - + /** * Constructor logic * @method _fnConstruct * @returns void - * @private + * @private */ - "_fnConstruct": function () + "_fnConstruct": function ( init ) { - this._fnApplyCustomisation(); - + this._fnApplyCustomisation( init ); + var that = this; var i, iLen; this.dom.wrapper = document.createElement('div'); - this.dom.wrapper.className = "ColVis TableTools"; - - this.dom.button = this._fnDomBaseButton( this.s.buttonText ); - this.dom.button.className += " ColVis_MasterButton"; - this.dom.wrapper.appendChild( this.dom.button ); - + this.dom.wrapper.className = "ColVis"; + + this.dom.button = $( '