ドットインストール代表のライフハックブログ
リンクと言えばaタグですが、ボックス単位の大きなdiv要素もリンクにしたくなります。 jquery.biggerlinkはそんな我が儘を叶えてくれるjavasrciptです。 sponsors 使用方法 jquery.biggerlinkからjquery.biggerlink.jsを、jQueryからjquery.js(v1.2.1)をダウンロードします。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/jquery.biggerlink.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('#id名 div')
時が経つのは早いもので、ぼーとしてたらもう1月も終わりそうですね。外村です。 先日リリースされたjQuery1.4で新しく追加されたメソッドや新しい使い方ができるようになった機能を全部ではないですがいくつか紹介します。以下に変更点が全て掲載されているのでそちらも参照するといいと思います。 Version 1.4 ? jQuery API 新規で追加されたメソッド 1. nextUntil()、prevUntil()、parentsUntil() 指定したセレクタまでの要素を返します。以下の例ではitem3とitem4の後ろにテキストが追加されます。 <ul> <li id="item1">item1</li> <li id="item2">item2</li> <li id="item3">item3</li> <li id="item4">item4</li> <li id="item5
ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」 2010年01月19日- rikrikrik.com - jQuery autosave plug-in ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」。 データを編集中にフォームに書き込んでいて、ブログ記事などが消えたりするとても悲しい気持ちになりますが、このプラグインを使えばデータをブラウザのクッキーに保存してくれて、次にアクセスした時にリストアできるという素晴らしいプラグインです。 クッキー保存のため、サーバに保存する必要はないですし、手軽に使うことができそうです(ブラウザごとにクッキーに依存した文字数制限などは存在すると思います) こういうことを1からやろうとすると結構大変ですが、毎度のことながら、jQueryプラグ
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに!かつ操作性を向上!できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック(バリデーション)が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
htmlの作成時に各ファイルで共通している部分がありますね。 ・ヘッダとか ・フッタとか ・グローバルナビとか そんな時、どうしてますか? 1.各ファイルに同じ記述をしてますか?(変更掛かったらめんどくさいですね) 2.SSI(サーバーサイドインクルード)してますか?(できればいいけどちょっぴり敷居が高い?) 3.avascriptでdocument.writeつかってますか?(ソースが長いとめんどくさいですね) ざっくりリストアップすると以上のような方法が考えられます。 僕も上記のどれかをケースバイケースで使ってました。 そこにもうひとつ選択肢を追加します。 jQuery.jsを使って外部のhtmlファイルをまるごとインクルードしちゃいましょう。 方法 1.何はともあれjQuery.jsをダウンロード http://jquery.com/ 2.htmlのheader要素内で読み込む <s
このブログのサイドメニューにある「最近のエントリー」の項目みたいなことをしたい場合の方法です。 要するに、 <ol> <li id="no1">いちばんめ</li> <li id="no2">にばんめ</li> <li id="no3">さんばんめ</li> </ol> といった感じにする方法をまとめてみました。 JavaScriptで実現 まずはfor文で $(function() { var h=document.getElementById("hoge"); var l=h.getElementsByTagName("li"); for (var i=0;i<l.length;i++){ l[i].setAttribute("id","hoga"+(i+1)); } }); <ol id="hoge"> <li>ほげ1</li> <li>ほげ2</li> <li>ほげ3</li> <
これまでに使った20のjQueryプラグイン :: 5509 5509のnoriさんとチャットで会話しているときに nori: みんなでよく使うプラグインをまとめる、とかは? nori: ↑それぞれがまとめる nori: 意外と知らないやつとかあったりするかも hiromu45: 皆さんはどうですかー?大募集! hiromu45: みたいなのやりますか。 なんて話題になったので、TB(トラックバック)企画にしちゃいます! 自分の普段使うプラグインやこれは便利だ!なんてプラグインを書いてエントリーに書いて、トラックバックしてください! 便利なプラグインのまとめ サイトの制作時に使ったプラグインや、これは便利だ!と思っていたプラグインをまとめてみました。今だったら自分で書くかなっていうプラグインも含めてまとめてあります。 jQuery Opacity Rollover http://h2ham
いろんな文献を気軽に参照しにくい環境になり、いちいち検索しなくてもいいようにここにまとめておきたい感じになったのでしばらくそんな普段書かないようなPOSTばかりします。 まず、最近良くある、デフォルトの状態では入力例を表示して、フォーカスを合わせると消えるというインプットボックスの実装例について。このブログのコメント入力フォームがまさにそんな感じ。 <form action="hoge.php" method="get"> <p><input type="text" name="q" id="q" size="30" value="検索語を入力してください"><input type="submit" value="検索"></p> </form> $(function(){ $("#q").focus(function() { if($(this).val() == $(this).att
国内外を問わず、多くのECサイトがお手本とする「Amazon.co.jp」。この連載でも以前、Amazonが採用する「カルーセル」(回転表示するスライドパネル)の作り方を紹介しましたが(関連記事)、Amazonは優れたユーザーインターフェイス(UI)の宝庫でもあります。 中でも、過去の閲覧履歴などからページの大半が動的に生成されるAmazon.co.jpのトップページは、ユーザーを商品購入へと導くさまざまな仕掛けが組み込まれています。今回は、このAmazon.co.jpのトップページに注目します。 今回のお手本サイト:『Amazon.co.jp』 米アマゾン・ドットコムの日本法人アマゾンジャパンが2000年から運営するECサイト。書籍販売から始まり、現在ではペットボトル飲料水や紙おむつ、キッチン家電まで1000万点超の膨大な商品を扱っている。取扱商品の拡大に合わせて、2008年4月に大規模
WebページでHTMLやJavaScriptを表示させる場合に厄介な問題がある。実際のソースコード、たとえばそれはHTMLやJavaScriptだったりするわけだが、実際に使われるそういったコード保守する必要があるほか、そのコードを表示させているHTMLの方に含まれているコードも保守する必要があるということだ。 大量のチュートリアルを作成している場合などは特に面倒なことになる。デモコードを書き換えるごとに、それを表示させているHTMLの方に含まれているコードも変更しなければならない。編集を忘れてしまえば実際に動作しているコードと表示されるコードが違うという事態にもなる。 同じことを考えるプログラマは多いようだ。Christian Heilmann氏は1月29日(米国時間)、Displaying source code with Ajaxのタイトルのもと、外部のファイルをインクルードして表示
AJAX Libraries API - Google Codelというのが公開されていました。 jQUeryやMootoolsなどの人気のJavaScriptライブラリを Googleのサーバーから直接読み込んで利用できるというものらしいです。 わざわざダウンロードしてサーバーにアップロードして・・・ といったような手間が省けるようなので、 試しにつかってみることにした。 今回利用できるようになったライブラリは以下の5つ。 ・jQuery ・prototype ・script.aculo.us ・MooTools ・dojo これらが有名なライブラリなのですね。 そしてこのAJAX Libraries APIを利用すると、 こんな利点があるようです。 ・Google CDNを活用したファイルの配布 ・対応していればGzip圧縮転送を有効にする ・ダウンロードするファイルは可能なかぎり最小
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く