jQWidgets 是一個 JavaScript 框架,用於為 PC 和移動設備製作基於 Web 的應用程序。它是一個非常強大、優化、獨立於平台且得到廣泛支持的框架。 jqxRangeSelector 小部件用於表示 jQuery 範圍滑塊,可輕鬆用於選擇數字或日期範圍值。該小部件用於設置數字、天、周、月、年等範圍。
labelsFormat 屬性用於設置或返回標簽的格式。它接受 String 類型值,默認值為 null。
其可能的數字格式是 -
- ‘d’ -它代表十進製數。
- ‘f’-它代表浮點數。
- ‘n’ -它代表整數。
- ‘c’ -它代表貨幣數字。
- ‘p’ -它代表百分比數字。
其可能的日期格式是 -
- ‘d’ -它代表一月中的某一天。
- ‘dd’ -它代表一月中的某一天。
- ‘ddd’ -它是星期幾的縮寫。
- ‘dddd’ -它是一周中某一天的全名。
- ‘h’ -它使用 12 小時製表示從 1 到 12 的小時。
- ‘hh’ -它使用 12 小時製表示從 01 到 12 的小時。
- 'H' -它使用 24 小時製表示從 0 到 23 的小時。
- ‘嗬嗬’-它使用 24 小時製表示從 00 到 23 的小時。
- ‘m’ -它代表分鍾,從 0 到 59。
- ‘mm’ -它代表分鍾,從 00 到 59。
- ‘M’-它代表月份,從 1 到 12。
- '毫米' -它代表月份,從 01 到 12。
- ‘嗯’-它代表月份的縮寫名稱。
- ‘嗯嗯’-它代表月份的全名。
- ‘s’ -它代表秒,從 0 到 59。
- ‘ss’ -它代表第二個,從 00 到 59。
- ‘t’ -它代表 AM/PM 指示符的第一個字符。
- ‘tt’ -它代表 AM/PM 指示符。
- ‘y’ -它代表年份,從 0 到 99。
- ‘yy’ -它代表年份,從00到99。
- ‘yyy’ -它代表年份,至少三位數字。
- ‘yyyy’ -它將年份表示為 four-digit 數字。
用法:
設置 labelsFormat 屬性。
$('selector').jqxRangeSelector({ labelsFormat: String });
返回 labelsFormat 屬性。
var labelsFormat = $('selector').jqxRangeSelector('labelsFormat');
鏈接文件:從給定鏈接 https://www.jqwidgets.com/download/下載 jQWidgets。在 HTML 文件中,找到下載文件夾中的腳本文件。
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxrangeselector.js”></script>
下麵的示例說明了 jQWidgets jqxRangeSelector labelsFormat 屬性。
例子:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript"
src="scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript"
src="jqwidgets/jqx-all.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxdata.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxrangeselector.js"></script>
<style>
h1,
h3 {
text-align: center;
}
#jqxRS {
width: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
jQWidgets jqxRangeSelector labelsFormat Property
</h3>
<div id="jqxRS"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#jqxRS").jqxRangeSelector({
width: 400,
height: 20,
min: 0,
max: 100,
range: {
from: 10,
to: 80
},
labelsFormat: 'p'
});
});
</script>
</body>
</html>
輸出:
相關用法
- jQWidgets jqxRangeSelector setRange()用法及代碼示例
- jQWidgets jqxRangeSelector theme屬性用法及代碼示例
- jQWidgets jqxRangeSelector height屬性用法及代碼示例
- jQWidgets jqxRangeSelector min屬性用法及代碼示例
- jQWidgets jqxRangeSelector disabled屬性用法及代碼示例
- jQWidgets jqxRangeSelector range屬性用法及代碼示例
- jQWidgets jqxRangeSelector refresh()用法及代碼示例
- jQWidgets jqxRangeSelector moveOnClick屬性用法及代碼示例
- jQWidgets jqxRangeSelector render()用法及代碼示例
- jQWidgets jqxRangeSelector destroy()用法及代碼示例
- jQWidgets jqxRangeSelector resizable屬性用法及代碼示例
- jQWidgets jqxRangeSelector max屬性用法及代碼示例
- jQWidgets jqxRangeSelector rtl屬性用法及代碼示例
- jQWidgets jqxRangeSelector getRange()用法及代碼示例
- jQWidgets jqxRangeSelector showMinorTicks屬性用法及代碼示例
- jQWidgets jqxRangeSelector padding屬性用法及代碼示例
- jQWidgets jqxRating value屬性用法及代碼示例
- jQWidgets jqxRadioButton boxSize屬性用法及代碼示例
- jQWidgets jqxRadioButton animationHideDelay屬性用法及代碼示例
- jQWidgets jqxRating getValue()用法及代碼示例
- jQWidgets jqxRating itemHeight屬性用法及代碼示例
- jQWidgets jqxRating singleVote屬性用法及代碼示例
- jQWidgets jqxRadioButtonGroup disabled屬性用法及代碼示例
- jQWidgets jqxRating val()用法及代碼示例
- jQWidgets jqxRadioButton render()用法及代碼示例
注:本文由純淨天空篩選整理自AshokJaiswal大神的英文原創作品 jQWidgets jqxRangeSelector labelsFormat Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。