jQuery 1.4の新機能8選＋Tabsプラグインでタブ表示
本稿ではまず、そのいくつかを紹介しましょう。 すぐにjQuery 1.4.1がリリース！ CDNも対応 また、jQuery 1.4記念キャンペーン中にバグ修正版のjQuery 1.4.1がリリースされました。その後、jQuery 1.4.1のリリースに伴い、グーグルとマイクロソフトからCDN（Content Delivery Network、詳細は連載第1回「jQuery、プラグイン、jQuery UI、Web経由のCDNとは」を参照）もリリースされています。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/jQuery/jquer
ajaxで簡単ファイルアップロードが可能なjQueryプラグイン「jQuery.upload」:phpspot開発日誌
jQuery.upload: A simple ajax file upload plugin ajaxで簡単ファイルアップロードが可能なjQueryプラグイン「jQuery.upload」 同じページ内に生成したiframeへデータをPOSTすることで、非同期にファイルをアップロードが可能にするものです。 ファイルを選択すると即時にアップロードが開始するのが特徴 アップロードを完了すると次のように、ファイル名・サイズといったファイル情報が表示されるデモが公開されています。 ファイルアップロードを頻繁に行うようなケースにおいて、便利に使えるインタフェースが組み込めそうですね。 関連エントリ ajaxファイルアップロードに使えるjQueryプラグインいろいろ PHPでファイルアップロードの処理を超簡単にするクラス例「EasyUp」 ファイルアップロードの際に便利なFlash/JavaScri
テキストをYahoo!メッセンジャーの顔アイコンに変換できるjQueryプラグイン「Emotion Toggle」:phpspot開発日誌
テキストをYahoo!メッセンジャーの顔アイコンに変換できるjQueryプラグイン「Emotion Toggle」 2010年03月04日- Emotion Toggle テキストをYahoo!メッセンジャーの顔アイコンに変換できるjQueryプラグイン「Emotion Toggle」 <a href="#" id="etoggle" style="background: #ddd;">Off Emotions</a> <div class="discuss"> >:) :)) /:) <):) :)] :) :(( :( ;;) ;) >:D< :D :-SS #:-S :-? >:P :P (:| :| :-/ :-* =(( ~X( B-) :-S =)) O:-) :-B =; 8-| L-) :-& :-$ [-( :O) 8-} <:-P :x =P~ #-o =D> @-)
特定ブロックの文字のみ拡大縮小できる便利機能実装jQueryプラグイン「fontScaler」:phpspot開発日誌
fontScaler marcup 特定ブロックの文字のみ拡大縮小できる便利機能実装jQueryプラグイン「fontScaler」。 次のように、特定のブロックを $(element).fontScaler() のように初期化するとボタンがあらわれ、拡大縮小が簡単になるプラグインがあるようです。 フォントを大きくするボタンをおしたところ。結構大きくなって読みやすくなりました。 次のように、段階を追って拡大、縮小ができるようにする機能もあります。 これはありそうでなかった気がします。 全体に適用するとデザインが崩れてしまって嫌だ、という方も、記事部分だけならデザインは崩れない＆可読性を上げることができるので便利ですね。 関連エントリ 5分で実装可能なページの文字サイズ変更＋クッキーに保存サンプル フォントサイズの変更をJavaScriptによって検地する方法
オシャレにフォームのエラーをヒント表示してくれるjQueryプラグイン「Ketchup」:phpspot開発日誌
Ketchup Plugin オシャレにフォームのエラーをヒント表示してくれるjQueryプラグイン「Ketchup」。 次のように、Submit した時点でのエラー表示を吹き出しつきの枠をもってわかりやすく表示してくれます。地味にアニメーションする部分もいいです。 Validateというと、どういう値が正しいかという指定が必要なのですが次のように class に指定することで定義するようです。 class に指定するということで好き嫌いが分かれそうな気もしますね。ちょっと改造してもよさそうです。 <input type="text" class="validate(required, username, rangelength(3,20))" /> max, min, range, digits, mail, url など、基本的なバリデート指定は最初から実装されているみたいです。 関連
あの日まであと何日をアニメーション表示できるカウントダウン実装用jQueryプラグイン「jQuery CountDown」:phpspot開発日誌
あの日まであと何日をアニメーション表示できるカウントダウン実装用jQueryプラグイン「jQuery CountDown」 2010年02月16日- jQuery Countdown あの日まであと何日をアニメーション表示できるカウントダウン実装用jQueryプラグイン「jQuery CountDown」というものがあるみたいです。 次のようなカウントダウンタイマーが実装できます。 英語だけかと思いきや、多くの言語に対応していて日本語も対応してます。 使い方も簡単で１行で実装できます。 $(element).countdown({until: 目的の日付のDateオブジェクト, format: 'dHM'}); until には new Date で作れるオブジェクトをわたします。 var targetDate= new Date(); targetDate.setDate(targetD
[jQuery]hrefのURLがフルパスの時だけ別窓を開く
jQuery1.2.6用。別窓開くスクリプトの超簡易サンプル。 aタグを捜査してhrefに書かれたURLがhttpから始まってる場合のみtarget=”_blank”を追加する。 $("a").each(function (i) { if ($(this).attr('href').indexOf("http") != -1) { $(this).attr('target','_blank'); } }); 上のはIEでスルーされたのでwindow.openで分けてみる $("a").each(function (i) { if ($(this).attr('href').indexOf("http") != -1) { if(jQuery.browser.msie){ $(this).attr('onclick','window.open('this.href','status=yes,
![[jQuery]hrefのURLがフルパスの時だけ別窓を開く](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
Create Your Own Sliding Resizable Grid
28 long articles and open source examples about making real software Create Your Own Sliding Resizable Grid by Zack Grossbart on August 12, 2009 I’ve focused on web programming for a while now, but I still miss GridBagLayout. GridBag is a Java layout manager and one of the best form layout managers I’ve used in any language. It makes it possible to create forms where any screen size is the perfect
サイトのデザイン微調整に。ブラウザ上でCSS修正·Brosho Plugin MOONGIFT
Brosho PluginはJavaScript製jQueryプラグインのオープンソース・ソフトウェア。Webサイトのデザインを調整する時には、ローカルのテキストエディタでCSSを修正し、Webブラウザで再読込するというのが一般的だ。だが切り替えの手間がかかる。 オンラインでデザイン修正 そこでFirefoxであればFirebugを使ってその場でデザインを変更してみて確かめることもできる。だがブラウザが限定される。ブラウザの壁を乗り越え、オンラインでCSSの修正を行えるのがBrosho Pluginだ。 Brosho PluginはjQueryプラグインとして提供されるソフトウェアで、Webサイトを表示すると四角い枠が表示される。そしてWebサイト上のエレメントを選択（赤い枠で囲まれる）し、新しいCSSプロパティを入力するとそれがオンラインで適用されるのだ。 修正したCSSの内容を生成する
PHP・CSS・jQueryを使った横向きのタイムライン実装例:phpspot開発日誌
Advanced Event Timeline With PHP, CSS & jQuery ? Tutorialzine PHP・CSS・jQueryを使った横向きのタイムライン実装の例とチュートリアル、サンプルプログラムが公開されています 次のような、横にスクロールするイベント表みたいなものが作れます。ツールなどに組み込む場合に参考にできるかもしれません。 デザインもカッコよくてスクロールバーの細かな部分も綺麗に実装されています。 関連エントリ 1.5KBで実装できるスライドショー用JavaScript ライブラリ「TinySlider」 JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプル
フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」:phpspot開発日誌
PHPからTwitterを簡単に操作できるPEARパッケージ「Services_Twitter」がアッ... 次の記事 ≫：PHP関数の挙動をちょっと調べたいときに助かる「PHP Functions Online」 jQuery Form Tips Plugin フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」 フォームにデフォルト値を入れておくことで利用者が何をいれていいのか、というのが直感的にわかり、かつスペースもとらないのでよく使われる手法ですが、実装も超簡単にやりたいですね。 jQuery Form Tips を使えば、フォーム要素の title 属性に値を入れておくだけでヒントを自動表示できます。 <p> <label for="i1">Field1</label><br /> <input type="text" name="i1"
テーマでwp_enqueue_scriptを使う | Waviaei
コリスさんが作成されたページの先頭や任意の要素に、スムーズにスクロールさせることができるスクリプト「Page Scroller」を入れてみました。ページの右下の方にある「↑toTop」をクリックしてみてください。スムーズにページ上部へスクロールするはずです。 で、このスクリプトを実装するときに使ったのがwp_enqueue_script();と言うWordPressのアクションフック。Ver. 2.1から導入されたみたいなんだけど、プラグイン向けの関数と言うこともあって、その存在すら全然知りませんでした（汗） wp_enqueue_scriptとは 何をするフックかと言うと、外部参照のスクリプトを： 重複しないように 適切な順番で 読み込むように自動的に調節してくれるフックです。なぜこんなのが必要かと言うと、最近のプラグインやWPコアの機能において、jQueryやscript.aculo.
リッチ過ぎず、どんなページにも馴染みそうなWYSIWYGエディタ実装jQueryプラグイン「wkrte」:phpspot開発日誌
リッチ過ぎず、どんなページにも馴染みそうなWYSIWYGエディタ実装jQueryプラグイン「wkrte」 2009年12月21日- リッチ過ぎず、どんなページにも馴染みそうなWYSIWYGエディタ実装jQueryプラグイン「wkrte」。 普通、JavaScript で動くWYSIWYGエディタというと、大きなツールバーがついていて、それ自体はカッコいいのですがページデザインにうまく馴染ませることが難しかったりします。 wkrte なら、エディタにカーソルがフォーカスしない状態だとツールバーを表示せず、普通のテキスト領域（textarea）のように表示させられます。 何もはいってない状態だと、一見普通のtextareaです 内容が入ってもツールバーがないので目立ちすぎず、いい感じです。 カーソルを合わせるとツールバーが表示。これはとてもスマートですね。 高機能なテキスト編集を実現しつつ、ペ
Meerkat - A jQuery Plugin
What is it? Meerkat, named for its pop up like behavior, is a jQuery plugin created by myself, Jarod Taylor. It was originally created to serve a specific purpose, however, by adding additional functionality to it, I've found several uses for it. Whether it's used as a simple promotional tool, a roost for advertisements, or even as an alternative to a splash or entry page; Meerkat is unobtrusive,
jQueryでアニメーションするクールなサインアップボタン作成チュートリアル:phpspot開発日誌
jQueryでアニメーションするクールなサインアップボタン作成チュートリアルが公開されています。 次のように、１枚の画像を切り替えてアニメーションさせることで実現していてなかなかトリッキーですが参考になります。 Flashを使わずにjQueryを使って比較的簡単なコードによって実装されているようです。 マウスオーバーすると色が変化。 効果は測ってないのですが、アニメーションすることでクリック率は上がるのかも。 Flashはあんまり使いたくないというケースに参考に覚えてくとよいかも。 以下のエントリを参照してください。 Create an Animated “Call to Action” Button
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
ユーザビリティ向上に。デフォルト値を薄い文字で表示する·jQuery Watermark MOONGIFT
jQuery WatermarkはjQuery用のオープンソース・ソフトウェア。最近のWebサイトでは登録フォームにどういった文字を入力すべきかを提示するケースが多くなっている。例えばユーザIDと書かれていれば何を入力すれば良いか分かりやすい。他にも検索ボックスにSearch...と書かれているのもよく見かける。 予め文字を入力してユーザビリティを向上する そんなテキスト入力を補助する効果を実現するのがjQuery Watermarkだ。名前の通りjQueryプラグインなので、jQueryを使った開発の際にはぜひ使ってみたいライブラリだ。テキストボックスの他、テキストエリアに対しても適用できる。 テキストボックスに対して利用する他、パスワードボックスでも通常のテキストを表示しつつマウスがフォーカスしたら内容を消すこともできる。さらにSafari用の検索ボックスへのデフォルト表示にも対応して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
%26utm_content%3DGoogle%2BInternational)
Coda-Slider 2: Customizable jQuery Slider
D&DEPARTMENT
%26utm_content%3DGoogle%2BInternational)
Simplest jQuery And Prototype Slideshows