[PATCH V2] Add jquery widget dropDown button
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@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 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@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 -- 1.7.1
Reviewed by Yu Xin Huo <huoyuxin@linux.vnet.ibm.com> On 1/3/2014 3:29 PM, 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@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
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@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
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@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@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
On 01/10/2014 10:48 AM, Aline Manera wrote:
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@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
Meina, could you update it and resend?
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@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
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
On 01/16/2014 08:46 AM, Aline Manera wrote:
On 01/10/2014 10:48 AM, Aline Manera wrote:
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@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
Meina, could you update it and resend? I update Makefile.am in patch "Add nfs server and target UI in create storage pool",if this patch merged. and dropDown button can be merged without modification.
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@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
_______________________________________________ Kimchi-devel mailing list Kimchi-devel@ovirt.org http://lists.ovirt.org/mailman/listinfo/kimchi-devel
participants (3)
-
Aline Manera -
Yu Xin Huo -
zhoumeina