11:09 p.m.
Signed-off-by: Wen Wang <wenwang(a)linux.vnet.ibm.com>
---
ui/css/theme-default/list-flat.css | 83 ++++++++++++++++++++++++++++++++++++++
ui/js/widgets/list-flat.js | 76 ++++++++++++++++++++++++++++++++++
2 files changed, 159 insertions(+)
create mode 100644 ui/css/theme-default/list-flat.css
create mode 100644 ui/js/widgets/list-flat.js
diff --git a/ui/css/theme-default/list-flat.css b/ui/css/theme-default/list-flat.css
new file mode 100644
index 0000000..ba0439d
--- /dev/null
+++ b/ui/css/theme-default/list-flat.css
@@ -0,0 +1,83 @@
+/*
+ * 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.
+ */
+
+.list-titlef {
+ height: 30px;
+ line-height: 30px;
+ width: 25%;
+ border-bottom: 1px solid #DEDEDE;
+ color: #626262;
+ font-size: 17px;
+ padding: 10px 0;
+ background: white;
+}
+
+.list-content {
+ height: 300px;
+ width: 25%;
+}
+
+.list-item {
+ border-bottom: 1px solid #F5F5F5;
+ height: 40px;
+}
+
+.list-item-odd {
+ background: #FFFFFF;
+}
+
+.list-item-even {
+ background: #FCFCFC;
+}
+
+.list-item:hover {
+ background: #DDDDDD;
+}
+
+.list-inline {
+ display: inline-block;
+}
+
+.list-item-icon {
+ line-height: 20px;
+ vertical-align: 35%;
+}
+
+.list-item-info {
+ position: relative;
+ margin-left: 10px;
+ margin-right: 10px;
+}
+
+.list-item-name {
+ font-size: 14px;
+ line-height: 14px;
+ padding: 9px 0 0;
+}
+
+.list-item-button {
+ position: relative;
+ width: 150px;
+ padding: 5px;
+ float: right;
+}
+
+.list-item-detail {
+ font-size: 11px;
+ color: #CDCDCD;
+}
\ No newline at end of file
diff --git a/ui/js/widgets/list-flat.js b/ui/js/widgets/list-flat.js
new file mode 100644
index 0000000..f76eec6
--- /dev/null
+++ b/ui/js/widgets/list-flat.js
@@ -0,0 +1,76 @@
+/*
+ * 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:
+ // $(".test-bar").listFlat({
+ // title: "Hello World" //Set title.
+ // });
+ // $(".test-bar").listFlat("addItem", "Hello",
"2015", "icon-user", "button1");
+ // //Add one item of the list, parameters are: name, info, icon and
button-id
+
+
+ (function($) {
+
+ $.widget("kimchi.listFlat", {
+
+ options: {
+ title: null
+ },
+
+ _create: function() {
+ var that = this;
+ var listTitle = that.options.title;
+ var titleTrim = listTitle.replace(/\s*/g, "");
+ var html = "";
+ html += "<div class='list-titlef'>" + listTitle +
"</div>" +
+ "<div class='list-content' id='list" +
titleTrim + "'></div>";
+ $(html).appendTo(that.element);
+ },
+
+ _getTitle: function() {
+ return this.options.title;
+ },
+
+ addItem: function(name, detail, icon, id) {
+ var title = this._getTitle().replace(/\s/g, "");
+ var usedIcon = icon || "";
+ var html = "";
+ html += "<div class='list-item'>" +
+ "<span class='list-inline list-item-icon " +
usedIcon + "'></span>" +
+ "<span class='list-inline
list-item-info'>"+
+ "<div class='list-item-name'>" + name
+ "</div>" +
+ "<div class='list-item-detail'>" +
detail + "</div>" +
+ "</span>" +
+ "<span class='list-inline list-item-button'
id='" + id + "'></span>" +
+ "</div>";
+ $(html).appendTo($("#list" + title));
+ $.each($(".list-item"), function(index, data) {
+ if(index%2 >0) {
+ $(this).addClass("list-item-even");
+ } else {
+ $(this).addClass("list-item-odd");
+ }
+ })
+ console.log("title");
+ },
+
+ _destory: function() {
+ this.element.remove();
+ }
+ });
+ })(jQuery);
\ No newline at end of file
--
2.1.0