<!DOCTYPE html> <html> <head> <title></title> <link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.default.min.css" rel="stylesheet" /> <script src="http://cdn.kendostatic.com/2013.3.1324/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.all.min.js"></script> </head> <body> <div id="example" class="k-content" role="application"> <div id="tshirt-view" class="demo-section"> <h2>Customize your Kendo T-shirt</h2> <img id="tshirt" src="../../content/web/combobox/tShirt.png" /> <div id="options"> <h3>T-shirt Fabric</h3> <input id="fabric" placeholder="Select fabric..." /> <h3>T-shirt Size</h3> <select id="size" placeholder="Select size..."> <option>X-Small</option> <option>Small</option> <option>Medium</option> <option>Large</option> <option>X-Large</option> <option>2X-Large</option> </select> <button class="k-button" id="get">Customize</button> </div> </div> <style scoped> .demo-section { width: 460px; height: 340px; padding: 30px; } .demo-section h2 { text-transform: uppercase; font-size: 1.2em; margin-bottom: 30px; } #tshirt { float: left; margin: 0 40px 30px 0; } #options { padding: 20px 0 30px 30px; } #options h3 { font-size: 1em; font-weight: bold; margin: 25px 0 8px 0; } #get { margin-top: 25px; } .k-readonly { color: gray; } </style> <script> $(document).ready(function() { // create ComboBox from input HTML element $("#fabric").kendoComboBox({ dataTextField: "text", dataValueField: "value", dataSource: [ { text: "Cotton", value: "1" }, { text: "Polyester", value: "2" }, { text: "Cotton/Polyester", value: "3" }, { text: "Rib Knit", value: "4" } ], filter: "contains", suggest: true, index: 3 }); // create ComboBox from select HTML element $("#size").kendoComboBox(); var fabric = $("#fabric").data("kendoComboBox"); var select = $("#size").data("kendoComboBox"); $("#get").click(function() { alert('Thank you! Your Choice is:\n\nFabric ID: ' + fabric.value() + ' and Size: ' + select.value()); }); }); </script> </div> </body> </html>
Output :
If you are searching life partner. your searching end with kpmarriage.com. now kpmarriage.com offer free matrimonial website which offer free message, free chat, free view contact information. so register here : kpmarriage.com- Free matrimonial website
0 comments:
Post a Comment