<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div class="moz-cite-prefix">On 12/31/2013 1:54 PM, zhoumeina wrote:<br>
</div>
<blockquote
cite="mid:1388469269-6557-1-git-send-email-zhoumein@linux.vnet.ibm.com"
type="cite">
<pre wrap="">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></pre>
</blockquote>
For dropdown button, it is a button plus a menu. Refer to below to
define the html structure.<br>
<a class="moz-txt-link-freetext" href="http://getbootstrap.com/components/#btn-dropdowns">http://getbootstrap.com/components/#btn-dropdowns</a><br>
<img src="cid:part1.05090007.08010801@linux.vnet.ibm.com" alt=""><br>
<br>
There are still some css classes defined on the internal html
elements, remove them from html and add them in javascript.<br>
<blockquote
cite="mid:1388469269-6557-1-git-send-email-zhoumein@linux.vnet.ibm.com"
type="cite">
<pre wrap="">
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 <a class="moz-txt-link-rfc2396E" href="mailto:zhoumein@linux.vnet.ibm.com"><zhoumein@linux.vnet.ibm.com></a>
---
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 <a class="moz-txt-link-rfc2396E" href="mailto:zhoumein@linux.vnet.ibm.com"><zhoumein@linux.vnet.ibm.com></a>
+ *
+ * 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
+ *
+ * <a class="moz-txt-link-freetext" href="http://www.apache.org/licenses/LICENSE-2.0">http://www.apache.org/licenses/LICENSE-2.0</a>
+ *
+ * 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
+ },</pre>
</blockquote>
I did not see any usage of 'key' and 'value', remove them.<br>
<blockquote
cite="mid:1388469269-6557-1-git-send-email-zhoumein@linux.vnet.ibm.com"
type="cite">
<pre wrap="">
+
+ _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) {},</pre>
</blockquote>
The _setOption method has an empty body, remove it.<br>
<blockquote
cite="mid:1388469269-6557-1-git-send-email-zhoumein@linux.vnet.ibm.com"
type="cite">
<pre wrap="">
+
+ destroy : function() {
+ // call the base destroy function
+ $.Widget.prototype.destroy.call(this);
+ }</pre>
</blockquote>
In destroy method, what are added to html in '_create' method, they
should be removed here to restore the html back to original state.<br>
<a class="moz-txt-link-freetext" href="http://learn.jquery.com/jquery-ui/widget-factory/how-to-use-the-widget-factory/">http://learn.jquery.com/jquery-ui/widget-factory/how-to-use-the-widget-factory/</a><br>
<blockquote
cite="mid:1388469269-6557-1-git-send-email-zhoumein@linux.vnet.ibm.com"
type="cite">
<pre wrap="">
+ });
+}(jQuery));
\ No newline at end of file
</pre>
</blockquote>
<br>
</body>
</html>