iPhone / iPadなどでposition: fixedが利用できる「iScroll」
配布元：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公式のテンプレートplugin 「jQuery Templates」
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"
マウスオーバーでtwitterのユーザー情報を表示する「twttrFloatTip」
マウスオーバーで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」
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」
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 Curvy Corners」
アンチエイリアス付きの角丸が簡単に設定できる「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プラグイン「Switch stylesheets with jQuery」
スタイルシートを切り替える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
IE6で透過pngを表示する「DD_belatedPNG」
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ライブラリ「The Sexy Curls jQuery Plugin」
ページめくりを表現するJavaScriptライブラリ「The Sexy Curls jQuery Plugin」 Check Tweet 配布元：The Sexy Curls jQuery Plugin! ライセンス：MIT license. The Sexy Curls jQuery PluginはWEBページにページめくりの効果を追加するJavaScriptライブラリです。 利用方法 配布元よりダウンロードしたファイル群をhead要素などで読み込みます。 ファイル群にはjQueryとjQuery UI、turn.jsとturn.cssが含まれています。 <script type="text/javascript" src="jquery1.3min.js"></script> <script type="text/javascript" src="jqueryui.js"></scri
非常にきれいなアラートを表示する「jQuery Alert Dialogs」
非常にきれいなアラートを表示する「jQuery Alert Dialogs」 Check Tweet 配布元：jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements) ライセンス：GNU General Public License. 「jQuery Alert Dialogs」はjQueryで非常に美しいアラートやプロンプトを表示するJavaScriptライブラリです。 使い方 jquery.jsと配布元よりダウンロードしたjquery.alerts.jsとjquery.ui.draggable.js、jquery.alerts.cssをhead要素などで読み込みます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/ja
CSVをTable化するjQueryプラグイン「jquery.csv2table.js」
CSVをTable化するjQueryプラグイン「jquery.csv2table.js」 Check Tweet 配布元：csv2table ライセンス:不明 jquery.csv2table.jsはExcelなどで生成できるCSVファイルを読み込みtableとして表示する為のjQueryプラグインです。 このプラグインを利用して生成されたテーブルは項目ごとのソートなどにも対応しています。 使い方 まずはjQuery本体と配布元よりダウンロードした「jquery.csv2table.js」とhead要素などで読み込みます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.csv2table.js"></script> 次にbody要素内に任
複数のファイルをアップロードできる「jQuery Multiple File Upload Plugin」
複数のファイルをアップロードできる「jQuery Multiple File Upload Plugin」 Check Tweet 配布元：jQuery Multiple File Upload Plugin ライセンス：MIT License and the GPL License. 「jQuery Multiple File Upload Plugin」は一つのinput要素(file)で複数の画像アップロードを可能にするJavaScriptライブラリです。 jQuery Multiple File Upload Pluginの使い方 jQueryのファイルと、配布サイトよりダウンロードしてきたjquery.MultiFile.jsをhead要素などで読み込みます。 <script type="text/javascript" src="jquery.js"></script> <sc
水平方向のアコーディオンメニュー「horizontal accordion」
水平方向のアコーディオンメニュー「horizontal accordion」 Check Tweet 配布元：Horizontal JavaScript Accordion 1kb ライセンス：商用でも個人でも無料 horizontal accordionは水平方向のアコーディオンメニューを作成する為のJavaScriptライブラリです。 horizontal accordionの使い方 ダウンロードしたslidemenu.jsをhead要素などで読み込みます。 <script type="text/javascript" src="slidemenu.js"></script> アコーディオン部分はul要素とli要素でマークアップします。ul要素には任意のID属性を付けてください。 <ul id="任意のID"> <li><p>あいうえお</p></li> <li><p>かきくけこ</p
IE6でhover,active,focus擬似要素を使う為の「csshover」
IE6でhover,active,focus擬似要素を使う為の「csshover」 Check Tweet 配布元：whatever:hover ライセンス：LGPL IE6はa要素以外は:hoverや：active、：focusなどのダイナミック擬似クラスに対応していません。それを解決するのがcsshoverというJavaScriptライブラリです。 csshoverの使い方 配布元よりcsshoverの.htcファイルをダウンロードします。:hover と :activeに対応した1.4系、1.4系に:focusを追加した2.0系がありますので、利用したい擬似クラスに合わせてダウンロードしてきてください。 ダウンロードしたファイルはスタイルシート内でbody要素に対して読み込みます。 body{ behavior:url("csshover2.htc"); } .htcファイルのパスは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
