このサイトは、主にjQueryに関連する内容を淡々と書きとめたものです。
IDがitemの要素にdraggableを適用し、ドラッグ終了時に移動範囲が±100ピクセル以内なら元の位置に戻す。
$(document).ready( function () {
$( '#item' ).draggable( {
stop: function ( e, ui ) {
if ( Math.abs( ui.position.top ) <= 100 &&
Math.abs( ui.position.left ) <= 100 ) {
$(this).attr( 'style', 'position: relative;' );
}
}
} );
} );
attr関数で、style属性値に’position: relative;’をセットすると元の位置に戻る。
IDがitemの要素にdraggableを適用し、ドラッグ中とドラッグ終了イベントの処理を行う。
$(document).ready( function () {
$( '#item' ).draggable( {
drag: function ( e, ui ) {
if ( ui.position.left > 0 ) {
// 最初の位置よりも右側に移動した場合
}
},
stop: function ( e, ui ) {
if ( ui.position.top > 0 ) {
// 最初の位置よりも下側に移動した場合
}
}
} );
} );
drapプロパティにはドラッグ中に発生するイベントの関数を、stopプロパティにはドラッグ終了時に発生するイベントの関数を指定する。イベント関数が受け取るui.position.topとleftには移動位置は最初の位置からの相対位置が格納されている。
IDがitemの要素にdraggableを適用し、ドラッグできるようにする。
$(document).ready( function () {
$( '#item' ).draggable( { axis: 'x' } );
} );
axisプロパティはデフォルトでfalseになっており、初期化時に’x'を指定すると水平方向のみに移動可能になる。ちなみに’y'を指定すると垂直方向のみが移動可能になる。
IDがitemの要素にdraggableを適用し、ドラッグできるようにする。
$(document).ready( function () {
$( '#item' ).draggable();
} );
jQueryのほか、jQuery UI Core、jQuery UI Widget、UI Mouseが必要で、初期化時に適用したい任意の要素に対してdraggable関数を呼び出す。
クラスがhilightのIMG要素のマウスオーバー時に透過率を変更する。
$( 'img.hilight' ).hover(
function () { $(this).fadeTo( 'fast', 0.75 ); },
function () { $(this).fadeTo( 'fast', 1 ) } );
hover関数の第1パラメータはマウスオーバー時の関数を、第2パラメータはマウスアウト時の関数を指定する。透過率を変えるfadeTo関数は、第1パラメータに変更速度を、第2パラメータに変更後の透過率を指定。透過率は0～1の範囲となり0で透明、1で不透明となる。
IDがcationの要素が非表示か調べる。
if ( $( '#cation:hidden' ).length != 0 ) {
// 非表示時の対応をここで
}基本的に:visible指定時と逆の効果になり、CSSのdisplay:noneか、INPUT要素などのtype属性値が”hidden”か、要素の幅または高さが0の場合にマッチする。この例ではIDで指定した要素が存在しない場合も0になるので、その点は注意すること。
ブラウザのサイズが変更された際、変更後のサイズに合わせて位置や領域を調整する。
$(document).ready( function () {
$(window).resize( function () {
// ここに処理内容を記述
} );
}onResizeイベントはresize関数に処理内容を記述すればいい。
IDがmessageの要素を非表示にする。
/* すぐに非表示 */
$( '#message' ).hide();
/* じわっと非表示 */
$( '#message' ).fadeOut( 'slow' );
hide関数かfadeOut関数を使う。fadeOut関数の第1パラメータには消えるまでの時間（’fast’、’normal’、’fast’、または消えるまでのミリ秒）を、第2パラメータには消えた時に呼び出される関数が指定できる。
IDがcationの要素が表示されているか調べる。
if ( $( '#cation:visible' ).length != 0 ) {
// 表示されている場合の対応をここで
}この例ではIDで指定した要素が存在しない場合も0になるので、その点は注意すること。
idがleft-sideの要素の幅を100pxにする。
$( '#left-side' ).width( 100 );$( '#left-side' ).attr( 'style', 'width:100px;' );とほぼ同じ効果だが、width関数はほかのstyle属性の値を気にしなくていい。
idがleft-sideの要素の高さを100pxにする。
$( '#left-side' ).height( 100 );$( '#left-side' ).attr( 'style', 'height:100px;' );とほぼ同じ効果だが、height関数はほかのstyle属性の値を気にしなくていい。
idがpost-1の要素の高さを取得する。
var height = $( '#post-1' ).height();
取得できる高さはピクセル値で、上下のpadding分は含まれていない。例えばその要素の高さが50pxでpaddingが10pxの場合は、取得できる高さの値は50となる（jQuery 1.7.1でIE7～9、Chrome 16、Firefox 9、Safari 5.1、Opera 11.60で確認）。なおheight関数は、$( window ).height()と記述することでブラウザの表示領域の高さを、$( 'body' ).height()とすることでドキュメントの高さ（長さ）を取得できる。
idがpost-1の要素の幅を取得する。
var width = $( '#post-1' ).width();
取得できる幅はピクセル値で、左右のpadding分は含まれていない。例えばその要素の幅が100pxでpaddingが10pxの場合は、取得できる幅の値は100となる（jQuery 1.7.1でIE7～9、Chrome 16、Firefox 9、Safari 5.1、Opera 11.60で確認）。なおwidth関数は、$( window ).width()と記述することでブラウザの表示領域の幅を、$( 'body' ).width()とすることでドキュメントの幅を取得できる。
idがpagetopの要素をクリックすると、ページのトップへスクロールする。
$('#pagetop').click( function() {
$('html,body').animate({'scrollTop':'0px'},'slow');
return false;
} );
html要素はIE7～9、Firefox 9.01、Opera 11.60が動作する（Chrome 16、Safari 5.1はNG）。body要素はChrome 16、Safari 5.1が動作する（IE7～9、Firefox 9.01、Opera 11.60はNG）。このようなことから、htmlとbody要素の両方を指定する必要がある。
