[PATCH] UI: Sample of menu/button/radio/checkbox/seletmenu/textbox
Signed-off-by: Wen Wang <wenwang@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
participants (1)
-
Wen Wang