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

[Yu Xin Huo]

On 12/31/2013 1:54 PM, zhoumeina wrote:
> 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>
For dropdown button, it is a button plus a menu. Refer to below to 
define the html structure.
     http://getbootstrap.com/components/#btn-dropdowns


There are still some css classes defined on the internal html elements, 
remove them from html and add them in javascript.
>
> 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 |   42 ++++++++++++++++++++++++++++++++++++++
>   1 files changed, 42 insertions(+), 0 deletions(-)
>   create mode 100644 ui/js/widgets/button-dropDown.js
>
> diff --git a/ui/js/widgets/button-dropDown.js b/ui/js/widgets/button-dropDown.js
> new file mode 100644
> index 0000000..49259e3
> --- /dev/null
> +++ b/ui/js/widgets/button-dropDown.js
> @@ -0,0 +1,42 @@
> +/*
> + * 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', {
> +        options: {
> +               key: 0,
> +               value: 0
> +              },
I did not see any usage of 'key' and 'value', remove them.
> +
> +        _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');
> +        },
> +
> +        _setOption : function(key,value) {},
The _setOption method has an empty body, remove it.
> +
> +        destroy : function() {
> +            // call the base destroy function
> +            $.Widget.prototype.destroy.call(this);
> +        }
In destroy method, what are added to html in '_create' method, they 
should be removed here to restore the html back to original state.
http://learn.jquery.com/jquery-ui/widget-factory/how-to-use-the-widget-factory/
> +    });
> +}(jQuery));
> \ No newline at end of file

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20140103/57eece47/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: eefdjcgb.png
Type: image/png
Size: 15864 bytes
Desc: not available
URL: <http://lists.ovirt.org/pipermail/kimchi-devel/attachments/20140103/57eece47/attachment.png>