| MVC Classic ウィジェット > Wijslider |
wijslider ウィジェットは、数値変更の高度な視覚表現を提供してユーザー入力を簡素化する UI です。wijslider ウィジェットは、スライドセレクタで、実行時にエンドユーザーが定義済みの単一値や値範囲から選択するためのシンプルでなじみある方法を提供します。wijslider ウィジェットは、jquery.wijmo.wijslider.js ライブラリによって作成されます。
スライダを表示するビューの .cshtml ファイルを開きます。以下のように、DOM 要素を追加します。
| ソースビュー |
コードのコピー
|
|---|---|
<div id="slider"></div> |
|
CSS スタイリングをスライダに追加することもできます。ここではスライダの幅を指定します。
| ソースビュー |
コードのコピー
|
|---|---|
<style type="text/css">
#slider
{
width: 300px;
}
</style>
|
|
スライダを機能させるには、ウィジェットを初期化する必要があります。次のスクリプトを .cshtml ファイルに追加します。
| ソースビュー |
コードのコピー
|
|---|---|
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#slider").wijslider({ orientation: "horizontal", range: fasle, min: 0, max: 100, step: 2, values: [25] });
});
</script>
|
|
このスクリプトは、スライダを初期化し、向き、範囲スライダかどうか、および実行時に表示される値を指定します。この場合は、範囲をデフォルトオプション「false」に設定した水平スライダとなります。実行時に、値は 25 に設定されます。
wijslider の詳細については、Wijmo 製品マニュアルをご覧ください。