タグ

関連タグで絞り込む (1)

タグの絞り込みを解除

*JavaScriptとjQueryに関するkjtecのブックマーク (10)

  • Japan Map ( jQuery plugin )

    Quick Start Include jquery-japan-map.js after jQuery. Then $(selector).japanMap(options) method will create most simple clickable canvas map of prefectures of Japan. The $.japanMap method take an object as argument which defines options. At least, you may have to implement onSelect event handler, which runs when a prefecture of the map is clicked or touched. Here is most simple example. <!DOCTYPE

  • 日本地図を表示するjQuery プラグイン Japan Mapは簡単便利 | ゆーそうとITブログ〜WordPress・Xserver・アイキャッチ画像作成ツール〜(旧:ゆうそうとITブログ)

    jQueryについてちょっと別の事で検索をしていたのですが、偶然「日地図を表示するjQuery プラグイン Japan Map」を見つけました。日地図を表示したりクリックしてページに遷移したりできそうな面白いものだったので、どんな風に使えるかを試してみました。 日地図を表示するjQuery プラグイン Japan Map とは? http://takemaru-hirai.github.io/japan-map/ Takemaru Hiraiさんが作られて公開しているjQueryプラグインです。このページにこのプラグインの使い方やサンプルコードが載っています。このjQueryを使うだけで日地図が表示出来ちゃう!というのはとても簡単で楽しそうです。 ライセンスも MITライセンス なので色々なことに使えそうです。 ファイルをダウンロードして動かしてみる http://takemaru

    日本地図を表示するjQuery プラグイン Japan Mapは簡単便利 | ゆーそうとITブログ〜WordPress・Xserver・アイキャッチ画像作成ツール〜(旧:ゆうそうとITブログ)
    kjtec
    kjtec 2017/02/01
  • Ajaxでモーダルウインドウ内にテキストを読み込む〜jQuery | IT工房|AI入門とWeb開発

    今回のサンプルは、モーダルウインドウ内に別のHTML文を表示し、読み込んだHTML文から更に別HTMLを読み込む仕組みです。(中級者向け) モーダルウインドウは半透明のレイヤーをブラウザの表示領域いっぱいに広げて現在のページを隠します。そして、画像などを表示する領域をブラウザの中央部に置くものです。 代表的なものにLightBoxがあります。 今回のサンプルの表示内容は画像ではなくて、同じドメインに存在する他のHTML文とします。 これをAjaxを活用して読み込みます。 さらに、読み込んだHTML文内のリンク先をAjaxを活用して読み込む方法です。 サンプル 見出しをクリックするとモーダルウインドウが表示されます。モーダルウインドウに表示されたh1にはリンクの設定をしています。この部分をクリックするとajaxを使用して同じ場所にリンク先が表示される仕組みのものです。 HTML <dl> <

    Ajaxでモーダルウインドウ内にテキストを読み込む〜jQuery | IT工房|AI入門とWeb開発
  • PhotoSwipeプラグインの使い方!スマホサイトのギャラリーに使える! | SHINGO IRIE

    スマホサイト向けのサイトで、写真をたくさん見せたい時に使えるライブラリ「PhotoSwipe」が便利です。タッチすると全画面で表示して、次へ次へとスワイプも可能です。 PhotoSwipeの使い方各ファイルをダウンロードまずはPhotoSwipe公式サイトから、ファイル一式をダウンロードします。 Script/CSSファイルを読み込み<link href="photoswipe.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="klass.min.js"></script> <script type="text/javascript" src="code.photoswipe-3.0.4.min.js"></script> 起動<script> (function(window, Pho

    PhotoSwipeプラグインの使い方!スマホサイトのギャラリーに使える! | SHINGO IRIE
  • jQuery入門講座 使い方-jQueryの高速化

    索引 ├ 使い方 目次 └ バグノート(1) 1章:jQuery入門 ├ jQueryのメリット ├ readyイベント ├ オブジェクトについて ├ メソッドについて ├ 情報の取得 ├ イベント(1) ├ イベント(2) └ 初歩なサンプル 2章:jQuery基礎 ├ thisについて(1) ├ thisについて(2) ├ jQueryとDOM要素 ├ 簡単な演出 ├ thisから辿る ├ 汎用的なアニメ(1) ├ 汎用的なアニメ(2) ├ アニメの停止 ├ アニメを管理する仕組み └ 汎用的なアニメ(3) 3章:jQuery発展 ├ イベントフロー(1) ├ イベントフロー(2) ├ イベントフロー(3) ├ 画像のプリロード ├ jQueryの高速化 └ メソッドチェーン 番外編:研究 ├ イベントを外す ├ cssアニメとの連携(1) ├ cssアニメとの連携(2) ├ css

    jQuery入門講座 使い方-jQueryの高速化
    kjtec
    kjtec 2017/01/10
    パフォーマンス
  • ふじこのプログラミング奮闘記

    jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」についてTweet どうも(o´ω`o)ノ 今年もあと10週間ですねー。 今日はjQueryの、イベントのバブリングについてです。 バブリングの「バブル」は泡です。たぶん。 jQueryはHTMLで書かれた要素(DOM)を、以下のようにツリー形式で持っています。 そして、一番下のA要素をクリックすると、それが一番親のwindowまで伝わります。 これがイベントのバブリング(「伝達」とでも言うのかな)です。 クリックイベントは、例え自分がクリックされていなくても、子孫要素がクリックされれば発動します。 イベントは子供から順番に起きます。 よくAタグの「href="#"」を無効にするために、Aタグのクリックイベントの最後で 「return false;

    kjtec
    kjtec 2016/11/30
    バブリング
  • jQuery リファレンス:stopImmediatePropagation

    索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core:コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors:セレクタ └ 目次 基礎 ├ *(すべて) ├ element(html要素) ├ #id名(ID属性) ├ .class名(clas属性) ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >(子要素) ├ +(直近の後要素) └ ~(後要素) 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├

    jQuery リファレンス:stopImmediatePropagation
    kjtec
    kjtec 2016/11/30
    バブリング
  • jQuery のバブリング、preventDefault() や stopPropagation() の使用例 | Tips Note by TAM

    2014.06.16 jQuery のバブリング、preventDefault() や stopPropagation() の使用例 jQuery のイベントのバブリング (伝播) については下記のサイトがほんとに分かりやすくて、読んでいただければもうあらためて書くことはないのですが、 jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について (ふじこのプログラミング奮闘記 3行でまとめると、 クリックなどのイベントは、子要素から親要素へと伝播される(バブリング) preventDefault() は、その要素のイベントをキャンセルし、stopPropagation()は、親要素への伝播をキャンセルする。 return false; を使うと、その要素のイベントも親要素への伝播も両方キャンセルす

    jQuery のバブリング、preventDefault() や stopPropagation() の使用例 | Tips Note by TAM
    kjtec
    kjtec 2016/11/30
    何をやっても伝播してしまい積んでる…
  • JavaScript における 日本語入力 確定 (Enter) イベント

    JavaScript日本語入力 ON のときと OFF のときとで 確定入力 (Enterキー入力) を判別する方法についてまとめます。 検索ボックスなどのテキスト入力ボックスにおいて確定ボタンの組み合わせた UI を設計するとき、入力を簡易にするために Enterキー で確定を意味させたいと思うことがあります。 …が、日本語入力の Enter と 確定を意味する Enter をどのように判別すると良いか材料がないので、 ここではいくつかのブラウザでイベントがどのように発生しているかを調査しました。 実際に使えるようにした jQuery プラグイン は こちら に記載しています。 目次 各ブラウザの挙動 確定入力の判別方法 各ブラウザの挙動 日本語入力ON および OFF それぞれの状態で [a] → [Enter] と入力したときの動作の違いを以下にまとめます。 以下の表では、「数

    kjtec
    kjtec 2016/11/25
    キーイベント
  • 初心者向けのjQuery入門講座

    使い方 まず最初にチェックするコンテンツです。どのような考えをもとにプログラムを組み立てていくか、設計力を学びます。 サンプル 使い方で学んだことを生かして、簡単なサンプルの作成を学んでいきます。 プラグイン jQueryで利用できる便利なプラグインを紹介していきます。 リファレンス jQueryのリファレンスです。辞書代わりにご利用ください。 使用例 企業サイトでのjQueryの使用例を紹介していきます。 始めに jQueryはデザイナーにも利用しやすいjavaScriptプラグインです。このサイトはhtmlcssを充分に理解しており、さらに基礎的なjavaScriptをマスターしている方を対象に記事を書いています。 現在はスマートフォン用のゲーム制作に注力しているため、サイトの更新は休止状態(2014年3月が最終更新)です。ゲーム制作に関するブログ:スマゲー作るよ!はほぼ毎日更新し

    初心者向けのjQuery入門講座
    kjtec
    kjtec 2016/11/18
    頭から読みたい
  • 1