jQuery

not(“:animated”)とstop()の使い分けについて〜jQuery

not(“:animated”)とstop()の使い分けについて説明します。 :not(:animated)は、アニメーション中ではない時にアニメーションの命令を受け付けることです。 従って、現在  >>続きを読む

Google Mapのスクロールを止める方法

Google Map共有機能の「地図を埋め込む」を使って、サイトにMapを表示する場合iframeが使用されます。 簡単に導入することができて便利に使えますのでさまざまなサイトで活用されています。 ところが、ひとつ問題点  >>続きを読む

data-**属性とdata()の使い方〜jQuery

data()を利用するとグローバル変数のようにデータを保存することができます。HTML5から利用できるdata-**属性はこのdata()とは別ものですが、data()で操作することも可能です。data-**属性をdat  >>続きを読む

replaceWith()の使い方〜jQuery

replaceWith()はある要素を指定されたHTMLやDOMエレメントで置き換えるものとリファレンスでは説明されていますが、少しわかりにくいので解説します。 ざっくりとみると、html()と働きが似ています。 htm  >>続きを読む

jQueryのトラバースの使い方

jQueryメソッドを使用してDOMの中を移動して要素を取得する方法をトラバースといいます。トラバースでできることの多くは子孫セレクターを活用すれば可能です。トラバースを使用するとパフォーマンスが良くなるといわれることが  >>続きを読む

スマートフォン用ドロワーメニューの作成方法〜レスポンシブ対応編

スマートフォン用のドロワーメニューの簡単な例は前回紹介しましたが、少し複雑な動きに対応させるには多少問題があります。 今回は起こり得る問題点と解決方法について考えてみます。サンプルとして前回使用したドロワーメニューを使用  >>続きを読む

レスポンシブサイトの切り替えポイント〜javaScript

レスポンシブサイトを作成するときに、javascriptで切り替えポイントを認識させる方法の説明です。 javascriptですからjQueryでも使用できます。 CSSメディアクエリによる切り替え まずは、CSSでのメ  >>続きを読む

onメソッドのイベントにhoverを使う方法:動的に作成した要素にイベント設定〜jQuery

jQueryで動的に要素を追加することをマニピュレーションといいます。動的なサイトを作成するには欠かせないものですが、時には困ったことが起こります。 例えば動的に作成した要素にイベント処理を行うときです。サンプルを見なが  >>続きを読む

正規表現の使い方の練習〜JavaScript編

正規表現でreplaceする replace関数を使って正規表現の使い方を覚えるために簡単なスクリプトを書きました。 replace(検索文字列 , 置換文字列 )を使用して文字を置換します。 プルダウンメニューで選んだ  >>続きを読む

jQuery Mobile1.4でスマホサイト作成4〜テーマの変更

data-thema属性で変更できるテーマは、jQuery Mobile 1.4の場合は「a」(白ベース)と「b」(黒ベース)の2種類のみです。 data-theme=”a”またはdata-the  >>続きを読む

jQuery Mobile1.4でスマホサイト作成3〜開閉式コンテンツとPOPアップ

完成例サンプル リストをうまく利用することで小さなモバイル画面で情報を見やすく整理することができます。 リストビューの作成 リストの作成はul要素にdata-role=”listview”属性を付  >>続きを読む

jQuery Mobile1.4でスマホサイト作成2〜ボタンの作成

完成例サンプル リンクボタンの作成 リンクボタンの作成は簡単です。a要素にclass=”ui-btn”というクラスを指定するだけです。 リンクボタンの作成は旧バージョンから1.4になってから大きく  >>続きを読む

jQuery Mobile1.4でスマホサイト作成1〜文書構造作成

jQuery Mobileのバージョン1.4では、従来バージョンから変更があります。1.4に対応した記述方法を学習します。 jQuery Mobileの準備 モバイルページサンプル meta要素にviewportの設定を  >>続きを読む

iOSシミュレータの使い方〜Macユーザー用

スマホサイト作成のときにiOSの実機をシミュレーションする必要があります。 その場合MacにはiOSシミュレータが用意されています。 iOSシミュレータを使用するにはXcodeがインストールされている必要があります。 X  >>続きを読む

scrollTopとscrollTop()の使い方〜jQuery

scrollTopとscrollTop() 似ているけれども違うものです。 それぞれの使い方をしっかりとマスターしましょう。 scrollTop()について scrollTop()はメソッドです。 scrollTop()  >>続きを読む

