[Kimchi-devel] [PATCH V2] UI: Adding selectmenu widget for kimchi new UI
Wen Wang
wenwang at linux.vnet.ibm.com
Fri Jan 30 07:35:34 UTC 2015
V1 -> V2:
1) Fix bug of multiple open menu-list
2) Menu-list showed on top of other content
Signed-off-by: Wen Wang <wenwang at linux.vnet.ibm.com>
---
ui/css/theme-default/selectmenu-flat.css | 86 ++++++++++++++++++++
ui/js/widgets/selectmenu-flat.js | 130 +++++++++++++++++++++++++++++++
2 files changed, 216 insertions(+)
create mode 100644 ui/css/theme-default/selectmenu-flat.css
create mode 100644 ui/js/widgets/selectmenu-flat.js
diff --git a/ui/css/theme-default/selectmenu-flat.css b/ui/css/theme-default/selectmenu-flat.css
new file mode 100644
index 0000000..272fe22
--- /dev/null
+++ b/ui/css/theme-default/selectmenu-flat.css
@@ -0,0 +1,86 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2015
+ *
+ * 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.
+ */
+
+.select-content {
+ position: relative;
+ height: 30px;
+ width: 170px;
+}
+
+.selected-box {
+ width: 75%;
+ height: 30px;
+ border: 1px solid #d8d8d8;
+ border-radius: 3px;
+ cursor: pointer;
+ background: #FFFFFF;
+ float: right;
+}
+
+.select-val {
+ display: none;
+}
+
+.select-label {
+ line-height: 32px;
+ vertical-align: middle;
+ position: relative;
+ margin-left: 20px;
+}
+
+.select-icon {
+ position: relative;
+ float: right;
+ line-height: 30px;
+ vertical-align: middle;
+ padding-right: 10px;
+ padding-left: 10px;
+ color: #555555;
+ font-size: 10px;
+}
+
+.select-icon:hover {
+ background: #FCFCFC;
+}
+
+.selectmenu-opt {
+ background: #FFFFFF;
+}
+
+.selectmenu-list {
+ border: 1px solid #d8d8d8;
+ width: 100%;
+ position: absolute;
+ top: 31px;
+ cursor: pointer;
+}
+
+.selectmenu-list li {
+ list-style: none;
+ position: relative;
+ height: 20px;
+ padding: 5px 0 5px 20px;
+ line-height: 21px;
+ vertical-align: middle;
+ border-bottom: 1px solid #d8d8d8;
+ z-index: 3;
+}
+
+.selectmenu-opt:hover {
+ background: #FCFCFC;
+}
diff --git a/ui/js/widgets/selectmenu-flat.js b/ui/js/widgets/selectmenu-flat.js
new file mode 100644
index 0000000..6bf791b
--- /dev/null
+++ b/ui/js/widgets/selectmenu-flat.js
@@ -0,0 +1,130 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2015
+ *
+ * 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.
+ */
+
+
+// How to use:
+// $(".selector").selectmenuFlat({
+// content: [1,2,3,4,5,6], //Set content of the select menu
+// selected: 2 // set the selected option, starts from "1"
+// });
+// $(".selector").selectmenuFlat("value", "4"); //Set value.
+// var t = $(".selector").selectmenuFlat("value"); //Get value
+// console.log(t);
+
+
+ (function( $ ) {
+ $.widget("kimchi.selectmenuFlat", {
+
+ options: {
+ content: null,
+ name: null,
+ selected: null,
+ parentid: null
+ },
+
+ _create: function() {
+ var that = this;
+ var name = that.options.name || $(this.element).attr("id");
+ var value = that.options.content;
+ var parentid = $(this.element).attr("id");
+ that.options.parentid = parentid;
+ var html = "<div class='selected-box'>" +
+ "<input class='select-val'>" +
+ "<span class='select-label'></span>" +
+ "<span class='select-icon icon-down-open'></span>" +
+ "</div>";
+ $(html).appendTo(that.element);
+ html = that._setValue(value);
+ $(html).appendTo(that.element);
+ $("#" + parentid).addClass("select-content");
+ var sel = that.options.selected || 1;
+ sel = that.options.content[Number(sel) -1];
+ that.options.selected = $.inArray(sel, that.options.content) + 1;
+ $(".select-val", "#" + parentid).text(sel);
+ $(".select-label", "#" + parentid).text(sel);
+ $(".selected-box", "#" + parentid).on("click", this._toggleOpt);
+ $(".selectmenu-opt", "#" + parentid).on("click", function() {
+ var selectedText = $(this).text();
+ that.options.selected = $.inArray(selectedText, that.options.content) +1;
+ $(".selected-box .select-label", "#" + parentid).text(selectedText);
+ $(".select-val", "#" + parentid).text(selectedText);
+ $(".selectmenu-list", "#" + parentid).prop("style", "display:none");
+ $(".select-icon", "#" + parentid).removeClass("icon-up-open");
+ $(".select-icon", "#" + parentid).addClass("icon-down-open").css({
+ "border-left": "none"
+ });
+ });
+ $(document).mouseup(function(e) {
+ var container = $(".selectmenu-opt");
+ if(!container.is(e.target) && container.has(e.target).length === 0 && $(".select-icon").hasClass("icon-up-open")) {
+ $(".selectmenu-list", "#" + parentid).prop("style", "display:none");
+ $(".select-icon", "#" + parentid).removeClass("icon-up-open");
+ $(".select-icon", "#" + parentid).addClass("icon-down-open").css({
+ "border-left": "none"
+ });
+ }
+ });
+ },
+
+ _setValue: function(value) {
+ var that = this;
+ var html = "<ul class='selectmenu-list' style='display:none'>";
+ var name = this.options.name || $(this.element).attr("id");
+ $.each(value, function(index, data) {
+ that.options.content[index] = data.toString();
+ html += "<li id='" + name + index + "' class='selectmenu-opt'>" + data + "</li>";
+ });
+ html += "</ul>";
+ return html;
+ },
+
+ _toggleOpt: function() {
+ var thisButton = $(this).parent().attr("id");
+ if($(".select-icon", "#" + thisButton).hasClass("icon-down-open")) {
+ $(".selectmenu-list", "#" + thisButton).prop("style", "display");
+ $(".select-icon", "#" + thisButton).removeClass("icon-down-open");
+ $(".select-icon", "#" + thisButton).addClass("icon-up-open").css({
+ "border-left": "1px solid #d8d8d8"
+ });
+ } else {
+ $(".selectmenu-list", "#" + thisButton).prop("style", "display:none");
+ $(".select-icon", "#" + thisButton).removeClass("icon-up-open");
+ $(".select-icon", "#" + thisButton).addClass("icon-down-open").css({
+ "border-left": "none"
+ });
+ }
+ },
+
+ value: function(value) {
+ var parentid = this.options.parentid;
+ if(!value) {
+ return $(".selected-box .select-val", "#" + parentid).text();
+ }
+ if (value <= this.options.content.length) {
+ this.options.selected = value;
+ var selectedText = this.options.content[value-1];
+ $(".selected-box .select-label", "#" + parentid).text(selectedText);
+ $(".selected-box .select-val", "#" + parentid).text(selectedText);
+ }
+ },
+
+ _destroy: function() {
+ this.element.remove();
+ }
+ });
+ })(jQuery);
\ No newline at end of file
--
2.1.0
More information about the Kimchi-devel
mailing list