ブックマーク / ascii.jp (4)

  • jQueryのイベントをチュートリアルで学ぶ(前編) (6/6)

    マウスの動きに合わせて命令を実行する mousemove() mousemove() は、特定の要素上でマウスカーソルが動いた場合に命令を実行できます。 $(セレクター).mousemove(function(){ //セレクターで指定した要素上でマウスカーソルが動いている際に実行したい命令 }) 実際に mousemove() を利用するのは、座標などの情報を取得する命令と組み合わせるケースがほとんどです。ここでは詳しく説明しませんが、mousemove() 内の function() を function(e) としておくと、イベント発生時にe.clientXで現在のマウスのX座標、e.clientYでマウスのY座標を取得できます。以下は、img要素上でマウスカーソルが動いている際に、カーソルのX座標とY座標をp要素に書き出すサンプルプログラムです。 ▼サンプル13(スクリプト部分)

    jQueryのイベントをチュートリアルで学ぶ(前編) (6/6)
    wantan200
    wantan200 2012/04/11
    mousemove() 内の function() を function(e) としておくと、イベント発生時にe.clientXで現在のマウスのX座標、e.clientYでマウスのY座標を取得
  • jQueryのイベントをチュートリアルで学ぶ(前編) (2/6)

    イベントの基をクリックで学ぶ ■click()の基の書き方 特定の要素がクリックされたときに何らかの命令を実行したい場合は、click() を使います。よく使う命令ですので、click() を例に、イベントの基を学んでいきましょう。 click() は、ready() と同様に括弧内に function(){...} と記述し、その内側に実行したい命令を記述します。 $(セレクター).click(function(){ //セレクターで指定した要素がクリックされた際に実行したい命令 }) 具体的なサンプルプログラムを見てみましょう。下記のコードを実行すると、button要素がクリックされたときに、img要素のsrc属性の値が「sea.jpg」に、alt属性の値が「海」に書き換わります。attr()は、,(カンマ)区切りで指定した属性値を変更する命令でしたね(関連記事)。 サンプルでは

    jQueryのイベントをチュートリアルで学ぶ(前編) (2/6)
    wantan200
    wantan200 2012/04/11
    「a要素に設定したイベント処理がうまく動かない」––そんなときは return false;
  • ASCII.jp:Web制作の現場で使えるjQuery UIデザイン入門

    Webデザイナー、(X)HTMLCSSコーダー、マークアップエンジニアが扱いやすいJavaScriptライブラリー「jQuery」を基礎から解説。プログラムの基的な書き方から、実務で使えるサンプルまで。jQueryをマスターして仕事の幅をぐっと広げよう。<cj:inc template="792" element_id="499288" />

    ASCII.jp:Web制作の現場で使えるjQuery UIデザイン入門
  • ASCII.jp:jQueryで自作するフローティングウィンドウ|Web制作の現場で使えるjQuery UIデザイン入門

    「フローティングウィンドウ」は、Webページ文に重ねて表示し、ドラッグ&ドロップ操作で移動できる子ウィ ンドウのことです。といっても、ブラウザーの画面内にウィンドウのように表示するだけですので、ブラウザーやウイルス対策ソフトのポップアップブロック機能に規制されることもありませんし、追加的な情報を元のWebページのレイアウトを崩さずに表示できるメリットがあります。 基のフローティングウィンドウを作成する 今回は、「フローティングウィンドウを表示」のリンクをクリックするとフローティングウィンドウを開くWebページを作成します。開いたウィンドウはドラッグ&ドロップ操作でページ内を自由に移動でき、右上に配置した「×」ボタンで閉じられます。 まず、以下のようなHTML/XHTML(以下、HTML)を用意します。リンクのテキストをa要素で包み、class属性に「open」を付けます。このa要素は、

    ASCII.jp:jQueryで自作するフローティングウィンドウ|Web制作の現場で使えるjQuery UIデザイン入門
  • 1