実行結果
設置サンプルのソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/content/lib/jquery/engage.itoggle.js"></script>
<script type="text/javascript">
$(function(){
$('#itoggle input#example').iToggle({
easing: 'easeOutExpo',
type: 'radio',
keepLabel: true,
easing: 'easeInExpo',
speed: 300,
onClick: function(){
$("#status").html("onClick");
},
onClickOn: function(){
$("#status").html("onClickOn");
},
onClickOff: function(){
$("#status").html("onClickOff");
},
onSlide: function(){
$("#status").html("onSlide");
},
onSlideOn: function(){
$("#status").html("onSlideOn");
},
onSlideOff: function(){
$("#status").html("onSlideOff");
}
});
$('#itoggle input#example_1').iToggle({
easing: 'easeOutExpo',
onClickOn: function(){
$('#console').show().css({opacity:0}).animate({opacity:1},400);
statusUpdate('Console on');
$('input:checkbox').addClass('iT_checkbox_on');
$('input:radio').addClass('iT_checkbox_on');
},
onClickOff: function(){
statusUpdate('Console off');
$('#console').animate({opacity:0},400);
$('input:checkbox').removeClass('iT_checkbox_on');
$('input:radio').removeClass('iT_checkbox_on');
}
});
$('#itoggle #example_2').iToggle({
easing: 'easeOutExpo',
onClickOn: function(){
statusUpdate('Clicked on '+$(this).attr('for'));
},
onSlideOn: function(){
statusUpdate('Slide on '+$(this).attr('for'));
},
onClickOff: function(){
statusUpdate('Clicked off '+$(this).attr('for'));
},
onSlideOff: function(){
statusUpdate('Slide off '+$(this).attr('for'));
}
});
$('#itoggle #example_3').iToggle({
easing: 'easeOutExpo',
type: 'radio',
onClickOn: function(){
statusUpdate('Clicked on '+$(this).attr('for'));
},
onSlideOn: function(){
statusUpdate('Slide on '+$(this).attr('for'));
},
onClickOff: function(){
statusUpdate('Clicked off '+$(this).attr('for'));
},
onSlideOff: function(){
statusUpdate('Slide off '+$(this).attr('for'));
}
});
});
function statusUpdate(text){
$('#console').prepend('<p>'+text+'</p>');
$('#console p:nth-child(7)').remove();
}
</script>
<!-- CSS -->
<style type="text/css">
/* debug */
div#console{
display:none;
position:absolute;
top:8px; right:8px;
width:160px;
padding:6px 8px 8px 8px;
text-align:right;
background:#000;
-moz-border-radius:6px;
-webkit-border-radius:6px;
}
div#console p {
margin:0;
color:#fff;
}
/* itoggle */
div#itoggle{
position:relative;
}
div#itoggle h3{
margin-bottom:4px;
font-size: 14px;
font-weight:bold;
}
div#itoggle p{
color:#666;
margin-bottom:10px;
}
div#itoggle input.iT_checkbox_on{
display:block !important;
float:left;
position:relative !important;
top:-2.5em !important;
left:100px !important;
margin-bottom:-43px;
}
div#itoggle label.ilabel{
display:block;
cursor:pointer;
}
div#itoggle label.itoggle,
div#itoggle label.itoggle span{
display: block;
width: 93px; height: 27px;
margin-bottom:10px;
background: url("/content/img/ajax/itoggle.png") left bottom no-repeat;
cursor:pointer;
text-indent:-5000px;
}
div#itoggle label.itoggle.iToff{
background-position:right bottom;
}
div#itoggle label.itoggle span{
background-position: left top;
margin: 0;
}
div#itoggle input.iT_checkbox{
position:absolute;
top:-9999px; left:-9999px;
}
div#example_2 label.ilabel{
float:left;
clear:left;
width:20em;
}
div#example_2 .itoggle {
margin-left:10em;
}
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照： <a href='http://labs.engageinteractive.co.uk/itoggle/'>iToggle</a></p>
<!-- CODE -->
<div id="itoggle">
<h3>例1：基本</h3>
<p><input type="checkbox" id="example" /> ステータス：<span id="status"></span></p>
<h3>例2：デバック表示</h3>
<p><input type="checkbox" id="example_1" /></p>
<h3>例3：チェックボックスでの使用例</h3>
<div id="example_2">
<label for="example_2a">Example 2 a</label><input type="checkbox" checked="checked" id="example_2a" />
<label for="example_2b">Example 2 b</label><input type="checkbox" id="example_2b" />
<label for="example_2c">Example 2 c</label><input type="checkbox" checked="checked" id="example_2c" />
</div>
<h3>例4：ラジオボタンでの使用例 03</h3>
<div id="example_3">
<input type="radio" id="example_3a" name="example_3" checked="checked" />
<input type="radio" id="example_3b" name="example_3" />
<input type="radio" id="example_3c" name="example_3" />
</div>
<div id="console"></div>
</div>
<!-- / CODE -->
</div>
</body>
</html>