マウスホバーで画像を入れ替える〜jQuery

マウスホバーでボタンなどの画像をフワッとクロスフェードさせたいという相談が多いので、何種類かのアプローチと失敗例などを書きました。 CSS3でクロスフェードさせるサンプル jQueryでimgタグの画像をクロスフェードさ  >>続きを読む

パララックス 円運動をさせる〜jQuery

パララックス効果の中で円運動をさせるスクリプトを書いてみました。 円運動は円の半径を決めてその角度を少しずつ変化させることで実現できます。 x座標とy座標を数式で表すと次のようになります。 rが半径でradianが角度(  >>続きを読む

Ajaxでモーダルウインドウ内にテキストを読み込む〜jQuery

今回のサンプルは、モーダルウインドウ内に別のHTML文を表示し、読み込んだHTML文から更に別HTMLを読み込む仕組みです。(中級者向け) モーダルウインドウは半透明のレイヤーをブラウザの表示領域いっぱいに広げて現在のペ  >>続きを読む

hover()とanimate()を使ったボタン〜jQuery

animateを使用すれば幅や高さ、あるいはマージンなどを簡単にアニメーションさせることができます。 次のスクリプトはマウスを重ねると幅が100pxから200pxへと変化します。また、マウスが外れると幅はもとの大きさにな  >>続きを読む

パララックスの仕組み〜jQuery

主な仕組み スクロールイベントを使用してスクロールした量だけオブジェクトを移動させます。 スクリプトで使用する主なメソッド スクロールイベントはscroll( )メソッドを使用します。 スクロール量を取得する方法は$(w  >>続きを読む

フローティングナビ〜付いてくるナビゲーション

縦長のページを作成するときに欲しい機能としてナビゲーションがどこまでも付いてくるものです。 簡単にできるfloater.jsのプラグインを活用した方法です。 floater.jsはこちら floater.jsはMITライ  >>続きを読む

スライドギャラリー解説補助資料〜jQueryドーナツ本

受講生対象の補助資料です。 以下jQuery教材のドーナツ本のスライドギャラリーの補助資料です。 スライダの構造 スクリプトの解説 HTML構造 ソースが読めてもスライド機能のからくりがわかりづらいですね。 アニメーショ  >>続きを読む

Ajax通信とクロスドメイン問題

ajax通信とは URLを入力して希望するWebページをリクエストして、サーバーからのデータが送られてきて希望するページを閲覧するという通常の手順と違い、Ajax通信はJavaScriptを使用して必要なコンテンツを更新  >>続きを読む

jQuery Mobileの使い方

準備 jQuery Mobileのページに行って必要なライブラリをダウンロードまたはリンクします。 リファレンス参考 data-role transition テーマ作成 作成 sample.html HTML5の準備を  >>続きを読む

Topへ戻るボタンの作成〜jQuery

長いページでは必須のTopへ戻るボタンですね。 スクロールするとTopボタンが出現し、クリックすると緩やかにTopに戻ります。 この動きはCSSとjQueryで実現できます。easingなどを好みで脚色してください。 T  >>続きを読む

要素の追加〜jQuery

jQueryのprepend,append,before,afterのそれぞれのメソッドの違いを確認しておきます。 prependはHTML要素内の先頭に挿入します。 appendはHTML要素内の最後に挿入します。 b  >>続きを読む

jQueryの記述の基本を覚える

マウスクリックした時のイベントの作成の基本形です。 $( );で全体を囲む 1の中に関数を宣言 function(){ } 2の関数の中に$( ’セレクター’).イベント( function(){ } ) 3の関数に中に  >>続きを読む

jQueryを使ったフォームのイベント処理

input要素にマウスやタブキーで選択された状態を感知して発火します。

次のサンプルではテキストボックスに予め薄いグレーで「入力してください」と入力を促し  >>続きを読む

jQueryのイベント伝播〜バブリング

jQueryではそれぞれのイベントに対応したメソッドを利用してイベントハンドラを設定します。JavaScriptのDOM0ではイベント属性をイベントハンドラとして利用しました。また、documentオブジェクトを指定して  >>続きを読む

jQueryメソッドの特性

jQueryのメソッドはgetterとsetterの2つの特性を持っています。 getterとsetterとは、オブジェクト指向のプログラミングで使用される特殊なメソッドです。 オブジェクト指向のプログラミングでは、フィ  >>続きを読む