[Kimchi-devel] [PATCH V2] Add jquery widget dropDown button

[Aline Manera]

On 01/03/2014 05:29 AM, zhoumeina wrote:
> v1-v2 Modify the widget with create and destroy function
> and drop redundant function.
> This patch is working for make dropDown button a jquery
> widget.
> We can create a dropdown button simply with:
> $('#buttonId').dropdownButton();
>
> And in html:
>
> <div id="buttonId">
>      <span class="text">$_("Button label")</span><span class="arrow"></span>
>      <div>
>         <button><span class="text">$_("dropdownbutton1")</span></button>
>         <button><span class="text">$_("dropdownbutton2")</span></button>
>      </div>
> </div>
>
> If we need some other style, you can add it to html, and bind action in js.
> Not a perfect widget, but a beginning.
> Signed-off-by: zhoumeina <zhoumein at linux.vnet.ibm.com>
> ---
>   ui/js/widgets/button-dropDown.js |   38 ++++++++++++++++++++++++++++++++++++++
>   1 files changed, 38 insertions(+), 0 deletions(-)
>   create mode 100644 ui/js/widgets/button-dropDown.js

You also need to update the Makefile.am

> diff --git a/ui/js/widgets/button-dropDown.js b/ui/js/widgets/button-dropDown.js
> new file mode 100644
> index 0000000..0adda37
> --- /dev/null
> +++ b/ui/js/widgets/button-dropDown.js
> @@ -0,0 +1,38 @@
> +/*
> + * Project Kimchi
> + *
> + * Copyright IBM, Corp. 2013
> + *
> + * Authors:
> + *  zhoumeina <zhoumein at linux.vnet.ibm.com>
> + *
> + * Licensed under the Apache License, Version 2.0 (the 'License');
> + * you may not use this file except in compliance with the License.
> + * You may obtain a copy of the License at
> + *
> + *     http://www.apache.org/licenses/LICENSE-2.0
> + *
> + * Unless required by applicable law or agreed to in writing, software
> + * distributed under the License is distributed on an 'AS IS' BASIS,
> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
> + * See the License for the specific language governing permissions and
> + * limitations under the License.
> + */
> +(function($) {
> +    $.widget('kimchi.dropdownButton', {
> +
> +        _create : function() {
> +            this.actionDiv = this.element;
> +            this.actionDiv.addClass('btn dropdown popable');
> +            this.actionDiv.find('div').addClass('popover');
> +            this.actionDiv.find('button').addClass('button-big');
> +        },
> +
> +        destroy : function() {
> +            this.actionDiv.removeClass('btn dropdown popable');
> +            this.actionDiv.find('div').removeClass('popover');
> +            this.actionDiv.find('button').removeClass('button-big');
> +            $.Widget.prototype.destroy.call(this);
> +        }
> +    });
> +}(jQuery));
> \ No newline at end of file