1:12 a.m.
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(a)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(a)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-fa...
+ });
+}(jQuery));
\ No newline at end of file
