All Components

MaskedTextBox / Globalization

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Globalization</title> 
  <meta charset="utf-8"> 
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet"> 
  <link href="../../styles/kendo.common.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.rtl.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.default.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet"> 
  <script src="../../js/jquery.min.js"></script> 
  <script src="../../js/kendo.all.min.js"></script> 
  <script src="../content/shared/js/console.js"></script> 
  <script>
        
    </script> 
 </head> 
 <body> 
  <a class="offline-button" href="../index.html">Back</a> 
  <script src="../content/web/globalization/cultures/kendo.culture.en-US.js"></script> 
  <script src="../content/web/globalization/cultures/kendo.culture.en-GB.js"></script> 
  <script src="../content/web/globalization/cultures/kendo.culture.de-DE.js"></script> 
  <script src="../content/web/globalization/cultures/kendo.culture.fr-FR.js"></script> 
  <script src="../content/web/globalization/cultures/kendo.culture.bg-BG.js"></script> 
  <div id="example"> 
   <div id="product-view" class="demo-section k-content"> 
    <ul id="fieldlist"> 
     <li> <label for="culture">Choose culture:</label> <input id="culture" value="en-US" style="width: 100%;"> </li> 
     <li> <label for="initial">Initial price:</label> <input id="initial" value="1234.56" style="width: 100%;"> </li> 
    </ul> 
   </div> 
   <style>
                #fieldlist {
                    margin: 0 0 -2em;
                    padding: 0;
                }

                #fieldlist li {
                    list-style: none;
                    padding-bottom: 2em;
                }

                #fieldlist label {
                    display: block;
                    padding-bottom: 1em;
                    font-weight: bold;
                    text-transform: uppercase;
                    font-size: 12px;
                    color: #444;
                }

            </style> 
   <script>
                $(document).ready(function() {
                    var initial = new kendo.ui.MaskedTextBox($("#initial"), {
                        mask: "9,999.99 $"
                    });

                    function changeCulture() {
                        kendo.culture(this.value());

                        initial.setOptions(initial.options);
                    }

                    $("#culture").kendoDropDownList({
                        change: changeCulture,
                        dataTextField: "text",
                        dataValueField: "value",
                        dataSource: [
                            {text: "de-DE", value: "de-DE"},
                            {text: "en-US", value: "en-US"},
                            {text: "en-GB", value: "en-GB"},
                            {text: "fr-FR", value: "fr-FR"},
                            {text: "bg-BG", value: "bg-BG"}
                        ]
                    });
                });
            </script> 
  </div>   
 </body>
</html>