CSSスプライトでMac OS X Lion 風のアイコンを使える「Lion Buttons in CSS」 | Web活メモ帳Macの新OS Lionがリリースされてから暫く立ちますが、 Lion風UIをCSSスプライトで使えるようにした方がいましたのでご紹介。 以下のようなボタンが簡単に使えるようになります。 HTMLもシンプルな構造でclassを指定するだけで使えます。 Label Mac風のデザインにしたい際に良いですね。 詳細&ダウンロードは下のリンクからどうぞ。
吹出し型ツールチップを自由に設置できるjQueryプラグイン「grumble.js」 | Web活メモ帳
これを使うと、漫画風の吹き出しを自由に表示する事が出来るようになります。 吹出しには背景画像が指定されているので、 CSSを変更してオリジナルの吹出しにする事も簡単そうでした。 使い方 以下のようなスクリプトを追加する事で表示する事ができました。 $('h1').grumble({ text: 'ここにメッセージを入れます!', angle: 85, distance: 100, showAfter: 500 }); オプションの説明 text:表示する文章 angle:角度 distance:距離 showAfter:指定した秒数後に表示（ミリ秒） オプショには他にもコールバック処理なんかもありました。 詳細&ダウンロードは下のリンクからどうぞ！
[JS]CSVを読み込んでJSONに変換してくれるライブラリ「csonv.js」 | Web活メモ帳
ajaxを使用してデータベースの情報を表示する仕組みは一般的になってきたと言ってもいいと思いますが、 そこまで手をかけたくない小規模の案件も多いですよね。 そんな時に使えそうなのが、CSVをJSONに変換してくれるJavaScriptライブラリ「csonv.js」です。 CSVデータさえアップロードしてもらえば、常に最新の情報を表示する事ができるようになりますよ。 CSVの形式 CSVの作り方には制約があり、最初の行はキー名にする必要があるようです。 データは2行目以降でなければいけないようですね。 文字列の中に,(カンマ)を使いたい場合には、;（セミコロン）区切りでもOKなようです。 使い方 使い方はいたって簡単でCSVのパスを指定するだけです。 var members = Csonv.fetch("path/to/csv/family.csv"); var result = JSON.
Googleのサイト内検索をjQueryでかっこ良くする方法 | Web活メモ帳
PHPやjQueryのチュートリアルを毎日紹介しているTutorialzineというサイトから、Googleのサイト内検索をjQueryでかっこ良くする方法が掲載されていたのでご紹介します。 Google AJAX Search APIを使用して、独自のデザインで検索結果を表示していますよ。 サンプルもあるので、検索対象のURLを自分のサイトにするだけで簡単に設置できるようになっています。 検索フォーム ↑検索フォームはHTML5で作られています。 右下のアイコンで画像検索や動画検索が切り替えられます。かわいいですね。 ↑検索結果の様子 デモではGoogleのロゴが表示されていませんが、実際に使用する際にはロゴの掲載は必要かと思います。 詳細&使ってみたい方は下のリンクからどうぞ。
スマートフォンサイト用に、フリック・スワイプ対応が簡単に出来るjQueryプラグインいろいろ | Web活メモ帳
最近スマートフォン対応やタブレット対応の案件が増えてきて、スワイプに対応させたいと言われる事が結構多いです。 知ってる人も居るかもしれませんが、スワイプが出来るようになるjQueryプラグインをまとめてみました。 画像ギャラリー専用のものから、ページ全体をスワイプで区切るものまで色々ありますよ。 参考になれば幸いです。 jQuery Touchwipe iPhone、iPad、Android用にスワイプでスライドショーを移動できます。 スワイプした時のイベントが簡単に取得できるので、画像切替意外にも色々使えそう。 PCの場合には、アンカーテキストで画像の切替ができます。 サイズも1kB程度なので、モバイル端末に優しいですね。 PhotoSwipe jQuery Mobile対応の全画面イメージギャラリー。 写真を大きく表示させて、ツールバーで操作するタイプです。 jquery.flicks
WordPressでCMSを作るなら絶対に覚えておきたいプラグインいろいろ | Web活メモ帳
WordPressでサイトを作る際に毎回入れるプラグインを人に教える機会があったのでブログでもご紹介します。 新しくブログを作る時や仕事でカスタマイズする際に参考にしてもらえれば幸いです。 全てのサイトで必ず導入するプラグイン このサイトでも使っていますし、クライアントのサイトを作る際にも毎回導入しています。 セキュリティ関係やSEO対策プラグインが主なものですよ。 All in One SEO Pack サイト全体、個別記事、ページ毎にタイトル、description、キーワードの設定などが出来るようになります。 SEOに必要な最低限の機能はカバーされていますので、マストなプラグインですね。 Akismet スパム対策のプラグイン。 オンラインサーバでコメントの内容をチェックするスパム対策サービスです。 標準でインストールされているので、管理画面から有効化してAPIキーを入力するだけでO
自動補完が簡単に出来るタグ入力用jQueryプラグイン「Tagedit」 | Web活メモ帳
いつか使いそうなのでエントリー。jQueryを使ってタグを入力するためのプラグインです。 オートコンプリート機能もあるし、カンマで次のタグをどんどん入力できるようになっていてかなり便利そうでした。 使ってみた様子 ↑オートコンプリートの様子 ↑ダブルクリックで編集モードになり、保存とキャンセルボタンが表示されます。 使い方 使い方もシンプルで、オートコンプリートのデータを取得するURLを指定するだけでOKです。 $( "#tagform-full" ).find('input.tag').tagedit({ autocompleteURL: 'server/autocomplete.php', }); 使い勝手が良さそうですね。 詳細＆ダウンロードは以下からどうぞ。
わずか30KBで出来た軽量のWYSIWYGエディタ「NicEdit」 | Web活メモ帳
WordPressなどで使われているTinyMCEは高機能な分、かなり大きなファイル構成になっているため、どうしても容量が大きくなりがちだ。 しかし、本日紹介する「NicEdit」をすれば、わずか30KBの1つのファイルで WYSIWYGの実装が可能だ。 使い方 実装するには、以下の２行を追加するだけでOKだ。 <script src="nicEdit-latest.js" type="text/javascript"></script> <script type="text/javascript"> bkLib.onDomLoaded(nicEditors.allTextAreas); </script> これで、ページ内にあるテキストエリアが自動的にWYSIWYGエディタに様変わりする。 ↑実装した様子 必要最低限の機能で良い場合に十分使えるシステムだ。 公式サイトにはデモがあるので、
[jQuery]キーボードで動かす全画面スライドショー作成プラグイン「Jquery.ascensor.js」 | Web活メモ帳
キーボードで動かす全画面スライドショーが作れるjQueryプラグイン「Jquery.ascensor.js」が良さそうだったのでご紹介。 マップを作成して、次のページの座標を指定する作りになっています。 プレゼンを作る際に、便利そう。 ブラウザ上でスムーズにとスワイプされるのは見ていて気持ちいいです。 動作デモ 使い方 jQueryとscrollToプラグイン、Ascensorプラグインの３つを読み込みます。 <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.scrollTo.js" type="text/javascript"></script> <script src="jquery.ascensor.js" type="text/javascript"></script>
![[jQuery]キーボードで動かす全画面スライドショー作成プラグイン「Jquery.ascensor.js」 | Web活メモ帳](https://cdn-ak-scissors.b.st-hatena.com/image/square/9cab68b7cca39e5e90fe43545c147e12cb37adb3/height=288;version=1;width=512/https%3A%2F%2Fblog.verygoodtown.com%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F05%2F20110523-02.jpg)
容量が大きいページを開く際にプリローダーを表示するJavaScript「QueryLoader」 | Web活メモ帳
容量が大きいページを開く際にプリローダーを表示するJavaScript「QueryLoader」をご紹介。 大きな画像ファイルがたくさんある場合や、プログラムから動的に画像出力する際など、表示に時間がかかる際に使えるスクリプトになっています。
Gmail風にドラッグ&ドロップでファイルアップロードが出来るjQueryプラグイン「jQuery HTML5 Uploader」 | Web活メモ帳
Gmail風にドラッグ&ドロップでファイルアップロードが出来るjQueryプラグイン「jQuery HTML5 Uploader」が良さそうだったのでご紹介。 HTML5対応ブラウザであれば、ローカルにあるファイルをドラッグするだけでアップロード出来るようになります。 ドラッグ時には複数ファイルを指定できるので、よく添付ファイルを送信するフォームにはおすすめの機能です。 ↑デモの様子。破れた穴の画像にドラッグするとアップされます。 ファイルアップロード中には個々のファイルごとにプログレスバーによる進捗表示も可能です。 使い方 使用するにはライブラリを読み込んで、ファイル送信先のURLを指定すれば良いようです。 ■ JSの読み込み <script type="text/javascript" src="jquery.min.js"></script> <script type="text/j
テーブルを使ったいろいろなjQueryプラグイン26個まとめ | Web活メモ帳
料金表や一覧を表示する際に欠かせないテーブルコーディングで、検索や並び替え、ページング、グラフ表示など色々なものがあったので、探しやすいようにjQueryプラグインをまとめてみました！ jQuery Visualize HTML5とjQueryを使ってテーブルの値をグラフで表示する事が出来ます。 jquery.csv2table.js エクセルなどで作ったCSVファイルを読み込み、クロスブラウザなテーブル表示を行うjQueryプラグイン。 行の絞り込みや文字列検索などかなり高機能になっています。 jExpand 表、画像、リスト、図やその他の要素を折りたたみ表示する事ができます。 Fixed Header Tables ヘッダーを固定して表示します。Excelでは良く使いますね。 縦に長い表を使う場合に非常に便利です。 treeTable テーブルの中にツリー構造を実装できます。 Flex
RSSをパースするjQueryプラグイン「PaRSS」 | Web活メモ帳
「PaRSS」はRSSフィードを取得して動的に表示してくれるプラグインです。 Webサイトとは別にブログを持っている方に良さそうですね。 使い方 HTML JavaScript $("#feed").PaRSS( "http://www.your-blog.com/feed", // feed url 5, // 取得するアイテムの数 (optional) "M jS g:i a", // 日付のフォーマット (optional) true // descriptions (optional) ); 日付のフォーマットはPHPで使える形式であればほぼ使用できるようです。 見た目の変更方法 RSSは<li>タグで出力されるようですが、項目毎にclassが割り振られているようで、CSSをカスタマイズするだけで見た目の変更が可能です。 出力されるHTML ・タイトルが囲まれるタグ ・日付が囲まれ
[JS]#以降のURLによって処理を振り分けるjQueryベースのフレームワーク「Sammy.js」 | Web活メモ帳
「Sammy.js」はURLによって処理を振り分ける事ができるJavaScriptの軽量フレームワークです。 #以降のアドレスを利用してURLルーティングを実装されており、 簡潔に記述することを目指したフレームワークとなっています。 RubyのSinatraというフレームワークにインスパイアされたみたいですね。 わずか16KBしかないのですが、外部ファイルの読み込みやリダイレクト処理などがサポートされており、手軽に使う事ができます。 使い方 jQueryを読み込んだ後に、sammy.jsを読み込みます。 <script src="jquery.js" type="text/javascript"></script> <script src="sammy.js" type="text/javascript"></script> URLに対して実行するアクションを設定します。 JavaScri
![[JS]#以降のURLによって処理を振り分けるjQueryベースのフレームワーク「Sammy.js」 | Web活メモ帳](https://cdn-ak-scissors.b.st-hatena.com/image/square/f4858e9a6def8689b8831d84f96198dfbacfae48/height=288;version=1;width=512/https%3A%2F%2Fblog.verygoodtown.com%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F04%2F20110427-01.jpg)
リッチなスライドショーが作れるjQueryプラグイン「Skitter」 | Web活メモ帳
アニメーションやエフェクトが非常に豊富で色々な見せ方ができるスライドショー作成用jQueryプラグイン「Skitter」が良さそうなのでご紹介。 キューブ、スライス、フェードなどアニメーションは全部で22タイプ表示可能で、各画像へのリンクをサムネイル表示にしたり数値で指定するなど、オプションも豊富になっています。 以下のような実装で使えるようです。 JavaScript $(function(){ $('.box_skitter_large').skitter(); }); HTML <div> <ul> <li> <a href="http://thiagosf.net"><img src="images/01.jpg" /></a> <div> <p>Label</p> </div> </li> <li> <a href="http://cakephp.org"><img src="i
ウインドウサイズによって読み込むCSSを自動で切り替えてくれる「Adapt.js」 | Web活メモ帳
ウインドウサイズによって横幅やカラム数を変更したい。 そんな時につかえるのが「Adapt.js」。 ブラウザの横幅をチェックして、読み込むCSSを切り替えてくれるJavaScriptライブラリだ。 使い方 ウインドウサイズと、読み込むCSSを指定するだけでOKです。 例えば、760px以下と、980px以下、1280以下でCSSを切り替える場合には、 以下のように指定します。 ・・・ range: [ '760px = mobile.css', '760px to 980px = 720.css', '980px to 1280px = 960.css', '1280px = fluid.css' ] ・・・ 最近はウインドウサイズに合わせて幅や高さをフレキシブルに広げる手法がたくさん使われているので、こういったライブラリを覚えておくと良さそうだ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無限にドラッグできるインターフェイスを作れるjQueryプラグイン「Infinite Drag」 | Web活メモ帳
jQueryだけでURLをパースするプラグイン「jQuery-URL-Parser」 | Web活メモ帳
CSSとjQueryでヨーロッパのクリッカブルマップを作ったすごいデモ | Web活メモ帳
jQueryでイージング処理が簡単に出来るプラグイン「jQuery.Easie.js」 | Web活メモ帳
