10:27 p.m.
Signed-off-by: Wen Wang <wenwang(a)linux.vnet.ibm.com>
---
ui/css/theme-default/radio-flat.css | 30 +++++++++++++
ui/js/widgets/radio-flat.js | 86 +++++++++++++++++++++++++++++++++++++
2 files changed, 116 insertions(+)
create mode 100644 ui/css/theme-default/radio-flat.css
create mode 100644 ui/js/widgets/radio-flat.js
diff --git a/ui/css/theme-default/radio-flat.css b/ui/css/theme-default/radio-flat.css
new file mode 100644
index 0000000..0c03485
--- /dev/null
+++ b/ui/css/theme-default/radio-flat.css
@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+
+ .radio-label {
+ position: relative;
+ cursor: pointer;
+ }
+
+ .radio-content {
+ margin-right: 10px;
+ }
+
+ .inline-radio {
+ display: inline-block;
+ }
\ No newline at end of file
diff --git a/ui/js/widgets/radio-flat.js b/ui/js/widgets/radio-flat.js
new file mode 100644
index 0000000..7be55f7
--- /dev/null
+++ b/ui/js/widgets/radio-flat.js
@@ -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.
+ */
+
+/*
+ * //How to use:
+ * $(".selector").radioFlat({
+ * id: "t", //Base id of the radio set.
+ * name: "test", //name of the radio.
+ * whichChecked: 2, //First selected position, starts from 1.
+ * content: ["apple", "banana", "orange",
"cherry"] //set the content array.
+ * });
+ *
+ *
+ * $(".test-bar").click(function() {
+ * console.log($(".test-bar").radioFlat("value")); //this is how
to get the value of selected radio value
+ * });
+ *
+ *
+ *
+ */
+
+ (function($) {
+
+ $.widget("kimchi.radioFlat", {
+ options: {
+ id: "",
+ name: "",
+ whichChecked: "",
+ content:[],
+ },
+
+ _create: function() {
+ var that = this;
+ var radioName = this.options.name;
+ var labelID = this.options.id;
+ var checked = this.options.whichChecked;
+ var num = Number(this.options.content.length);
+ var html ="";
+ if(num >0) {
+ for(var i=1;i < num+1;i++) {
+ var tmpLabelID = labelID + i;
+ html += "<div class='icon-circle-empty inline-radio
radio-label' id='" + tmpLabelID + "'></div>" +
+ "<label class='radio-content inline-radio'
for='" + tmpLabelID + "'>" + that.options.content[i-1] +
"</label>";
+ }
+ $(html).appendTo(that.element);
+ $("#" + labelID + checked).attr("checked",
"true");
+ $("#" + labelID +
checked).removeClass("icon-circle-empty");
+ $("#" + labelID +
checked).addClass("icon-dot-circled");
+ }
+ $(".radio-label").on("click", function() {
+ $(".radio-label").removeClass("icon-dot-circled");
+ $(".radio-label").addClass("icon-circle-empty");
+ $(".radio-label").removeAttr("checked");
+ $(this).removeClass("icon-circle-empty");
+ $(this).addClass("icon-dot-circled");
+ $(this).attr("checked", "true");
+ var thisID = $(this).attr("id");
+ that.options.whichChecked =
thisID.substring(labelID.length,thisID.length);
+ });
+ },
+
+ value: function() {
+ var value = Number(this.options.whichChecked) -1;
+ return this.options.content[value];
+ },
+
+ _destroy: function() {
+ this.element.remove();
+ }
+ });
+ })(jQuery);
\ No newline at end of file
--
2.1.0