タグ

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

タグの絞り込みを解除

JavaScriptとjqueryに関するyoshi_kanagawaのブックマーク (5)

  • 2014年総まとめ、jQueryのプラグインとスクリプト100選

    毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ

    2014年総まとめ、jQueryのプラグインとスクリプト100選
  • Rome

    Customizable date (and time) picker. Opt-in UI, no jQuery! Works just fine with initial values! <input id='input' class='input' value='2014-12-15 21:00' /> <input id='inputTwo' class='input' /> rome(input); rome(inputTwo, { initialValue: '2014-12-08 08:36' });

  • 非同期通信中に「Now Loading」アニメーションを表示する方法 - abe-tatsuya.com

    jQueryを使った非同期通信(Ajax)処理中に、待機状態を示す「Now Loading」アニメーションを表示させる方法を解説します。シンプルなコードで、通信中にユーザーへ視覚的なフィードバックを提供できるため、利便性が向上します。 jQuery で非同期通信処理をしている間に「Now Loading」的なアニメーション画像を表示する、というのはよくあるパターンですが、その方法の解説です。 ローディング中の画像を表示するスクリプト 例えば、以下のような html の id="message" の内容を Ajax によって変更したい場合。 <p id="message">ここのメッセージが非同期通信後に変更されます。</p> <form method="GET" action="#"> <input type="button" value="ここをクリックでメッセージ変更" onclick

    非同期通信中に「Now Loading」アニメーションを表示する方法 - abe-tatsuya.com
  • Thickboxの使い方 – 画像やHTMLのポップアップをお手軽に!|クロノドライブ

    ThickBoxとはjQueryを使用したAjaxライブラリの一つで、主に画像をページ上に大きく表示させるときに使われます。また、画像だけではなくHTMLファイルも表示することが出来るため、これ一つで画像とHTMLをポップアップ表示(正確には同じページ上にオーバーレイ表示される)させることができます。 ◆サンプル このライブラリの便利なところは、小難しい設定をしなくても使えることや、ポップアップした画像を自動的にブラウザに収まるサイズに縮小してくれるところです。 ※HTMLを表示する場合にはサイズを指定する必要があります。 使ってみたい!と思った方のために使い方の手順を下記にまとめました。 必要なデータを揃える まずは、配布元であるThickBox3.1に行き、Downloadから下記ファイルをダウンロードしましょう。 ファイル名 thickbox.js thickbox.css load

    Thickboxの使い方 – 画像やHTMLのポップアップをお手軽に!|クロノドライブ
  • 画像上でクリックした位置を取得する。 - ゆうじろう日誌

    どうしてもこんな事って忘れてしまうので、メモモメメモモメ。 HTMLにはこう書きます。 <script type="text/javascript" src="js/jquery1.4.4.js" ></script> <script type="text/javascript" src="js/jquery.dimensions.min.js" ></script> <img id="hoge" src="hoge-img-url" onclick="getXY(event)" /> x:<span id="pos_x">0</span> y:<span id="pos_y">0</span> javascriptはこう書きます。 function getXY(e) { x = e.pageX - $("#hoge").offset()["left"]; y = e.pageY - $(

    画像上でクリックした位置を取得する。 - ゆうじろう日誌
  • 1