[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