ホーム > click (全6件)
  • iOSで中断ボタンをクリックした際に要素を消して確認ボックス(confirm)を表示する

    中断ボタンをクリックした際に要素を消して確認ボックスを表示する。

    $( '#interrupt' ).click( function () {
    	$( 'p' ).css( 'opacity', '0' );
    	setTimeout( function () {
    		if ( window.confirm( '○○を中断しますか。' ) ) {
    			// ここに中断時の処理を記述
    		}
    		$( 'p' ).css( 'opacity', '1' );
    	} , 250 );
    	return false;
    } );
    

    PCは問題ないけどiOS 9.2(確認時)で確認ボックスを表示するとその前のcss操作が効かない場合は、setTimeout関数のコールバックに確認ボックス表示以降の処理を記述する。

  • ページ内リンクをスムーズにする

    ページ内リンクをスムーズにする。

    $( 'a[href^=#]' ).click( function () {
    	pos = $( $(this).attr( 'href' ) ).offset().top;
    	$( 'html,body' ).animate( { scrollTop: pos }, 'fast' );
    	return false;
    } );
    

    セレクタで’a[href^=#]’を指定することでa要素のhref属性の値が’#’で始まっているページ内リンクを取得。そのクリックイベントで、対象のアンカー要素のトップ座標を取得してスクロールを実現している。

  • イベントハンドラを設定する

    IDが’drop_here’の要素にdragenter、dragleave、dropイベントのハンドラを設定する。

    $( '#drop_here' ).bind( 'dragenter', function ( event ) {
    	/* ここにdragenter(ドラッグ状態でカーソルが要素内に入った)時の処理を記述 */
    
    } ).bind( 'dragleave', function ( event ) {
    	/* ここにdragleave(ドラッグ状態でカーソルが要素の外へ出た)時の処理を記述 */
    
    } ).bind( 'drop', function ( event ) {
    	/* ここにdrop時の処理を記述 */
    
    } );
    

    jQueryは、clickやchange関数のようにHTML標準のイベントハンドラ用の関数を用意しているが、用意されていない関数はbind関数で設定でき、連結して記述できる。

  • チェックボックスのクリック時の対応を指定する

    チェックボックスのクリック時の処理を指定する。

    /* 単独のクリックイベント処理の場合 */
    $( 'input[type="checkbox"]' ).click( function() {
    	// ここに処理内容を記述する
    } );
    
    /* ブラウザ標準のイベント処理を行わない場合 */
    $( 'input[type="checkbox"]' ).click( function( e ) {
    	// ここに処理内容を記述する
    	e.preventDefault();
    } );
    

    属性の値を指定して検索する場合は [属性名=属性値] の書式で指定する。onClickイベントの処理はclick関数で対応する関数を指定すればよい。

  • onClickイベントを処理する

    IDがpagetopのA要素のonClickイベントを処理する。

    $( '#pagetop' ).click( function () {
    	// ここに処理内容を記述
    	return false;
    } );
    

    通常のJavaScriptと同様に、ページ遷移させない場合はfalseを返す。なお追加したコンテンツ内でonClickイベントを処理する場合はonメソッドが使える。

  • ページトップへスクロール

    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要素の両方を指定する必要がある。