[Kimchi-devel] [PATCH] UI: Sample of menu/button/radio/checkbox/seletmenu/textbox

Wen Wang wenwang at linux.vnet.ibm.com
Fri Jan 30 09:31:45 UTC 2015


Signed-off-by: Wen Wang <wenwang at linux.vnet.ibm.com>
---
 ...u-button-radio-checkbox-text-select-sample.html | 83 ++++++++++++++++++++++
 1 file changed, 83 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..4ec6105
--- /dev/null
+++ b/ui/js/widgets/samples/menu-button-radio-checkbox-text-select-sample.html
@@ -0,0 +1,83 @@
+<!--Sample code of menu/button/radio/checkbox/text/select-->
+<!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




More information about the Kimchi-devel mailing list