●JSONデータのキーにドットが含まれている場合のデータ取得方法
var json={"foo.bar":"hoge"};
alert(json["foo.bar"]);//アラートで「hoge」を表示
JavascriptTips
●ローカルストレージの基本的な使い方
/*データを入れる*/
localStorage.setItem('key','data');
localStorage.key='data';
/*データを取得する*/
localStorage.getItem('key');
localStorage.key;
/*データをすべて削除する*/
localStorage.clear();
/*キーを指定して削除する*/
localStorage.removeItem('key');
/*格納した要素数*/
localStorage.length;
●ドラッグによるdiv幅変更
あいうえおかきくけこ
ABCDEFGHIJK
あいうえおかきくけこ
ABCDEFJHIJK
HTML
<div id='wrap'>
<div id='left'><div>あいうえおかきくけこ</div><div>ABCDEFGHIJK</div></div>
<div id='line'></div>
<div id='right'><div>あいうえおかきくけこ</div><div>ABCDEFJHIJK</div></div>
</div>
CSS
#wrap{
position: relative;
height:100px;
width:305px;
}
#left{
position: absolute;
left:0px;
height:100%;
width:150px;
color:white;
background-color:blue;
overflow:auto;
}
#line{
position: absolute;
left:150px;
height:100%;
width:5px;
background-color:white;
}
#line:hover{
cursor:w-resize;
}
#right{
position: absolute;
left:155px;
height:100%;
width:150px;
color:white;
background-color:green;
overflow:auto;
}
.selectguard{
-webkit-user-select:none;
-moz-user-select: none;
-khtml-user-select: none;
}
JS
$(function(){
$('#line').mousedown(function(){
$('#wrap').bind('mousemove',divmove)
.bind('mouseup',divstop);
});
});
function divmove(e){
//選択を無効化
$('#wrap').addClass('selectguard');
//左divの位置
var leftx=$('#left').offset().left;
//カーソル位置
var cx=e.clientX-leftx;
//右divの幅
var rwidth=$('#wrap').width()-cx;
$('#left').width(cx);
$('#line').css({'left':cx,'width':5});
$('#right').css({'left':cx+5,'width':rwidth});
}
function divstop(){
$('#wrap').removeClass('selectguard');
$('#wrap').unbind();
}
●jQuery+CSSで簡易ティッカー
↓をマウスオーバーすると文字が流れる
ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890
HTML
<div id='wrapticker'>
<span id='str'>ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890</span>
</div>
CSS
#wrapticker{
overflow: hidden;
width:100px;
}
#str{
white-space: nowrap;
position: relative;
left: 0px;
}
JS
$('#wrapticker').bind('mouseenter',function(){
var str=$(this).find("#str");
if(str.width()<=100){return}
var offset_div=$(this).offset().left;
var offset_str=os=str.width()+str.offset().left;
var i=0;
var speed=3;
var stopper=0;
var si=setInterval(function(){
offset_str=offset_str-speed;
i=i-speed;
if(offset_str<offset_div){
i=0;
if(stopper<20){
stopper++;
}else{
stopper=0;
offset_str=os;
}
str.css({'left':i});
}else{
str.css({'left':i});
}
},50);
$(this).one("mouseleave",function(){
clearInterval(si);
str.css({'left':0});
});
});
●Flashの上に要素を表示
Flashと要素の間にiframeを挟む事でFlashの上に要素を表示させる事ができる
z-indexが効かなかったり、CPU使用率が高くなるwmode=transparentを使いたくない時に便利
緑:div要素
青:iframe
青:iframe