[PATCH V2] UI: Sample of menu/button/radio/checkbox/seletmenu/textbox

Wednesday, 4 February 2015

V1 -> V2:
Add lincense.

Signed-off-by: Wen Wang <wenwang(a)linux.vnet.ibm.com&gt;
---
 ...u-button-radio-checkbox-text-select-sample.html | 101 +++++++++++++++++++++
 1 file changed, 101 insertions(+)
 create mode 100644
ui/js/widgets/samples/menu-button-radio-checkbox-text-select-sample.html

diff --git a/ui/js/widgets/samples/menu-button-radio-checkbox-text-select-sample.html
b/ui/js/widgets/samples/menu-button-radio-checkbox-text-select-sample.html
new file mode 100644
index 0000000..2b97073
--- /dev/null
+++ b/ui/js/widgets/samples/menu-button-radio-checkbox-text-select-sample.html
@@ -0,0 +1,101 @@
+<!--
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2014
+ *
+ * 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.
+ */
+-->
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>Demo</title>
+        <script src="../../../libs/jquery-1.10.0.min.js"></script>
+        <script src="../../../libs/jquery-ui.min.js"></script>
+        <script src="../menu-flat.js"></script>
+        <script src="../button-flat.js"></script>
+        <script src="../radio-flat.js"></script>
+        <script src="../checkbox-flat.js"></script>
+        <script src="../textbox-flat.js"></script>
+        <script src="../selectmenu-flat.js"></script>
+        <link rel="stylesheet"
href="../../../libs/themes/base/jquery-ui.min.css">
+        <link rel="stylesheet"
href="../../../css/theme-default/menu-flat.css">
+        <link rel="stylesheet"
href="../../../css/theme-default/button-flat.css">
+        <link rel="stylesheet"
href="../../../css/theme-default/radio-flat.css">
+        <link rel="stylesheet"
href="../../../css/theme-default/checkbox-flat.css">
+        <link rel="stylesheet"
href="../../../css/theme-default/textbox-flat.css">
+        <link rel="stylesheet"
href="../../../css/theme-default/selectmenu-flat.css">
+        <link rel="stylesheet"
href="../../../css/fontello/css/animation.css">
+        <link rel="stylesheet"
href="../../../css/fontello/css/fontello.css">
+    </head>
+    <body>
+        <div id="menu"></div>
+        <div style="height:50px"><div
id="select"></div></div>
+        <div class="radio-demo"></div>
+        <div class="checkbox-demo"></div>
+        <input class="text-demo">
+        <button class="button-demo">submit</button>
+        <script>
+            $(document).ready(function() {
+                $("#menu").menuFlat({
+                    content: [1,2,3,4,5,6], //Set content of the menu.
+                    icon: "icon-edit-alt",  //Set icon of the menu button.
+                    listIconList:
["icon-edit-alt","icon-edit-alt","icon-edit-alt","icon-edit-alt","icon-edit-alt","icon-user"]
+                                          //Set icons of the menu list.
+                                           // name is optional which set the name of the
menu list.
+                });
+                $("#menu0").on("click", function() {
+                    alert("hello");
+                });
+                $("#menu1").on("click", function() {
+                    console.log("hello");
+                });
+                $("#select").selectmenuFlat({
+                    content: [1,2,3,4,5,6],  //Set content of the select menu
+                    selected: 2  // set the selected option, starts from "1"
+                });
+                $("#select").selectmenuFlat("value", "4");
//Set value.
+                var t = $("#select").selectmenuFlat("value");  //Get
value
+                console.log(t);
+                $(".radio-demo").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.
+                });
+                $(".radio-demo").click(function() {
+                   console.log($(".radio-demo").radioFlat("value")); 
//this is how to get the value of selected radio value
+                });
+                $(".checkbox-demo").checkboxFlat({
+                    id: "t",  //Checkbox base id.
+                    name: "test",  //Checkbox name.
+                    content: ["apple", "banana", "orange",
"cherry"],  //Contents of the checkbox set.
+                    checked: [1,3]  //Set the checked item, which starts with number 1.
+                });
+                $(".checkbox-demo").click(function() {
+                   
console.log($(".selector").checkboxFlat("value"));  //Get value of the
checked checkbox.
+                });
+                $(".text-demo").textboxFlat({
+                    hint: "hint"
+                });
+                $(".text-demo").css({
+                    "height": "30px",
+                    "width": "200px"
+                });
+                $(".button-demo").buttonFlat();
+            });
+        </script>
+    </body>
+</html>
\ No newline at end of file
-- 
2.1.0


    

2024

2023

2022

2021

2020

2019

2018

2017

2016

2015

2014

2013