Tuesday, February 18, 2014

Kendo UI Demos- ComboBox example

<!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