画面上で誰かがタイピングしているようにアニメーションできるjQueryプラグイン「jticker」:phpspot開発日誌
画面上で誰かがタイピングしているようにアニメーションできるjQueryプラグイン「jticker」 2011年11月01日- webdev.stephband.info | jticker 画面上で誰かがタイピングしているようにアニメーションできるjQueryプラグイン「jticker」 タイピングしているようにアニメーションさせて動きを作ることで利用者の注目を集められます。 文書を読んでもらいたい場合なんかにも効果があるかもしれません。 流れる様にテキストアニメーション。 複数の文書を続けてスライドショーっぽくすることも出来るみたいです。 これはなかなか使えそうですね 関連エントリ テキストをCSS3でぼやけさせてアニメーションできたりするjQueryプラグイン「TextBlur」 カスタマイズ可能なアニメーションスクロールが実現できるjQueryプラグイン「PageScroll」 テキ
サーバサイドJavaScriptとjQueryでスクレイピング
jQuery でスクレイピングできたらセレクタ使えるし便利かなーと思ったりしたんですが、Rhino と env-js を使うと超簡単にできたのでレポートしてみます。 Rhino と env-js って何ぞい？ Rhino ってのは Java で書かれた JavaScript エンジンです。Rhino を使うとコマンドラインから JavaScript を実行できます。 Rhino には DOM が無いので単体では jQuery を実行することはできませんが、env-js という DOM ライブラリを使用するとこの辺はクリアできます。 env-js の中に jQuery を使ったサンプルがいくつか入ってますので、Java とか JavaScript とか詳しい方はそちらを見てもらった方が早いと思います。 使ってみる まず env-js をビルドしないといけないのでその辺の手順から説明します。
jQueryプラグインのベストトレンド総まとめ2010*ホームページを作る人のネタ帳
もはやこの業界ではかなり浸透しつつあるjQuery。 今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。 １）3D表示プラグイン サンプルデモ 今年のトレンドと言えば3D。 というわけでこちら。まずはサンプルデモを確認。 触ってわかる通りですが、2枚の画像が3D表示されます。 呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;
再生ボタン等も変更できちゃうYoutube操作jQueryプラグイン「jQuery Youtube Player」:phpspot開発日誌
再生ボタン等も変更できちゃうYoutube操作jQueryプラグイン「jQuery Youtube Player」 2010年10月26日- jQuery Youtube Player 再生ボタン等も変更できちゃうYoutube操作jQueryプラグイン「jQuery Youtube Player」 このプラグインを使えば次のように、Youtubeの動画に独自の再生、動画送り、リピートボタン、ボリュームボタンの他、プレイリストを付けてリストから再生なんていうことができちゃいます。 YoutubeのコントロールはFlashの中にあるから無理と思っていましたがYoutubeのFlash側で対応したっぽいですね。（外部からJSでFlash内で公開された関数を操作してるようです） ↑プレイヤー下部のリストがプレイリスト。クリックで動画が切り替わります。 ↓現在再生中の秒数なんかも取れたりするようで
[JS]オーバーレイを使って、付加情報をかっこよく見せるjQueryのチュートリアル
オーバーレイを使って、付加情報をアニメーションでかっこよく見せるjQueryのチュートリアルを紹介します。 jQueryといえば、先週末に1.4.3にバージョンアップしましたね。 Annotation Overlay Effect with jQuery デモページ [ad#ad-2] 実装 HTML HTMLはクリーンでシンプルです。元画像（image_wrap）とオーバーレイ画像（zoom_overlay）をdiv要素で内包します。 <div class="portfolio"> <div class="portfolio_item"> <div class="image_wrap"> <img src="images/website1
写真を効果的に見せるjQueryプラグイン集「7 Awesome JQuery Photo Plugins for Developers」
TOP > WebDesign > 写真を効果的に見せるjQueryプラグイン集「7 Awesome JQuery Photo Plugins for Developers」 様々なサイトで利用されている高機能なjavascriptライブラリjQuery。扱いやすく多くのプラグインがでていることもあり、定番のライブラリとなっていますが、今日紹介するのはそのなかでも、写真を効果的に見せるjQueryプラグイン集「7 Awesome JQuery Photo Plugins for Developers」。 2.Thumbnails Navigation Gallery with JQuery – Demo CSSとjQueryを上手く使って、写真を効果的に見せることができるプラグインがあつめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
checkboxやradioボタンを個性的なデザインにできるjQueryプラグイン「ezMark」:phpspot開発日誌
ezMark jQuery Plugin - Stylize Checkbox and Radio Button Easily checkboxやradioボタンを個性的なデザインにできるjQueryプラグイン「ezMark」。 次のようなデザインにすることが可能です。CSSをカスタマイズしてiPhoneっぽくすることも出来ます $(element).ezMark() とするだけでスタイリングできるのはいいですね。 関連エントリ フォームのユーザビリティに貢献するjQueryプラグイン ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」 ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」 サイト内にTwitter投稿用のフォームを直接埋め込んでしまえるjQueryプラグイン「
どんなフォームにも使えるjQueryのフォームバリデーション exValidation :: 5509
jquery.validation.jsというフォームバリデーションプラグインを公開していますが、使える場面が割と限定されてしまうような作りだったので、より幅広く使えるようにexValidationという名前で新しいjQueryプラグインとして作り直しました。伴って仕様や使い方が異なる部分も多いので、ドキュメントとして書いておきます。ただし前半のバリデーションルール周りは同じエンジンを使ってるので、ほぼ同じです。ちなみにすごい長いです。。 ルールを割り当てる際のclass名がhogeからchkhogeに代わりました。アップデートして使う場合は注意してください。 サンプル1: エラーを右上に表示 サンプル2: エラーを下に表示 トピックス ダウンロード 使い方 1. JSファイルを読み込む 2. 基本バリデーションルール 3. select, checkbox、radio、複数項目の場合 4
[JS]jQueryを使用したプリロード（画像の先読み）用のスクリプト
ロールオーバーで画像を変更する際に使用するプリロード用のjQueryを使用したスクリプトを紹介します。 Preloading Images with jQuery and JavaScript ロールオーバー時に表示する画像をその都度ダウンロードして表示すると時間のギャップが生じます。その時間の遅れを避けるために、画像を事前にバックグラウンドで読み込みます。 JavaScript <textarea name="code" class="html" cols="60" rows="5"> (function($) { var cache = []; // Arguments are image paths relative to the current page. $.preLoadImages = function() { var args_len = arguments.length;
Amazonスタイルのアイテムスクローラー実装jQueryプラグイン:phpspot開発日誌
Plugins | jQuery Plugins Amazonスタイルのアイテムスクローラー実装jQueryプラグイン。 amazonでよく見る次のようなアイテムスクローラーをjQueryで簡単に実装できます。 <ul>でアイテムリストを定義しておいて、$(element).amazon_scroller({options}); のようにして簡単に初期化することが可能です。 ブログエントリの下部でのオススメ商品なんかの紹介に使えそうですね。 関連エントリ 画像を縦・横にゆっくりスライドさせたい場合に使えるjQueryプラグイン「PanoScroll」 カートが目立たず、いい感じにスライドしてくれるショッピングカートの仕組み コンテンツを滑らかにスライドさせるjQueryプラグイン
[JS]後発だけに一味違う高性能なツールチップのスクリプト -Poshy Tip
Poshy Tip - jQuery Plugin for Stylish Tooltips デモページ ツールチップのスクリプトは既に多くリリースされていますが、このスクリプトはかゆいところに手が届くような便利な機能が豊富に備わったものとなっています。 まず、一番の特徴となるのは、背景に画像を使用している点です。画像はサイズが1024x768pxの大きなもので、これによりツールチップの拡大縮小表示が可能となっています。 また、画像を変更することで、好みの背景に簡単に変更できます。
[JS]次々にボックスがアニメーションでスライドするナビゲーションを実装するチュートリアル
次々にボックスがスライドする三つのアニメーションを組み合わたナビゲーションを実装するチュートリアルを紹介します。 Slide Down Box Menu with jQuery and CSS3 デモページ デモではナビゲーションの各項目をマウスホバーすると、アニメーションでラベルが下にストンと落ち、サムネイル画像が拡大表示されます。更に、下位階層のある項目は左右にスライド表示されます。 実装は割とシンプルです。 ナビゲーションはリスト要素で配置されています。 HTML <textarea name="code" class="html" cols="60" rows="5"> <ul id="sdt_menu" class="sdt_menu"> <li> <a href="#"> <img src="images/1.jpg" alt=""/> <span class="sdt_act
画像やHTML、動画等何でもスライドできちゃウィジェット実装jQueryプラグイン「Sudo Slider」:phpspot開発日誌
画像やHTML、動画等何でもスライドできちゃウィジェット実装jQueryプラグイン「Sudo Slider」 2010年07月26日- Sudo Slider jQuery Plugin Demo#1 画像やHTML、動画等何でもスライドできちゃウィジェット実装jQueryプラグイン「Sudo Slider」。 簡単な定義でなんでもスライダーとして動作させちゃうことが出来ます。 <div>の中に<ul>リストで<li>内にコンテンツを並べるだけであとは順次スライドしてくれるようです。 あとはAjaxによるコンテンツ読み込みにも対応してるみたい 以下にサンプルをご紹介。 シンプルな画像スライダー ページ送りを追加した例 ページ送りは番号だけじゃなくて特定文字列の定義も可能 タブっぽいUIにすることも可能。コンテンツの高さは自動でアニメーションしながら調節されるようにしたりもできる 他にも色々
[JS]超軽量・超高性能のコンテンツスライダーのスクリプト -Sudo Slider
クロスブラウザ対応、各パネルのブックマークやスクリプトのオフ時も配慮されたアクセシブルで超軽量・超高性能のコンテンツスライダーのスクリプトを紹介します。 Sudo Slider jQuery Plugin デモページ Sudo Sliderの主な特長 リスト要素で簡単にスライダーを実装。 AJAXで画像やHTMLをロード。 スクリプトのオフ時でもコンテンツが可能。 マルチプルなスライダーにも対応。 標準的なスライドからフェードまで多彩な表示を用意。 各パネルへの直接リンクが可能（ブックマーク可）、ブラウザの「前へ」「次へ」をサポート。 パネル内は画像、テキスト、動画、フォームなどさまざまなHTMLコンテンツを表示可能。 自動再生でスライドショーも可能。 ループ再生も可能。 セットアップは簡単で、カスタマイズも簡単。 IE6+, Fx, Chrome, Safari, Opなど主要ブラウザの
クロスブラウザでのテキストエリア操作が便利になる「A-TOOLS」:phpspot開発日誌
Plugins | jQuery Plugins クロスブラウザでのテキストエリア操作が便利になる「A-TOOLS」。 A-TOOLSを使えば、textareaやinput type=text のクロスブラウザ操作が簡単にできます 選択中のテキストとテキスト開始位置、終了位置の取得 文字数の取得 テキストの置換 テキストの限界サイズを指定。文字サイズを超えた場合のコールバック関数が指定可能 キャレットの位置を調整 開始・終了位置指定で文字の選択が可能 デモページ textareaを使うような場合のユーザビリティ向上に応用することができそうですね。 １からクロスブラウザで作るとなると大変そうですが、これで簡単に実装できます。
色合いを選べるツールチップ実装jQueryプラグイン「Colortip」:phpspot開発日誌
Colortip ? a jQuery Tooltip Plugin ? Tutorialzine 色合いを選べるツールチップ実装jQueryプラグイン「Colortip」 デフォルトで６つのテーマを選択することが出来ます。 ツールチップ自体のデザインも次のようになかなかいい感じです。 ヒントに色分けで意味合いを持たせてより、分かりやすいヒントを付けられそうですね。 関連エントリ 画像なしで実現するCSS吹き出しツールチップ実装サンプル色々 画像付きのオシャレなツールチップを実装できるjQueryプラグイン「TinyTips」 スタイリッシュでカスタマイズ性のあるツールチップjQueryプラグイン「qTip」 CSSだけで実装するアイコン付きのセクシーなツールチップ作成チュートリアル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery.flickable - Demo
IDEA * IDEA
IDEA * IDEA
http://www.designwalker.com/2010/07/chart-tool.html
