162 строки
7.1 KiB
HTML
162 строки
7.1 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|||
|
|
<head>
|
|||
|
|
<title>Essential JS 1 : Editors - Localization</title>
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
|||
|
|
<link href="../content/bootstrap.min.css" rel="stylesheet" />
|
|||
|
|
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
|||
|
|
<link href="../content/default.css" rel="stylesheet" />
|
|||
|
|
<link href="../content/default-responsive.css" rel="stylesheet" />
|
|||
|
|
<!--[if lt IE 9]>
|
|||
|
|
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript" ></script>
|
|||
|
|
<![endif]-->
|
|||
|
|
<!--[if IE 9]><!-->
|
|||
|
|
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"> </script>
|
|||
|
|
<!--<![endif]-->
|
|||
|
|
|
|||
|
|
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
|||
|
|
<script src="../scripts/cultures/ej.culture.de-DE.min.js"></script>
|
|||
|
|
<script src="../scripts/cultures/ej.culture.en-US.min.js"></script>
|
|||
|
|
<script src="../scripts/cultures/ej.culture.fr-FR.min.js"></script>
|
|||
|
|
<script src="../scripts/cultures/ej.culture.zh-CN.min.js"></script>
|
|||
|
|
<script src="../scripts/properties.js" type="text/javascript"></script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="content-container-fluid">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="cols-sample-area">
|
|||
|
|
<div class="frame">
|
|||
|
|
<div class="control">
|
|||
|
|
<table>
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td>
|
|||
|
|
<span>Numeric Textbox</span>
|
|||
|
|
</td></tr><tr>
|
|||
|
|
<td>
|
|||
|
|
<input id="numeric" type="text" />
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>
|
|||
|
|
<span>Percentage Textbox</span>
|
|||
|
|
</td></tr><tr>
|
|||
|
|
<td>
|
|||
|
|
<input id="percent" type="text" />
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>
|
|||
|
|
<span>Currency Textbox</span>
|
|||
|
|
</td></tr><tr>
|
|||
|
|
<td>
|
|||
|
|
<input id="currency" type="text" />
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>
|
|||
|
|
<span>Mask Edit</span>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>
|
|||
|
|
<input id="maskedit" type="text" />
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="sampleProperties">
|
|||
|
|
<div class="prop-grid">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-6">
|
|||
|
|
<span>Select Culture</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-6">
|
|||
|
|
<select id="culture">
|
|||
|
|
<option>en-US</option>
|
|||
|
|
<option>de-DE</option>
|
|||
|
|
<option>fr-FR</option>
|
|||
|
|
<option>zh-CN</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
$(function () {
|
|||
|
|
$("#numeric").ejNumericTextbox(
|
|||
|
|
{
|
|||
|
|
value: 10.23,
|
|||
|
|
locale: "de-DE",
|
|||
|
|
width: "100%",
|
|||
|
|
decimalPlaces:2
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$("#percent").ejPercentageTextbox(
|
|||
|
|
{
|
|||
|
|
value: 40.55,
|
|||
|
|
locale: "de-DE",
|
|||
|
|
width: "100%",
|
|||
|
|
decimalPlaces: 2
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$("#currency").ejCurrencyTextbox(
|
|||
|
|
{
|
|||
|
|
value: 10.50,
|
|||
|
|
locale: "de-DE",
|
|||
|
|
width: "100%",
|
|||
|
|
decimalPlaces: 2
|
|||
|
|
});
|
|||
|
|
$("#maskedit").ejMaskEdit(
|
|||
|
|
{
|
|||
|
|
locale: "de-DE",
|
|||
|
|
width: "100%",
|
|||
|
|
maskFormat:"$99,999.99"
|
|||
|
|
});
|
|||
|
|
$("#culture").ejDropDownList({ change: "onChange", width: "80px", selectedItemIndex: 1 });
|
|||
|
|
var ddObj = $("#culture").ejDropDownList("instance");
|
|||
|
|
ddObj.option("selectedItemIndex", 2);
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
function onChange(args) {
|
|||
|
|
var maskFormat;
|
|||
|
|
args.value == "de-DE" || args.value == "fr-FR" ? maskFormat = "99,999.99$" : maskFormat = "$99,999.99";
|
|||
|
|
var numobject = $("#numeric").data("ejNumericTextbox");
|
|||
|
|
var percentobject = $("#percent").data("ejPercentageTextbox");
|
|||
|
|
var currencyobject = $("#currency").data("ejCurrencyTextbox");
|
|||
|
|
var maskobject = $("#maskedit").data("ejMaskEdit");
|
|||
|
|
numobject.option("locale", args.value);
|
|||
|
|
percentobject.option("locale", args.value);
|
|||
|
|
currencyobject.option("locale", args.value);
|
|||
|
|
maskobject.option({"maskFormat":maskFormat,"locale":args.value});
|
|||
|
|
}
|
|||
|
|
$("#sampleProperties").ejPropertiesPanel();
|
|||
|
|
ej.NumericTextbox.Locale['de-DE'] = ej.PercentageTextbox.Locale['de-DE'] = ej.CurrencyTextbox.Locale['de-DE'] = {
|
|||
|
|
watermarkText: "Geben Sie Wert"
|
|||
|
|
};
|
|||
|
|
ej.NumericTextbox.Locale['fr-FR'] = ej.PercentageTextbox.Locale['fr-FR'] = ej.CurrencyTextbox.Locale['fr-FR'] = {
|
|||
|
|
watermarkText: "Entrer la valeur"
|
|||
|
|
};
|
|||
|
|
ej.NumericTextbox.Locale['zh-CN'] = ej.PercentageTextbox.Locale['zh-CN'] = ej.CurrencyTextbox.Locale['zh-CN'] = {
|
|||
|
|
watermarkText: "輸入值"
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style type="text/css" class="cssStyles">
|
|||
|
|
.control table{
|
|||
|
|
width:100%;
|
|||
|
|
}
|
|||
|
|
.control td {
|
|||
|
|
padding: 5px;
|
|||
|
|
}
|
|||
|
|
.material #culture_wrapper {
|
|||
|
|
width: 90px !important;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</body>
|
|||
|
|
</html>
|