LotosLabo

プログラミング技術とか気になった情報を載せていきます

jQuery UIについて3

折りたたみ式のセッションを使う

Accordion

まずこんな感じの要素で囲んだのを作ります。

例:

<body>
<div id="accordion">
<h1><a href="">日本</a></h1>
<div>こんにちは</div>

<h1><a href="">アメリカ</a></h1>
<div>Hello</div>

<h1><a href="">フランス</a></h1>
<div>Bonjour</div>

<h1><a href="">ドイツ</a></h1>
<div>Guten tag</div>

</div>


例:

<script>
$(function(){
	$('#accordion').accordion();
});
</script>



こうすることでアコーディオン型になると思います。
わかりにくいと思いますのでgif画像を。


f:id:lo25131:20140331221528g:plain



入力時に候補を表示してくれる

Autocomplete

テキストボックスを用意します。

例:

<body>
<input type="text" id="langs">
</body>



例:

$(function() {
    var langs = ["ja", "en", "cn", "sp", "lotos", "あいうえお", "にゃんぱす"]
             $('#langs').autocomplete({
                      source:langs
           });
});



オートコンプリート機能です。
例えば「あ」と入力すると候補としてあいうえおが表示されると思います。

f:id:lo25131:20140331222723g:plain

ボタンを表示

jQueryUIのテーマでボタンを表示させます。

例:

<body>
<button>click</button>
</body>



例:

$(function() {
   $('button').button();
});


f:id:lo25131:20140331223104g:plain


チェックボックスを表示

例:

<body>
<div id="set">
<input type="checkbox" id="check1">
<label for="check1">1</label>
<input type="checkbox" id="check2">
<label for="check2">2</label>
<input type="checkbox" id="check3">
<label for="check3">3</label>
</div>
</body>


例:

$(function(){
	$( "#set" ).buttonset();
});



複数ある場合は要素を作り、セットとして扱います。

f:id:lo25131:20140331224634g:plain



ラジオボタンを表示

例:

<div id="radio">
    <input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
    <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
    <input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
  </div>


例:

$(function() {
    $( "#radio" ).buttonset();
});



ラジオボタンも同様です

f:id:lo25131:20140331224828g:plain


日付の入力を便利にする

Datepicker

まずテキストボックスを作成します

例:

<input type="text" id="datepicker">


例:

$(function() {
    $("#datepicker").datepicker();
  });



f:id:lo25131:20140401022311g:plain


またオプションとして出力の表示フォーマットを変更できます。

dateFormat: "yy--mm--dd"


そして複数一気に出すことも出来ます。

例:

$(function(){
	$("#datepicker").datepicker({
		dateFormat: "yy--mm--dd"
		numberOfMonths: 3,
		minDate: -2,
		maxDate: "+1M"
	});
});


ユーザーに対するメッセージを表示

Dialog


例:

<body>
<div id="dialog" title="挨拶">
<p>こんにちははじめまして。</p>
</div>
</body>


例:

$(function() {
    $("#dialog").dialog();
  });



要素の文字をダイアログで表示します

f:id:lo25131:20140401010753g:plain

プレグレスバーとスライダー

Progressbar Slider

まずプログレスバーからやっていきます

例:

<body>
<div id="progressbar"></div>
</body>


例:

$(function() {
    $( "#progressbar" ).progressbar({
      value: 37
    });
  });



プログレスバーが表示されました


次にスライダーをやっていきます

例:

<body>
<div id="slider"></div>
</body>


例:

$(function() {
    $( "#slider" ).slider();
  });



スライダーが表示されます

f:id:lo25131:20140401021704g:plain


次に二つ組み合わせて連携させます


例:

<body>
	<div id="progressbar"></div>
	<br>
	<div id="slider"></div>
	<script>
$(function() {
	 $( "#progressbar" ).progressbar({
      value: 37
    }),
    $( "#slider" ).slider({
    	slide:function(event,ui){
    		$("#progressbar").progressbar('option','value',ui.value);
    	}
    });
  });
</script>
</body>



スライダーを動かすとプログレスバーの値が変更されます


f:id:lo25131:20140401021040g:plain

タブ式メニューを使う

Tabs

個人的に好きなメニューです。

例:

<body>
	<div id="tabs">
    <ul>
        <li><a href="#tab1">性別</a></li>
        <li><a href="#tab2">年齢</a></li>
        <li><a href="#tab3">好きなタイプ</a></li>
    </ul>
    <div id="tab1">
        <p>男性です。</p>
    </div>
    <div id="tab2">
        <p>21歳です。</p>
    </div>
    <div id="tab3">
        <p>ちっちゃい子です。</p>
    </div>
</div>
	
	<script>
	$( function() {
    $( '#tabs' ) . tabs();
	});
	</script>
</body>



タブで切り替えることが出来ます。

f:id:lo25131:20140401020024g:plain


エフェクトを使う

effect(effect,[optionx],[speed],[callback])

まずはボックスを作成します。

例:

<div id="box" style="width:100px; height:100px;background:red;">



エフェクトを実装します

例:

$(function(){
	$('#box').click(function() {
	$(this).effect("explode");
	});
});



クリックすると爆散します

また、pieces: 4 と指定することで分割数を変えられます。

$(function(){
	$('#box').click(function() {
	$(this).effect("explode",{
	pieces: 4
});
});
});