サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
デスク環境を整える
javascript.webcreativepark.net
配布元:jquery/jquery-color · GitHub ライセンス:MITライセンス jQueryのanimateメソッドは、top、bottomやmargin、padding、width、heightなどの数値を指定できるプロパティをしかアニメーションさせることはできませんが、jQuery Colorプラグインを読み込むことで色に関してもアニメーションで変化させることが可能になります。 利用方法 jQuery本体とダウンロードしたjquery.color-2.1.1.jsを読み込むことで、色に関してアニメーション指定が可能になります。 次のサンプルでは#d1がクリックされた際に#d1の色を赤から白にアニメーションして変更しています。 $("#d1").click(function(){ $(this).animate({ "backgroundColor":"#FFFFF" }
配布元jquery/jquery-migrate Github ライセンス:MITライセンス 「jquery-migrate」はjQuery 1.9.0で廃止になった様々な機能を保管するjQueryプラグインです。「jquery-migrate」で保管されているのは以下の機能。 jQuery.browser jQuery.fn.andSelf() jQuery.sub() jQuery.fn.toggle() (コールバック関数を順番に発生させるもの) hover擬似イベント(参考) jQuery.fn.error() ajaxStart, ajaxSend, ajaxSuccess, ajaxError, ajaxComplete, ajaxStop などがdocumentのみに設定可能に変更 Event オブジェクトのattrChange, attrName, relatedNode,
配布元:Response JS: mobile-first progressive enhancement in HTML5. ライセンス:MITライセンス 「Response JS」はレスポンシブウェブデザインの画像問題を解決するためのJavaScriptライブラリです。 レスポンシブウェブデザインではPCだけでなくiPhoneやAndroid、iPadなど複数の解像度、画面サイズ向けのデザインを1つのHTMLで提供します。そのため、スマートフォン向けのデザインなのにPC向けの画像が読み込まれてしまうことがあります。 「Response JS」を利用すると画面サイズごとに読み込む画像を選択できる為、無駄な画像リクエストの発生を抑えることが可能です。 Response JSの利用方法 まずはjQuery本体とダウンロードしたResponse JSのスクリプトファイルをhead要素内などで読
配布元:A Fix for the iOS Orientationchange Zoom Bug | Filament Group, Inc., Boston, MA 配布元:MIT License. iPhoneでは横向きにした際にViewportがzoomして拡大されてしまうバグ(仕様?)があります。対策としてよく利用される方法としては次のようにviewportにmaximum-scale=1を指定して拡大そのものを抑制する方法です。 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> しかしながらこの方法では指のピンチインピンチアウトによる拡大まで抑制してしまいます。 この問題を解決するのがiOS-Orientationchange-Fixです。GitHubからダウン
配布元:Modernizr ライセンス:MIT & BSD licenses. ModernizrはTwitterなどの大手サイトでも採用されているブラウザの機能の実装状況を調査するためのJavaScriptライブラリです。 たとえばModernizrを読み込んだサイトではhtml要素が次のように書き換えられます。 <html lang="ja" class="no-js"> ↓ <html lang="ja" class="js flexbox flexbox-legacy rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms c
配布元:CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transition Animate」[to-R] ライセンス:MITライセンス 「jQuery transition Animate」はCSS3のtransitionアニメーションを利用するためのjQueryプラグインです。jQueryではanimateメソッドがありますが負荷が高く、iPhone / iPad / Androidなどに搭載されているMobile Safariではスムーズに動かないこともあります。そういった際に利用できるのがこのライブラリです。 利用方法 記述方法はtransitionAnimateメソッドで指定しanimateメソッドと同じように記述します。 $(セレクタ).transitionAnimate(params, duration, easing, [callba
配布元:iScroll ライセンス:MIT-License iPhone / iPad、Androidなどに搭載されているmobile WebKitではCSSのposition: fixedが利用できませんが、iScrollを利用することでこれらのプロパティを利用したようにヘッダーやフッターの固定が可能になります。 利用方法 まずは、head要素内などで配布サイトよりダウンロードしたライブラリ本体を読み込みます。 <script src="iscroll.js"></script> HTMLでは次のようにコンテンツ部分をwrapperとscrollerというidをつけたdiv要素で包んでおきます。 <body> <header id="header">ヘッダー部分</header> <div id="wrapper"> <div id="scroller"> コンテンツ部分 </div>
ダブルタップイベントを利用可能にするjQueryプラグイン「jquery.event.dblTap.js」 Check Tweet 配布元:iPhone/iPadでダブルタップが利用できるjQueryプラグイン「jquery.event.dblTap.js」[to-R] ライセンス:MITライセンス 「jquery.event.dblTap.js」はiPhone/iPad、Androidなどのスマートフォンでダブルタップイベントが利用可能になるjQueryプラグインです。 利用方法 配布サイトよりダウンロードした「jquery.event.dblTap.js」をjQuery本体の後に読み込みます。 <script src="jquery-.min.js"></script> <script src="jquery.event.dblTap.js"></script> ダブルタップイベントを
Flashの読み込みを簡単にする「SWFObject」 Check Tweet 配布元 : swfobject – Project Hosting on Google Code ライセンス : MIT License SWFObject は Adobe の Flash コンテンツをWebページに簡単に取り込むことができるJavaScriptライブラリです。従来Flashコンテンツはobject要素やembed要素などを組み合わせて取り込まなくてはいけませんでしたが、SWFObjectを利用することでよりスマートにWebページを読み込むことが可能になりました。 利用方法 SWFObjectの読み込みは配布サイトで配布されているファイルを読み込んでもよいですが、Google Libraries APIなどのCDNを利用することでより簡単に読み込むことができます。 <script src="ht
jQuery公式のテンプレートplugin 「jQuery Templates」 Check Tweet 配布元:jquery’s jquery-tmpl at master – GitHub リファレンス:jQuery Templates jQueryプロジェクトからいくつかの公式プラグインが公開されました。そのひとつが「jQuery Templates」。これはJavaScriptで利用できるテンプレートエンジンです。 利用方法 本エントリー執筆時点ではGitHubからダウンロードして利用できますが、jQuery 1.5からはjQuery本体に組み込まれ、プラグインなしで利用することが出来ます。(本体への組み込みは延期されました)また、MicrosoftのCDNでも公開されていますので次のような記述で読み込むことも可能です。 <script type="text/javascript"
ページ内リンク用のスムーズナビゲーションを作成できる「jQuery One Page Navigation Plugin」 JavaScript Library Archive ページ内リンク用のスムーズナビゲーションを作成できる「jQuery One Page Navigation Plugin」 Check Tweet 配布元:jQuery One Page Navigation Plugin jQuery One Page Navigation Pluginはページ内リンクナビゲーションをスムーズスクロールに変換することが出来るJavaScriptライブラリです。jQuery ScrollTo plugin.を合わせて利用することで柔軟性の高いスクロールを実装しています。 利用方法 jQueryとQuery ScrollTo pluginそして、ダウンロードした「jquery.nav
ページめくりを実装するjQueryプラグイン「jPageFlipper 」 Check Tweet 配布元:jPageFlipper ライセンス:MIT License 「jPageFlipper 」は画像のページめくりを実装する為のjQueryプラグインです。 HTML 5 canvasで開発されておりGoogle Chrome 4以上, Firefox 3.5以上, Safari 4以上, Opera とiPhone、 IPadなどで動作可能です。 利用方法 まずは、jQuery本体とjquery-vsdoc.js、jquery.pageFlipper.jsをhead要素などで読み込みます。 <script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script> <script type="text/javascri
jQueryについての解説です
ソースコードをハイライト表示する「SyntaxHighlighter」 Check Tweet 配布元:SyntaxHighlighter – Alex Gorbatchev ライセンス:LGPL 3 SyntaxHighlighterはソースコードを簡単にハイライト表示することが可能なJavaScriptライブラリです。 JavaScriptやHTML、CSS、PHP、Python、Rubyなど様々な言語のシンタックスハイライトが可能です。 利用方法 配布元よりダウンロードしたSyntaxHighlighter.cssとshThemeDefault.css、shCore.jsをhead要素内で読み込みます。 <link type="text/css" rel="stylesheet" href="styles/shCore.css"/> <link type="text/css" rel
マウスオーバーでtwitterのユーザー情報を表示する「twttrFloatTip」 Check Tweet 配布元:TwitterのHover Cardを実装するjQueryプラグイン twttrFloatTip :: 5509(+1) ライセンス:MITライセンス twttrFloatTipは マウスオーバーでtwitterのユーザー情報を表示する為のjQueryプラグインです。 利用方法 まずは、jQuery本体と配布元よりダウンロードしたtwttrFloatTip.jsをhead要素などで読み込みます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="twttrFloatTip.js"></script> 次にtwttrFloatTip.cssも
cookieを簡単に取り扱う「jQuery Cookie」 Check Tweet 配布元:carhartl/jquery-cookie ライセンス:MITライセンス 「jQuery Cookie」はJavaScriptで取り扱いがめんどくさいcookieについて簡単に取り扱えるようにするためのjQueryプラグインです。 利用方法 まずは、jQuery本体と配布元よりダウンロードしたjquery.cookie.jsをhead要素などで読み込みます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> cookieに値を保存するには、次のように$.cookieに対してキーと保存する値を指定して保存します
jQuery でCSVデータを簡単に取り扱える「jQuery CSV」 Check Tweet 配布元:Plugins | jQuery Plugins | CSV ライセンス:Apache License, Version 2.0 jQuery CSVはjQuery でCSVデータを簡単に取り扱うことができるjQueryプラグインです。 利用方法 次にようにCSVデータに対して$.csv()(CSVデータ)を実行することでcsvデータを配列に変換することが出来ます。 var csv = $.csv()(CSVデータ) CSVデータは$.get()などのjQueryのAjaxメソッドを利用して取得します。 $.get('data.csv',function(data){ //Ajax後の処理 }) つまり、次のようなJavaScriptを実行することでCSVファイル(data.csv)のデ
簡単にフォームの入力チェックが行えるjquery.validate.js Check Tweet 配布元:bassistance.de » jQuery plugin: Validation ライセンス:MIT/GPL jquery.validate.jsは入力フォームのバリデーション(チェック)を簡単に実装することが出来るjQueryプラグインです。 利用方法 利用方法はまず、jQuery本体と配布元よりダウンロードしてきた「jquery.curvycorners.min.js」をhead要素などで読み込みます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.validate.min.js"></script> バリデーションを行いたい
jQueryでドロップシャドウを表現する「Drop Shadow Effect」 Check Tweet 配布元:Drop Shadow Effect ライセンス:public domain Drop Shadow Effectは簡単にドロップシャドウが表現できるjQueryプラグインです。 CSS3などでは以下のように指定するとテキストシャドウやボックスシャドウを実装することができます。(ボックスシャドウはwebkit系ブラウザでのみ閲覧可能) #text{ text-shadow:3px 3px 5px blue; } #box{ -webkit-box-shadow:3px 3px 5px blue; } サンプル1 Drop Shadow Effectを利用するとすべてのブラウザで同じような表現が可能になります。 $(function(){ $('#text span').drop
アンチエイリアス付きの角丸が簡単に設定できる「JQuery Curvy Corners」 Check Tweet 配布元:Anti-aliased Rounded corners with JQuery ライセンス:General Public License JQuery Curvy CornersはcurvyCornersのjQuery版とも言えるJavaScriptライブラリでアンチエイリアス付きの角丸を簡単に設定することが可能だ。 使い方 head要素内などで、jQuery本体と配布サイトよりダウンロードしたjquery.curvycorners.min.jsを読み込みます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.curv
要素に複数の背景画像を設定出来る「jQuery background_layers」 Check Tweet 配布元:jQuery background_layers ライセンス:free jquery background_layersはCSS3の「multiple background images」つまり、ひとつの要素に対して複数の背景画像を設定することが出来る機能をクロスブラウザで利用する為のjQueryプラグインです。 使い方 まずはhead要素などでjQuery本体と、配布サイトよりダウンロードしてきたjquery.background_layers.jsを読み込みます。 <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.
グラデーション表現するjQuery Gradient Check Tweet 配布元:Gradient ライセンス:MITとGPLのデュアルライセンス jQuery Gradientは要素などをグラーデーションを簡単に塗りつぶすことができるJavaScriptライブラリです。 利用方法 jQuery本体と配布サイトよりダウンロードしたjquery.gradient.min.jsをhead要素内などで読み込みます。 <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.gradient.min.js"></script> グラデーションの設定は次のように行います。 $(function(){ $(セレクター).gradient({ from
スタイルシートを切り替えるjQueryプラグイン「Switch stylesheets with jQuery」 Check Tweet 配布元:Switch stylesheets with jQuery ライセンス:クリエイティブコモンズAttribution, Share Alike License Switch stylesheets with jQueryはユーザー操作により簡単にスタイルシートを切り替えることができるjQueryプラグインだ。 クッキーにも対応している為、一度選択されたスタイルシートはこのライブラリが読み込まれているすべてのページで優先的に表示されるようになります。 使い方 変更したいスタイルシートをhead要素などで読み込みます。デフォルトのスタイルシート以外はrel属性をrel=”alternate stylesheet”としデフォルトのスタイルシートはre
クロスフェードでロールオーバーを行う「rollover2.js」 Check Tweet 配布元:クロスフェードするロールオーバー処理をお手軽に実装するJavaScript ライセンス:MIT License rollover2.jsはロールーオバー処理にクロスフェードを適応できるJavaScriptライブラリだ。 使い方 配布元よりダウンロードした「rollover2.js」をhead要素などで読み込みます。UTF-8以外の文字コードのサイトでこのライブラリを利用する際には「charset=”utf-8″」の記述を忘れずに行う必要がある。 <script type="text/javascript" src="rollover2.js" charset="utf-8"></script> 画像はデフォルトの画像を「bottonA_rollout.jpg」など拡張子の直前に「_rollou
IE以外でクリップボードにコピーが利用できる「ZeroClipboard」 Check Tweet 配布元:Zero Clipboard ライセンス:LGPL ZeroClipboardはIE以外のブラウザでクリップボードにコピーの機能が利用できるJavaScriptライブラリだ。 Flashの機能を利用しており、Flash Player10以上にも対応している。 使い方 ダウンロードしたZeroClipboard.jsをhead要素などで読み込みます。 <script type="text/javascript" src="ZeroClipboard.js"></script> 同梱されている「ZeroClipboard.swf」をサーバーにアップしておきscript要素で以下のように設定します。 window.onload = function(){ ZeroClipboard.set
非常に美しいLightBoxスクリプト「Sexy LightBox」 Check Tweet 配布元:Sexy LightBox ライセンス:MITライセンス Sexy LightBoxは非常に美しい動きをするLightBox系のJavaScriptライブラリだ。 ベースエンジンはMootoolsを利用するか、jQueryを利用するか選択できる為、現在利用しているライブラリに合わせて柔軟に利用することができる。 利用方法 mootoolsを利用する場合はmootools本体と配布サイトからダウンロードした「sexylightbox.v2.2.mootools.js」と「sexylightbox.css」をhead要素などで読み込む。配布ファイルに同梱されている「sexyimagesフォルダ」も利用したいファイルと同じ階層に配置しておこう。 <script type="text/javasc
select要素をプルダウンに拡張するjQuery.selectable.js Check Tweet 配布元:selectボックスをシンプルなプルダウンに拡張するjQuery.selectable.js ライセンス:MITライセンス select要素でセレクトボックスを作成した際に、情報量が多いと非常に選択肢が多く探すのが難しいことがある。都道府県を検索する際に多くの人が経験したことがあるだろう。 jQuery.selectable.jsはセレクトボックスをプルダウンメニューに変更し、簡単に検索できるように変更するJavaScriptライブラリだ。 使い方 jQueryと配布サイトよりダウンロードしたjquery.selectable.js、スキン用のCSSファイルをhead要素などで読み込みます。 <script type="text/javascript" src="../js/jq
角丸を簡単に表現する「 jQuery Canvas Rounded Corners」 Check Tweet 配布元:jQuery Canvas Rounded Corners ライセンス:GNU Lesser General Public License jQuery Canvas Rounded CornersはjQueryで簡単に角丸を実装するためのJavaScriptライブラリです。 Canvasで作成されているため、様々な表現が可能だ。 使い方 最新のjQueryファイルとダウンロードしたファイルに含まれる「jquery.corners.js」、「newExcanvas.js」をhead要素などで読み込みます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascrip
IE6で透過pngを表示する「DD_belatedPNG」 Check Tweet 配布元:Medicine for your IE6/PNG headache! ライセンス:MIT License. DD_belatedPNGはIE6で透過pngを表示するJavaScriptライブラリだ。background-positionやbackground-repeatなどのプロパティや:hover擬似クラスなどにも対応している。 その上、AlphaImageLoaderではなくVMLにより実装されている為、比較的早くに動作する。 使い方 ダウンロードしたDD_belatedPNGをhead要素などで読み込みます。その際に条件付コメントでIE6のみで読み込まれるようにしてください。 次にD_belatedPNG.fix(‘透過にしたい要素をCSSセレクタで指定’);といったJavaScriptを
次のページ
このページを最初にブックマークしてみませんか?
『JavaScript Library Archive』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く