サイトを魅力的にするjQuery10+ – creamu
cats who codeで、サイトを魅力的にするjQueryがいろいろ紹介されています。 いくつかご紹介。 Easy Display Switch with CSS and jQuery ボタンクリックでリスト表示とカラム表示を切り替えられる Turn any webform into a powerful wizard with jQuery 長くて退屈なフォームを、ウィザード形式でStep1〜3のように分けられる Beautiful tag clouds with jQuery and flir タグクラウドをかっこよく見せてくれる Twitter-like login panel using jQuery Twitterライクなログインパネル。↑のキャプチャはこちら Disappearing “Scroll to top” link with jQuery and CSS ページが
ユーザーエクスペリエンスを向上させるjQueryプラグイン7 – creamu
Shiny Blogで、ユーザーエクスペリエンスを向上させるjQueryプラグインが紹介されています。 いくつかご紹介しますね。 iconDock MacのDock風拡大エフェクト Simple Controls Gallery 自動でスライドするイメージギャラリー Flip! 画像をくるっと回転させるプラグイン Select-to-slider スライダーで日付を選択できるプラグイン Flip!とかスライダーでの日付選択が面白いですね。 その他のリストは以下からどうぞ。 7 jQuery Plugins to Really Enhance Users Experience Flashをいろいろと。楽しいですね。次はWPをやらないと。
jQueryを使って簡単実装！かなりカッコいいログインフォーム作成のチュートリアル:phpspot開発日誌
Making A Cool Login System With PHP, MySQL & jQuery ? Tutorialzine jQueryを使って簡単実装！かなりカッコいいログインフォーム作成のチュートリアル。 ページのヘッダーにあるログインボタンを押すと、ニュイーンとログインフォームが降りてくるというカッコいいログインフォームの実装演習になってます。 ログインボタンを押す ヘッダーからそのままログインフォームが降りてきてそこからログイン可能です。 ソースコードのダウンロードも可能です。 関連エントリ ログインフォームのデザイン集１００種 Twitter風のドロップダウンボックスなログインフォーム作成チュートリアル 超クールなログインフォームを作成するチュートリアル
何時何分何秒の入力を便利にするjQueryプラグイン「jTimepicker」:phpspot開発日誌
jTimepicker - Yet another jQuery time picker plugin. 何時何分何秒の入力を便利にするjQueryプラグイン「jTimepicker」。 時計のアイコンを押すと次のような水平バーが現れてスライドさせることで、selectボックスの値が増加・減少するUIです。 標準のselect は縦方向に長くなりがちですが、このUIであれば横にスライドさせて比較的簡単に時間の入力が出来ますね。 必要なJavaScriptとCSSを読み込んだら、$('#timepicker').jtimepicker(); で初期化することが出来ます。 関連エントリ jQueryを使ったカレンダー型、日付入力補完ライブラリ 日付の範囲を入力する際に便利に使えそうなjQueryのUIプラグイン
各種Webサービスに対応した埋め込みを行う·jQuery Oembed MOONGIFT
jQuery OembedはJavaScript製のオープンソース・ソフトウェア。おそらくYoutubeからはじまったであろう、自分のサイトへのコンテンツ埋め込みの機能。今や写真やプレゼンテーション、動画など様々な外部コンテンツがサイトに埋め込めるようになった。しかしここで問題なのが埋め込むコンテンツの内容が分かりづらいことだ。 各種サービスの埋め込みHTMLを生成する 大抵Flashのタグで囲まれており一般的には難解だ。Embedなどと書かれているがよく分かりづらい。そこで使ってみたいのがjQuery Oembedだ。jQuery Oembedはリンクタグにclass="oembed"を指定すると実行されるjQueryプラグインだ。 例えばFlickrの写真のリンクをURLにしてoembedの指定をすると、写真がサイト内に表示されるようになる。イメージタグを書く必要はない。同様にvime
スクロールのデザインするならコレが便利なjQueryプラグイン「jScrollPane」:phpspot開発日誌
jScrollPane スクロールのデザインするならコレが便利なjQueryプラグイン「jScrollPane」。 ちょっと前に話題になっていたような気がしますが便利なのでご紹介。 デザインサイトなどで、スクロールを使ってしまうとOSによって見栄えが変わってきてしまって全体のデザインを崩してしまいますが、このプラグインを使えばそういうこともなさそうですし、更に拡張された機能を使うことができます。以下にピックアップします。 デザイニング 次のような自由にデザインされたスクロール付きブロックを実装可能 プラットフォームに関わらずWinXPスタイルのスクロールバー実装 同様にMacOS Xみたいなスクロールバーも実装できます 拡張機能 さらに面白いのが、スクロール内でさらにスクロールさせるという機能。 スクロール要素をネストできます あと、スクローラー外部からの<A>タグをクリックで指定位置にス
【レポート】jQueryテストスイート「QUnit」がスタンドアロン化! 使い方を早速チェック (1) QUnitとは? | エンタープライズ | マイコミジャーナル
jQueryでユニットテストをおこなう - QUnitとは 高機能・軽量のJavaScriptフレームワークで、デベロッパにも人気の高いjQuery。そのjQueryをベースとしたテストスイートに「QUnit」がある。 QUnitはJohn Resig氏とJorn Zaefferer氏が中心となって開発をおこなっているユニットテスティングフレームワーク。デベロッパはQUnitを使うことで、jQueryを使ったJavaScriptコードを書くように、簡単にテストを記述できるようになる。同ライブラリはjQueryと同じく、The MIT LicenseとGNU GENERAL PUBLIC LICENSE Version 2のもとで公開されている。 去る9月29日(米国時間)、開発者であるJohn Resig氏はTwitter上で次の3点をアナウンスした。 QUnitはjQueryに依存した実
第1回 jQueryにふれる | gihyo.jp
はじめに ここ数年、JavaScriptライブラリを使ってサイトを製作するという機会がどんどん増えてきました。今まででであれば、JavaScriptのライブラリを使う・使わないに関わらず、その製作の多くはプログラマーの方が行っていたと思います。しかし近年、そのJavaScriptライブラリも種類が増えてきて、プログラミングの知識がなくても簡単に導入できるようなライブラリも出てきました。そのため、それらの使い手はプログラマーからWebデザイナーやマークアップエンジニア側へとシフトしつつしている部分もあります。 そんな数多くあるJavaScriptライブラリの中でも、Webデザイナーなどのプログラミング知識がない人でも比較的導入のしやすいのが『jQuery』です。このjQueryの魅力は、その使いやすさとプラグインの豊富さにあり、プラグインだけでも、すでに使ったことがあるという方も多いと思いま
jQuery時代に生きるクロスブラウザ対応の知恵 8選 : tech.kayac.com - KAYAC engineers' blog
Auto Copyが移植されたらchromeへの移行を検討します。agoです。 jQueryを使用するようになってクロスブラウザを意識することは少なくなりましたが、それでもjQueryではカバーしきれない差異はそれなりにあります。 そこでjQueryを使っていてもはまる可能性の高いクロスブラウザのtipsをご紹介したいと思います。 1 Objectリテラル内の末尾カンマ { 'key' : 'val', } 上記のコードはIE6でエラーが出ます。 o = { ‘key’ : ‘val’, }; この動作はjavascriptの仕様からするとIE6の動作が正しく、本来であれば末尾のカンマは記述できません。 これは他言語でJSONを扱う場合でもエラーになるので注意してください。 また、Arrayの場合、Fxは上記と同じく要素が存在しないものと認識しますが、IE6は未定義値が定義されていると解釈
連載：jQuery逆引きリファレンス 第1回 セレクタ編 － ＠IT
jQueryは近年、JavaScriptライブラリの中でも高い人気を持ち、急速に普及してきたライブラリです。jQuery自体はオープンソースで開発が進められるライブラリですが、2008年9月にマイクロソフトが正式サポートすることを表明したことから、今後は、ASP.NETの世界でも採用される機会が多くなってくると予想されます。本連載が、これからjQueryを利用される方の有用な資料となれば幸いです。 なお、本連載はリファレンスという性質上、入門レベルからの解説は行っていません。jQueryの基本については、拙稿「ASP.NETプログラマーのためのjQuery入門」も併せて参照することをお勧めします。 それではさっそく始めましょう。まずは、jQueryのキモともいえる「$()関数」で使える、さまざまなセレクタ構文についてまとめていきます。 id値で要素を特定するには？ タグ名で要素を特定するに
[jQuery]フォームの入力欄にデフォルトで文字列を入れておいてフォーカスしたら消す | バシャログ。
テキストフィールドの入力欄に「キーワードを入力してください」とかデフォルトで入れておいて、フォーカスした時に消す、というインターフェースを簡単に実装する jQuery のプラグインをご紹介します。 jquery.fieldtab.js 導入はとても簡単です。 まずは上記のサイトから「jquery.fieldtag.js」をダウンロード。 次に HTML の head 内に以下のコードを。#hoge のところは適用したいテキストフィールドの id を入れます。 <script type="text/javascript" src="jquery.fieldtag.js"></script> <script type="text/javascript"> /* <![CDATA[ */ $(function(){ $("#hoge").fieldtag(); }); /* ]]> */ </s
![[jQuery]フォームの入力欄にデフォルトで文字列を入れておいてフォーカスしたら消す | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/6a7c7828e73c1691039a9aa0dce7f4c767e36c92/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_javascript.png)
jQueryをうまく使ったクールなポートフォリオサイト25 – creamu
CreativityDenというサイトで、jQueryをうまく使ったクールなポートフォリオサイトがたくさん紹介されています。 いくつかご紹介しますね。 » webalon jQueryを使って画像を水平方向にスクロールしているWebalonのサイト » metalabdesign マウスオーバーでさりげなくフェードイン&アウトするグローバルメニュー » brynnshepherd ”about me”タブをクリックすると、スライドして現れるコンテンツ » jp3design マウスオーバーすると、ふわっと浮き上がって落ちる時も滑らかなグローバルメニュー » cpeople スライディングパネルとスクローラーをクールに使ったCPeopleのサイト その他のリストは以下からどうぞ。 » 25 Portfolio Sites Using jQuery Amazingly Well pdfがcom
長ったらしいフォームをウィザードにして抵抗を少なくするjQueryサンプル:phpspot開発日誌
長ったらしいフォームをウィザードにして抵抗を少なくするjQueryサンプルが公開されています。 長々としたフォームは利用者が入力を躊躇してしまいますが、ウィザードにすることでその抵抗を軽減できますね。 この変換を自動で行えるjQueryのサンプルが公開されています。 図１：長いフォーム スクリプトを実行すると次のようにウィザード形式に変換できます。 図２：ウィザード形式（Step1〜Step3） チュートリアル記事になっているので、見ながら簡単に実装できます。 フォームを作成する時は、参考にしてみてもよいでしょう。 次のエントリにて具体的手法が見れます。 Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)
素晴らしいjQueryチュートリアル集 – creamu
AjaxLineで、素晴らしいjQueryチュートリアルがまとまっています。 ざっといくつかご紹介。 » Animated Menu Using jQuery jQueryを使ったアニメーションするメニュー » How to create tab with JavaScript シンプルなタブ切り替えコンテンツの作り方 » Animated Navigation with CSS & jQuery マウスオーバー時にくるっくるっと切り替わるかっこいいメニュー » 5 Sliding Content Techniques, Examples & jQuery How to’s 画像をスライドで切り替える超クールなテクニック » jQuery FAQs: Scroll To and Highlight Tutorial ページ内リンクのスクロール後、対象のコンテンツをハイライトしてくれる »
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]HTML5, CSS3, jQueryを使用して実装する画像ギャラリー
Webデザインに使えるjQuery UIライブラリ – creamu
[JS]ホバー時に浮かぶエフェクトがとってもリアルなスクリプト