skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです
Safariぽいスライダーを作るJavaScript「jQuery Slider plugin」
｜
｜
｜
｜
｜
｜
フォームなどである数値からある数値までを入力してもらいたいとき、スライダーなどで明示できるとユーザーに配慮できます。
今回はjQueryプラグインの「jQuery Slider plugin (Safari style) 」を使用し、手軽に実現してみたいと思います。
使用方法
jQuery Slider plugin (Safari style) からファイル一式をダウンロードします。
<link rel="stylesheet" href="jslider.css" type="text/css">
<link rel="stylesheet" href="jslider.blue.css" type="text/css">
<!--[if IE 6]>
<link rel="stylesheet" href="jslider.ie6.css" type="text/css" media="screen">
<link rel="stylesheet" href="jsllider.blue.ie6.css" type="text/css" media="screen">
<![endif]-->
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.dependClass.js"></script>
<script type="text/javascript" src="jquery.slider.js"></script>
<script type="text/javascript">
$(function(){
$("#id名").slider({
from: 1000, //スライダーの初期値
to: 100000, //スライダーのマックス値
step: 500, //間隔
round: 0, //小数点以下の桁数
dimension: ' 円' //テキスト
});
});
</script>
あとは上記のidを付与して以下のようにすれば完成です。
<p style="display: inline-block; width: 横幅px;">
<input id="id名" type="slider" name="price" value="30000;60000" />
</p>
※valueは初期値です。
Safariぽいスライダーを作るJavaScript「jQuery Slider plugin」サンプル
記事作成：2009年11月27日
▼Safariぽいスライダーを作るJavaScript「jQuery Slider plugin」へのコメントはtwitterにて受け付けています。
twitterでコメントする
前の記事：ガラガラと要素を切り替えられるJavaScript「jQuery flips plugin」
次の記事：さくっとtwitterのタイムラインを表示するJavaScript「jQuery plugin for Twitter」
