http://cosao.net/archives/5524
いよいよ正式版が登場！ jQuery 3での変更点と前バージョンからの移行のポイント
何が変わったか（概要） jQuery 3.0では、非推奨としていたAPIやドキュメントになかったAPIを削除したり、全体的にAPIを整理してバグを修正しています。また一部のAPIでは、大きな仕様変更があります。既存のコードを動作させる場合には注意が必要ですので、まず移行プラグインをバージョンアップ対応ツールとして使って、影響具合を確認することをお勧めします。 なお、jQuery 3.0での特に大きな変更点は、次のとおりです。 バージョンの1本化 Deferred機能が「Promises/A+」仕様に準拠 非推奨のload、unload、errorを削除して、onメソッドに統一 カスタムセレクタの高速化 既存コードからの移行 既存のコードを移行できるように、Ver3用移行プラグインがリリースされています。このプラグインでは、影響のあるコードに対して警告がブラウザのコンソールに表示されますので
非依存型で軽量、機能的なJavaScript製のモダンオーディオライブラリ・「howler.js」
howler.jsは非依存型のバニラなJavaScriptオーディオライブラリです。クロスプラットフォームで動作、多様なコーデックのサポート、オーディオのスプライトとコントロール、オートキャッシュによるパフォーマンスの向上などが主な特徴との事。軽量で扱いやすそうです。ライセンスはMIT。ドキュメントはGithubでご確認下さい。 howler.jsOn Github
チェックボックスで制限された数以上のチェックをされた際にアラートを表示させる
Result チェックボックスの数を制限する時に。 jQuery$("input[name='tech']").change(function () { //チェックボックスの最大数を設定 var maxAllowed = 2; //チェックされた数をチェック var cnt = $("input[name='tech']:checked").length; if (cnt > maxAllowed) { $(this).prop("checked", ""); 設定した数より多くチェックが付けられる場合にアラート表示 alert('' + maxAllowed + 'つ以上は選べません！'); } });viaHow to limit the number of selected checkboxes?
文字数・単語数をリアルタイムにチェックできるjQueryプラグイン:phpspot開発日誌
jQuery word and Character Counter Plugin 文字数・単語数をリアルタイムにチェックできるjQueryプラグイン textareaにテキストを入力中に文字数のカウントをリアルタイムにチェックできます。 使い方は次のように簡単に使えます 関連エントリ 範囲指定のUI実装jQueryプラグイン「range-picker」 フォームの送信をAjax化できるjQueryプラグイン「Submitter」 カスタマイズ性の高いレーティング用jQueryプラグイン「Rateit.js」 簡単なTODOリストウィジェットをサイトに組み込めるjQueryプラグイン「Lobilist」
画像内にテキストや図形を合成できるjQueryプラグイン「naver/ImageMaps」:phpspot開発日誌
GitHub - naver/ImageMaps: jquery plugin which can be partially linked to the image 画像内にテキストや図形を合成できるjQueryプラグイン「naver/ImageMaps」 地図等にピンを立てたり、説明文を入れたりと、ブラウザ上で画像を作ることができます。 画像の合成をブラウザ上で実施したい場合等に使えそうです 関連エントリ 画像の読み込み順序を指定できるJS「EagerImageLoader」 Mediumのような画像ズームエフェクトが実装できる「enhance.js」 画像の特定部分をどんどんズームできる「jfMagnify」 画像の特徴色をJSで抽出できる「Colorify.js」 HTMLをCanvasを使って画像に変換するjQueryサンプル
ポイントをプラス・マイナスするアニメーション実装「Jquery-levelup」:phpspot開発日誌
Jquery-levelup by pstrinkle ポイントをプラス・マイナスするアニメーション実装「Jquery-levelup」。 投票機能などの実装部分で使えそう。単に、数値をプラスするだけではなく、アニメーションすることで、よりポイントが加算された感が出ます 関連エントリ mo.jsを使って、いいね！アイコンをクールにアニメーションさせるデモ CSSで様々にアニメーションするハンバーガーアイコン実装「Hamburgers」 ボタンをモーダルに気持よくアニメーションさせつつ変形させるデモ オシャレなアニメーションで動作するスライドショー「Elastic Circle Slideshow」 Rebound.jsとCanvasを使った超カッコイイローディングアニメーション実装デモ
[JS]埋め込みはこれでOK！Google Mapも動画も音楽もコードもツイートも簡単に埋め込めるスクリプト -embed.js
Google Mapをはじめ、YouTube, Vimeo, Vine, TEDなどの動画、SpotifyやSoundCloudなどの音楽、GitHub, CodePen, JS Binなどのコードなど、さまざまなメディアをWebページに簡単に埋め込むことができるスクリプトを紹介します。 :heart:（ハート）や:smile:（スマイル）などの絵文字を使ったテキストを埋め込めます。 リンクを検出して、bit.ly, buff.ly などの短縮URLに置き換えます。 Twitterのツイートを埋め込みます。 YouTubeやVimeoの動画をAPIから取得して埋め込みます。 dailymotion, vine, TEDなどの動画共有サービスもサポート。 SpotifyやSoundCloudなどの音楽サービスもサポート。 HTML5プレイヤーにサポートされた音楽ファイル（.wav, .mp3
![[JS]埋め込みはこれでOK！Google Mapも動画も音楽もコードもツイートも簡単に埋め込めるスクリプト -embed.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/b29e845c6df328575d3756fb3316de2a165a7046/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016061401.png)
CSS初心者にも簡単に使える！スクロールに連動するさまざまなエフェクトを実装できるスクリプト -AOS
スクロールすると、コンテンツをふわっと表示させたり、パタリと回転させたり、ズームさせたり、軽快なアニメーションを使ったエフェクトを実装できるスクリプトを紹介します。 jQueryは不要で、非常に軽量のライブラリです。 実装は簡単で、外部ファイルを2行記述して、classを与えるだけ。
範囲指定のスライダーUIを簡単に実装できる「RangeTouch」:phpspot開発日誌
RangeTouch - A super tiny library to make input type='range' sliders work better on touch devices 範囲指定のスライダーUIを簡単に実装できる「RangeTouch」 次のようなタッチデバイスでも動作するようなフォームUIを input type="range" のように記述して実現できるようにする軽量なライブラリです 関連エントリ Bootstrapのパラメータ入力スライダー実装「bootstrap-slider」 レスポンシブで階層的なスライダーナビゲーション実装jQueryプラグイン「yohoho.slyder」 CSSアニメーションを使ったレスポンシブスライダー実装「Jcslider」
アップロードするファイルの名前、サイズ、コンテンツタイプを取得する
Result 選択したファイルの名前、サイズ、コンテンツタイプをリストにしてアップロード前に表示します。inputにmultiple入れてますので複数選択も可能です。 jQuery$("#foo").on('click', function () { $("#bar").empty(); var fp = $("#hoge"); var lg = fp[0] .files.length; var items = fp[0].files; var fragment = ""; if (lg > 0) { for (var i = 0; i < lg; i++) { var fileName = items[i].name; // ファイル名を取得 var fileSize = items[i].size; // ファイルサイズを取得 var fileType = items[i].type;
動的に背景イメージをジェネレートすることが出来る「GeoPattern」:phpspot開発日誌
GeoPattern 動的に背景イメージをジェネレートすることが出来る「GeoPattern」 SVGを使って綺麗なパターンを動的に背景に設定できるあたりが特徴。ユーザが超簡単に好きな背景イメージを文字から作れるというところで、どこかで使えそうなライブラリですね 関連エントリ HTML5動画を背景にできるjQueryプラグイン「vidbg.js」 背景画像をマウス位置と連動して遠近感を出せるjQueryプラグイン「jQuery Interactive BG」 3Dのクールな線形アニメーションをブロックの背景にするjs 背景に複数種類のビジュアルエフェクトを設定できるjQueryプラグイン「quietflow.js」 自動でCSS背景画像をスクロールさせるjQueryプラグイン「jQuery.BackgroundScroll.js」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ショートコードで任意の記事ページに関連記事を出す
JSONデータをHTMLフォームに変換し、更にJSONに戻せる「medea」:phpspot開発日誌
ピンチやスワイプ、タップなどのジェスチャーを検出するライブラリ・「zingtouch」
スプレッドシート風のテーブルウィジェット実装JS「Dynamic Table」:phpspot開発日誌
フォームのプレースホルダをアニメーションしてズラす「phAnimate」:phpspot開発日誌
HTML5動画をフルスクリーンバックグラウンドに簡単設定できる「BIDEO.JS」:phpspot開発日誌
[JS]コンテンツに応じたレスポンシブデザイン！要素の幅や高さや数に基づいてスタイルを定義できるスクリプト -EQCSS![[JS]コンテンツに応じたレスポンシブデザイン！要素の幅や高さや数に基づいてスタイルを定義できるスクリプト -EQCSS](https://cdn-ak-scissors.b.st-hatena.com/image/square/17cdfacd1e45aee2b86d8c20988b611f663292c4/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016061001.png)
タイプライター風エフェクトを実現するJS「TYPEWRITING」:phpspot開発日誌