紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Loupe 画像の一部を拡大します、多彩なオプションが便利。 Slicebox 画像をダイナミックに3Dスライスするギャラリー。 E
jQueryのプラグイン33+1選 -2011年9月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Loupe 画像の一部を拡大します、多彩なオプションが便利。 Slicebox 画像をダイナミックに3Dスライスするギャラリー。 E
リッチなオートコンプリートを実装できるjQueryプラグイン「ComboGrid」:phpspot開発日誌
jQuery ComboGrid Plugin リッチなオートコンプリートを実装できるjQueryプラグイン「ComboGrid」。 input type="text" に文字を入れて、候補が表示されたりするオートコンプリートがありますが、そのオートコンプリートをグリッドにしてリッチにし、よりヒントを多くすることでユーザビリティを上げるような使い方が可能。 表データがあって、その中から選んでもらいたいようなケースに使えそうですね。 中身のデータは当然ですがAjaxで読み込んで表示しています。 基本的には $(element).combogrid(options); というので利用が可能です。 サンプルコードは以下。 関連エントリ クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」
Mozilla 勉強会で ECMAScript 6 の WeakMap について LT しました - mooz deceives you
2011/10/01 に開催された Mozilla 勉強会＠東京 6th で WeakMap について LT を行わせて頂きました．発表資料，メタ的な説明，勉強会の感想，そして Firefox Hacks Rebooted の説明を記します． 発表資料 説明 ECMAScript 6*1 に導入される予定の機能に WeakMap というものがあります．これは平たく言うと「連想配列」で，ようやく ECMAScript にもまともな連想配列*2が導入されて喜びもひとしおな方も多いことでしょう． その WeakMap ですが，以前 Proxy を先走って実装してくれた Mozilla が再び先走って実装を行なっています．結果として Firefox 6 からこの WeakMap は利用可能となりました． 今回は 5 分間の LT ということで仔細な話は無理と判断し，抑えておくべき WeakMap
最近リリースされたjQueryプラグイン集「40 New jQuery Plugins」
軽量で様々なクリエイティブに役立つ、javascriptプラグインjQuery。最近では様々なWEBサイトに利用されていますが、今日紹介するのは最近リリースされたjQueryプラグインを集めたエントリー「40 New jQuery Plugins」です。 Recurly.js フォーム関連から、パスワードチェッカー、ビデオ関係のプラグインなど様々なプラグインが集められています。 詳しくは以下 Cuepoint.js HTML5のビデオプレイヤーCuepointを指定できるプラグインです。 Shuffle Letters Effect 打ち込んだ文字をシャッフルしてランダムに表示してくれるjQuery。 Flexible Nav 固定のナビゲーションを表示させ、今自分の位置を表示させてくれるプラグイン。 その他にも様々なWEB上で便利なプラグインが集められています。自分の用途に近いものが見つ
フォーム周りのエレメントのデザインを見やすいインターフェースに変更できるjQueryプラグイン・jNiceItと、似たようなやつ何個か - かちびと.net
どこかで使いたいなと思ってメモ。フォーム で良く使うラジオボタンやチェックボックス などのデザインを割りと簡単に見やすいデザ インに変更できるjQueryプラグインです。 この手のプラグインは沢山あるので選択肢の 一つとして、ですが、個人的には使いやすい 印象でした。 昨日に続き、今日もフォームのスクリプト。今日はフォームデザインを変更できるやつです。IE6だけちょい崩れるけどそれ以外は共通したデザインに変更できます。 ラジオボタンとかチェックボックスを画像に置換するプラグインですかね。なので、デザインの変更は基本的に画像とCSSを少し変えるだけです。尚、画像の指定もcssで行います。 左が普通で、右がリア充ですね。シンプルでいい感じです。見た目がいいほうが愛されるんですねきっと。世知辛い世の中ですこと。 マークアップも特別なことはしなくて済むのも楽かも。デザインの変更は基本的に画像を変え
jQuery Mobileでサクッと作るスマートフォン向けWebアプリの基本 ─ ＠IT
大日本印刷 森川 裕美 2011/9/29 jQueryMobileを使って、スマートフォン向けのWebアプリケーションを手軽に作成する方法をおばかアプリを例に紹介します おばかアプリの開発にjQuery Mobileを使ってみました 先月8月20日に開催されました「第5回おばかアプリ選手権（見よ！ コレジャナーイアプリの数々を！）」にて、jQuery MobileとHTML5の要素を使用した、iPhoneのMobile Safariで動作するミニアプリiBooNを紹介させていただきました。本記事では、jQueryMobileを使って、お手軽にスマートフォン向けのWebアプリケーションを作成する方法をiBooNを例に紹介します。 iBooNは、iPhoneの傾きに応じて車の音が変わるミニアプリです。まず、Color Select画面から好きな色の車を選びます。ミニカーの画像が表示された画面
パーフェクトJavaScriptはガチ本。クソと言われる言語仕様をまとめあげた良書 - 三等兵
執筆した井上誠一郎氏ら共著者に敬服。お疲れさまでした。 パーフェクトJavaScript (PERFECT SERIES 4) 言語仕様のpart2(2〜7章)まで読みました。その後はパラパラっと流し読み。まずは言語仕様までの内容について雑感を述べます。 JSには既にサイ本と呼ばれるバイブルが存在しますが、サイ本は「仕様を淡々と解説している本」といった印象を持っています。対してパーフェクトJavaScriptは「仕様における用語を整理し、分かりやすくまとめて解説している本」といった印象でした。そして表紙がダサいです。ガラケーがのってます。サイ本に対してガラケー本といったところでしょうか。・・・って不名誉な名称だからやめとこうと思いましたが、パーフェクトJavaScriptと長いのでやっぱり使います。 対象読者 入門書ではないと「はじめに」で言い切っています。対象読者についてもそのページで言
文字を別の文字に切り替えながら超クールにアニメーションさせながら表示「Shuffle Letters Effect」:phpspot開発日誌
文字を別の文字に切り替えながら超クールにアニメーションさせながら表示「Shuffle Letters Effect」 2011年09月29日- Shuffle Letters Effect: a jQuery Plugin | Tutorialzine 文字を別の文字に切り替えながら超クールにアニメーションさせながら表示「Shuffle Letters Effect」。 Flashサイトなんかであったりするあのエフェクト。ちょっと言葉では説明しづらいんですが、別の文字からa,b,c という感じでアニメーションさせつつ切り替えながら本来表示すべき文字にするというモノです。 デモページ - ページ下部に文字を入れてEnterキー ド派手ってわけじゃないんですが、なんかカッコイイですよね。 タイトル文字なんかをアニメーションさせれば単なるテキストでもインパクトがあります。 次のようにコールするだ
WinRT の async/await コーディングがおもしろい(のでJavaScriptで真似してみた) - てっく煮ブログ
Windows 8 開発者プレビューでの開発を試していたところ、非同期プログラミングを簡単に書ける await キーワードが面白かったので紹介します。Windows 8 用に Metro アプリを開発する場合、WinRT(Windows Runtime)というフレームワークを使ってプログラミングします。WinRT では、UI 応答速度を上げるための工夫として、少しでも時間がかかる可能性のある処理は、非同期の API のみが提供されています。なんかめんどくさそうですよね。いえいえ、そんなことはありません。.NET 5 から導入される async/await キーワードでとても簡単に書けてしまいます。HelloWorld アプリケーションのサンプルたとえば、HelloWorld アプリケーションでは次のようなサンプルが紹介されています。 // UI を表示するページのコンストラクタ // UI
名前にカーソルを合わせた際にかっこ良くプロフィールを表示する例とそのjQueryプラグイン:phpspot開発日誌
Simple yet sexy hovercard with minimum CSS 名前にカーソルを合わせた際にかっこ良くプロフィールを表示する例とそのjQueryプラグイン 名前にカーソルを合わせると、名前のテキスト位置はそのままに次のようにプロフィールが浮かび上がるサンプルです。 ポップアップでもいいんですが、もとのテキストはそのままの位置というのがなかなかカッコイイのと技術的に面白いですね。 プロフィールが浮かび上がります。 マークアップとCSSが公開されていて、JSはjQueryを使って数行で実装されています。 ｊQueryプラグイン形式でも使うことができるみたいです 関連エントリ シンプルなツールチップ実装ができるjQueryプラグイン「mTip」 jQueryでツールチップ実装に迷ったらみるエントリ ページメニューにツールチップを表示して分かりやすくするjQueryチュートリ
グーグルから「JavaScriptは根本的な問題を抱えている」とのメモがリークか
グーグル社内で昨年の11月に関係者に送信されたとされるメモが公開されています。ただしグーグルは真偽について何もコメントしていません。 [Caja] Fwd: "Future of Javascript" doc from our internal "JavaScript Summit" last week - Mark S. Miller メモには、「JavaScriptは単なる言語の進化では修正できない根本的な問題を抱えている」とあります。同社は来月「Dart」と呼ばれる新言語を発表する予定で、このメモはその背景を説明したものではないかと推測されています。 内部メモはメールで送信されており、タイトルは「 "Future of Javascript" doc from our internal "JavaScript Summit"」。2010年11月16日付けです。非常に長いので、サマリ
つまづきがちなiPhoneコーディングのTips（JS多め） | バシャログ。
来月はキャプテン・アメリカ見るし、気が付いたら年中アメコミ映画を見ているminamiです。 来月にはまた大きな発表がいろいろありそうなiPhone界隈ですが、iPhoneサイトのコーディングをする際につまづいてきたポイントを挙げてみました。 [HTML] input type="file"は使えない 画像をアップするコンテンツだからフォームに input type="file" を・・・と考えがちですが、iPhone版のSafariでは使用不可です。 [HTML] <meta name="viewport" content="user-scalable=no">が効かない 最近ハマったポイントです。ユーザーに画面の拡大をさせなくすることができるviewportのuser-scalableプロパティですが、本体のアクセシビリティ設定で「ズーム機能」をオンにしているとバッチリ拡大できてしまいま
jQueryで背景画像をフルスクリーン表示してスライドショーに出来るやつ色々 - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 気が向いたのでメモ。背景に配置した 画像をフルスクリーンで表示して、更 にスライドショー化できるjQueryのプ ラグインとか。さほど数は無いですけ ど・・・使う可能性があるかもなので 備忘録的にまとめておきます。 タイトル考えるの結構面倒くさいので適当になってきました。語彙が中学生レベルですが気にしないで下さい。 さて、フルスクリーンにした背景をスライドに出来るjQueryいろいろです。ほぼ択一っちゃ択一なんですけど・・・ちょっと出来上がりすぎていじりにくいので他もチェックしたい、という事で調べたものを羅列しておきます。触ったこと無いのもあるのでその程度の記事という事で。 Supersized 定番の高機能プラグインです。IE6では動作しません。スマートフォンでも
[JS]追従するフロートパネルを一行のスクリプトで設置できる -Portamento
スクロール操作に追従して定位置に表示されるフロートパネルを簡単な記述で設置できるjQueryのプラグインを紹介します。 Portamento - easy slidingfloating panels in jQuery [ad#ad-2] Portamentoの実装 実装は非常に簡単です。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="portamento.js"></script> HTML フロートさせるパネルをdiv要素で実装します。 <div id="panel">パネル</div> JavaScript jQueryのセレクタでパネルを指定
JavaScriptを.NETバイトコードに変換するコンパイラー·Jurassic MOONGIFT
JurassicはJavaScriptを.NETに変換するコンパイラー。.NETバイトコードを生成する。 Jurassicは.NET製のオープンソース・ソフトウェア。ここ数年、JavaScriptのシェア拡大が活発だ。Webブラウザはもとよりnode.jsによるサーバサイド、TitaniumやPhoneGapによるiOSやAndroidへの進出など領域が広がっている。プログラマーにとっては一つの言語で様々な環境で動作するのは願ったりかなったりだろう。 実行例 次の領域はローカルOSでの実行と言えるかもしれない。Windowsでは元々JScriptという言語があったが、スクリプト言語とあって利用範囲は広くなかった。だがJurassicを使えばWindowsにおけるJavaScriptの可能性が飛躍的に高まりそうだ。 JurassicはJavaScript（正確にはECMAScript）の.N
Selenium2.x で Ajax なWebアプリケーションをテストしよう 〜 Facebook の自動あいさつ返答機能を実装 〜 - Yamashiro0217の日記
この記事では、Facebook のあいさつ(Poke)機能への返信を題材に、沢山たまるとウザい嬉しいあいさつを自動で返すスクリプトを書くことで、Selenium2.x の使い方、特に Ajax アプリをテストする方法について学べるようにする。 Ajax がからんだWebアプリケーションのエンドツーエンドの最近のテスト手法についてのまとめにもなっていると思う。 最初の3節ぐらいは「Seleniumとは〜」とか「テストってのはさー」とかゴタクをごたごた書いているので、Seleniumの実際のコード見た方がはえぇよ。って言う人はコードが出てくるまで記事を飛ばすと良い。 こんな記事を気合入れて書いて公開した当日に…FacebookのUIが変わって…作ってたスクリプト動かなくなってしまった…orz。俺が何かやったり買うと事件が起きるんや・・「なにか買うとその直後に安くなったり、新機種がでたりするとい
[JS]地味なフォームを簡単にかわいらしいデザインにする -Ideal Forms
画像を一切使用せず、既存のフォームをかわいらしいデザインに変更するjQueryのプラグインを紹介します。 チェックボックスのチェックも画像ではないですよ。 Ideal Forms デモ [ad#ad-2] Ideal Formsのデモ フォームの外観は画像は使用せずスタイルシートでデザインされているので、自分用のカラーに変更することも可能です。 デモでは、3つのスタイルが用意されています。 スタイル：Comix Ideal Formsの主な特徴 フォームに美しい外観を与える軽量（14Kb）のスクリプト。 カスタマイズも簡単で、非常に使いやすいです。 画像は必要なく、スタイルシートでデザインを適用しています。 [ad#ad-2] Ideal Formsの実装 ファイルのアップロード 以下の2つをフォルダごとアップロードします。 css/idealForms js/idealForms.js
画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」:phpspot開発日誌
Diapo | a free jQuery slideshow by Pixedelic 画像切替が超カッコいいスライドショーが実装できるjQueryプラグイン「Diapo」。 様々な切り替えエフェクトがあって、画像と共に動きも楽しむことができます。 キャプションのアニメーションもクールで、ボタンを設置できたりもします。 Youtube動画の埋め込みも可能です。 あとどうやっているのか不明ですが、Youtubeの動画なんかも次のようにスライドショーさせることができてます。 単に写真を配置するよりもこうしたものを使うほうがよりよく写真を見てもらうことができるのかも。 インデックスもついていて、カーソルを合わせるとツールチップでサムネイルが表示されるなどのこだわりも見られます。 関連エントリ 3D効果を使って迫力あるスライドショーを作れる「Slicebox」 迫力あるフルスクリーンの背景スライ
CSSでカーニング（文字詰め）等を可能にするJSライブラリ・kerning.js - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 3連休も今日で最後ですねー。今日は ゆっくり過ごす方も多そうですね。 さて、休みですし、ちょっとネタ的 なライブラリをご紹介。カーニング をCSSで出来るようにしたJSライブラ リです。 jQueryやmootoolsなどにも依存していないようです。これだけ聞くとかなり使えそうなんですけど。でも個人的にこういうチャレンジは称えたいので敬意を示すつもりで記事にします。 CSSで出来る、と言っても独自の記述法を加える事でテキストコンテンツでのカーニングを実現するタイプなので好みが分かれそうですね。 まだちょっとよく分かってないんですけど適当にデモ作ってみました。一応違いが分かるように少し大袈裟にしたつもりです。クオリティは無視です。 ※右上でjsのオン/オフが出来ます。
階層構造が作れるテーブルを実現できるjQueryプラグイン「treeTable」:phpspot開発日誌
jQuery treeTable Plugin Documentation 階層構造が作れるテーブルを実現できるjQueryプラグイン「treeTable」 次のようなエクスプローラ風の階層を持ったテーブルを作ることができます。 カラムも別れており、それぞれ情報を表示でき、階層の折りたたみもできます。 テーブルを決められたルールに従って定義したら、$(element).treeTable();として初期化するだけです。 シンプルですがなかなか使えそうです 関連エントリ ヘッダ固定の分かりやすいテーブルを簡単実装できるjQueryプラグイン「jQuery.FixedTable」 縦長テーブルをスクロール対応にするシンプルなjQueryプラグイン「Lightweight Scrollable Tables」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
