HTML だけでスライダーを作成 class="demo" の DIV 内のみ、HTML の要素を拡張してスライダーへのパラメータとしています。もちろん、jQuery の専用コード(標準化用コードの実行)は必要不可欠ですが、仕様さえ決まっておれば、コンテンツを作成するのにプログラマは必要ありません。
|
|
<div class="demo"> <table><tr> <td> <input type="text" id="amount1" /> <div id="slider-v1" set_content="amount1" value="100"></div> </td> <td> <input type="text" id="amountA" /> <div id="slider-vA" set_content="amountA" value="800"></div> </td> <td> <input type="text" id="amount2" /> <div id="slider-h1" set_content="amount2" value="500"></div> <br /><br /> <input type="text" id="amountB" /> <div id="slider-hB" set_content="amountB" value="400"></div> </td> </tr></table> </div>
このサンプルでは『標準化』としてはまだ甘い
id の命名法で縦か横かを決定し、DIV に追加した属性で振る舞いの一部を定義しています。解りやすくする為に、値をセットする場所に INPUT を使用していますがその必要は無く、実際はそれ用の要素は自動的に作成して配置する方向が正解だと思います。
さらに、スライダーのオプションは、全て DIV の属性に設定可能ですし、共通の設定内容やテーマがある場合は、それとの連携も想像できます。
いっその事、新しい要素を作ってしまってもよさそうなんですけれど、以下のコードが動くので。
<aaa>あああああ</aaa>
<script type="text/javascript">
$("AAA").click(function(){alert("ok")});
</script>
<link type="text/css" href="http://homepage2.nifty.com/lightbox/jquery/jqcss/black-tie/jquery-ui-1.10.1.custom.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<style type="text/css">
.demo {
display: none;
}
.demo td {
vertical-align: top;
padding: 10px;
}
.ui-slider .ui-slider-handle {
width: 1.0em; /* ハンドルの幅 */
height: 1.0em; /* ハンドルの高さ */
border-radius: 10px; /* ハンドルを丸くする */
}
</style>
<script type="text/javascript">
$(function() {
// 数値表示部分の CSS( Slider 側のDIVに定義も可能 )
// id に "amount" と先頭に付く demo クラス内
$(".demo input[id^='amount']")
.css("border", 0)
.css("color","#f6931f")
.css("font-weight","bold")
.css("width","30px")
.css("margin-bottom","10px");
// 縦スライダー
$( ".demo div[id^='slider-v']" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 1000,
create: function( event, ui ) {
// 値をセットするコンテンツのID を自分自身の属性より得る
var target_name = $(this).attr("set_content");
// 初期値を自分自身の属性より得る
var default_value = $(this).attr("value");
// 外部へ初期値をセットする
$( "#"+target_name ).val( default_value );
// 自分自身へ初期値をセットする
$(this).slider("value", default_value );
// 大きさ
$(this).css("width","10px");
$(this).css("height","200px");
},
slide: function( event, ui ) {
var target_name = $(this).attr("set_content");
$( "#"+target_name ).val( ui.value );
}
});
// 横スライダー
$( ".demo div[id^='slider-h']" ).slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 1000,
create: function( event, ui ) {
// 値をセットするコンテンツのID を自分自身の属性より得る
var target_name = $(this).attr("set_content");
// 初期値を自分自身の属性より得る
var default_value = $(this).attr("value");
// 外部へ初期値をセットする
$( "#"+target_name ).val( default_value );
// 自分自身へ初期値をセットする
$(this).slider("value", default_value );
// 大きさ
$(this).css("width","200px");
$(this).css("height","10px");
},
slide: function( event, ui ) {
var target_name = $(this).attr("set_content");
$( "#"+target_name ).val( ui.value );
}
});
$(".demo").show();
});
</script>
<div class="demo">
<table><tr>
<td>
<input type="text" id="amount1" />
<div id="slider-v1" set_content="amount1" value="100"></div>
</td>
<td>
<input type="text" id="amountA" />
<div id="slider-vA" set_content="amountA" value="800"></div>
</td>
<td>
<input type="text" id="amount2" />
<div id="slider-h1" set_content="amount2" value="500"></div>
<br /><br />
<input type="text" id="amountB" />
<div id="slider-hB" set_content="amountB" value="400"></div>
</td>
</tr></table>
</div>
<br />
<input type="text" id="amount3" value="ここは、セレクタ対象外" />
slider-v と slider-h という要素で実装 結局以下のようにしても動くので、どうにでもなりそうです。
<script type="text/javascript">
$(function() {
// 数値表示部分の CSS( Slider 側のDIVに定義も可能 )
// id に "amount" と先頭に付く demo クラス内
$(".demo input[id^='amount']")
.css("border", 0)
.css("color","#f6931f")
.css("font-weight","bold")
.css("width","30px")
.css("margin-bottom","10px");
// 縦スライダー
$( ".demo slider-v" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 1000,
create: function( event, ui ) {
// 値をセットするコンテンツのID を自分自身の属性より得る
var target_name = $(this).attr("set_content");
// 初期値を自分自身の属性より得る
var default_value = $(this).attr("value");
// 外部へ初期値をセットする
$( "#"+target_name ).val( default_value );
// 自分自身へ初期値をセットする
$(this).slider("value", default_value );
// 大きさ
$(this).css("display","block");
$(this).css("width","10px");
$(this).css("height","200px");
},
slide: function( event, ui ) {
var target_name = $(this).attr("set_content");
$( "#"+target_name ).val( ui.value );
}
});
// 横スライダー
$( ".demo slider-h" ).slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 1000,
create: function( event, ui ) {
// 値をセットするコンテンツのID を自分自身の属性より得る
var target_name = $(this).attr("set_content");
// 初期値を自分自身の属性より得る
var default_value = $(this).attr("value");
// 外部へ初期値をセットする
$( "#"+target_name ).val( default_value );
// 自分自身へ初期値をセットする
$(this).slider("value", default_value );
// 大きさ
$(this).css("display","block");
$(this).css("width","200px");
$(this).css("height","10px");
},
slide: function( event, ui ) {
var target_name = $(this).attr("set_content");
$( "#"+target_name ).val( ui.value );
}
});
$(".demo").show();
});
</script>
<div class="demo">
<table><tr>
<td>
<input type="text" id="amount1" />
<slider-v set_content="amount1" value="100"></slider-v>
</td>
<td>
<input type="text" id="amountA" />
<slider-v set_content="amountA" value="800"></slider-v>
</td>
<td>
<input type="text" id="amount2" />
<slider-h set_content="amount2" value="500"></slider-h>
<br /><br />
<input type="text" id="amountB" />
<slider-h set_content="amountB" value="400"></slider-h>
</td>
</tr></table>
</div>
タグ：jquery javascript
|
|
【jQueryの最新記事】
- jQuery の $.get を使用した ajax のテンプレート
- jquery.balloon.js を使用した簡単なバルーン( マウスオーバーで表示する追加説明用 )の作り方
- jQuery による link 要素の追加と削除を bootstrap.css でリアルタイムチェック
- FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する
- jQuery + bootstrap.js で ajax の GET と POST を使用した DB テーブルを更新する UI テンプレート
- jQuery : 貼り付けるだけで、ページ右下にページ先頭にジャンプするリンクを表示させる( アニメーションは無し )
- STYLE 要素を追加して、CSS テキストをセットして、jQuery で CSS に important 指定を追加する。
- ページの右下に、ページの先頭へ移動するボタンを追加する(ページの先頭から 200px までは、スクロールボタンを表示しない)
- テーブルのTDをクリックしたら、INPUT で値を変更可能にして、元の値と違うものにはフラグを立てる処理を絵で書いて説明してみました
- jQuery を使用してサーバから取得した JSON データを元にテーブルを作成し、その後から列を加工する
- JSON 配列を WEB より読み出して jQuery で動的にテーブルを作成して表示する
- jQuery UI の Datepicker Widget のオプション
- FormData を使用して、jQuery で配列として PHP に送る
- 必要なデータを隠しリストボックス( multiple ) に jQuery で追加して配列として PHP に送る
- Android Studio の追加日本語化用に、キャラクタセットに依存しないコード文字列を作成するツールを作成しました
- 画像ファイルが存在した時のみ、表示する jQuery の記述
- jQuery で mobile(スマホ) かどうかのチェックをしたくて調べたら、Stack Overflow の記事でいろんな方法が答えられていました。
- jQuery と FileReader オブジェクトによる、ローカルの複数画像ファイルのプレビュー表示
- とても面白くて簡単な jQuery のクリックしたコンテンツ以外を暗転(Blackout) するサンプル
- jQuery で、左右に並んだリストボックスの右側のデーターをダブルクリックしたら左へ転送してソートする処理
