jQuery1.4の新機能を1.4だけに14個 - KAYAC engineers' blog
時が経つのは早いもので、ぼーとしてたらもう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とAjaxで作るスムーズページング (1/3)
Googleの検索結果のように、長いリスト項目を複数のページに分割して表示することを「ページング」（Paging）と言います。ページング処理では下部にナビゲーションリンクを配置し、クリックされた番号のページを表示しますが、ページ全体をリロードして切り替えるには時間がかかります。そこで今回は、スムーズにページングさせるためにAjaxを利用して更新が必要な部分のみを外部ファイルから読み込んで書き換え、ユーザーのストレスを軽減する方法を紹介しましょう。 データのHTMLを用意する 今回は、数が多い商品情報のリストを複数のページに分割して表示するサンプルを作成します。はじめにAjaxで読み込むコンテンツデータを用意します。Ajaxは、XMLやJSON（JavaScript Object Notation）、テキストなどさまざまデータを扱えますが、今回はもっとも手軽なHTMLを使いましょう。コンテン
jQuery、プラグイン、jQuery UI、Web経由のCDNとは
jQuery、プラグイン、jQuery UI、Web経由のCDNとは：CSSの書き方も分かるjQueryプラグイン実践活用法（1）（1/3 ページ） CSSの書き方も分かる、jQueryプラグイン紹介連載 本連載は、jQueryと、そのプラグインの使い方を、UI効果（エフェクト）のテーマごとに紹介する連載です。jQuery/JavaScriptコードやHTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。 第1回目は、基本／おさらいとしてjQueryとプラグイン、jQuery UIについて簡単に触れ、Web経由でjQueryを使うCDN（Content Delivery Network）について解説します。 これぐらい知ってますよね？ 「jQuery」基礎講座 jQueryは、米国のJohn R
第5回 難しくなる前にFirebugの活用を学ぶ | gihyo.jp
内容が難しくなる前にFirebugに慣れる！ 第1回から第4回まで、jQueryについての各セレクタやメソッドなどを見てきました。各回で簡単なサンプルも載せていましたが、皆さんここまでの内容については問題なくついてこれていますでしょうか？ まだjQueryの基礎について全てを説明し終えてはいないのですが、そろそろスクリプトも長くなってきて、考えることも難しくなってきています。第3回と第4回の内容を振り返ってみても、少しずつスクリプトの量も増えてきているのがわかると思います。この先も、内容が増えていくにつれて、スクリプトも長く、手順をうまく考えなくてはならなくなってきます。 内容がもっと難しくなっていく前に、一度ここで復習をして、この先に備えておきましょう。 Firebugをもっと使ってみる ここまで、いくつかサンプルなどを紹介してきましたが、まだまだjQueryがいまいち理解できていない人
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
Update: jQuery UI 1.6 Slider from a Select Element | Filament Group, Inc.
Posted by Scott on 01/14/2009 Topics: cssjQueryprogressive enhancementusability We've updated our progressive enhancement select-to-slider plugin to use the new jQuery UI 1.6 and jQuery UI CSS Framework. This is an update to our jQuery UI 1.5 version and an even earlier non-UI version as well. What's This All About? The purpose of this plugin is to allow for the jQuery UI Slider plugin to be gener
AJAX User Poll Using jQuery and PHP - WPLoaded
Today, we’ll be creating a nice user poll script using jQuery and PHP utilizing AJAX and animation effects of jQuery to spice up the user interface and provide a rich user experience. Let’s get started. Set up the database For storing poll questions, options and votes, we’ll be using a MySQL database. Here is the database structure required. There are three tables: questions table stores the poll
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チュートリアル集 – 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 ページ内リンクのスクロール後、対象のコンテンツをハイライトしてくれる »
jQuery言語入門 : tech.kayac.com - KAYAC engineers' blog
先月の社員PVランキングは91番目でした。agoです。 たまに他言語開発者から「JSは何となくわかるけど、jQueryが特殊すぎてよくわからない」という声を聞きます。 個人的にjQueryを使う場合、「JSの中でjQueryを使う」と言うより、「jQueryの中でJSを使う」と考えた方が理解しやすいと思うので、今日は"jQuery言語"の書き方を紹介したいと思います。 文法 Traversing methodでインデントを下げて、.end()でインデントをあげます。 （Traversing以外のmethodはインデントを維持します） そして、末尾には開始行と同じ位置に「;」を置きます。 $('body') .find('a') .filter('.permlink') .attr('href', function () { return $(this).attr('href').repla
(function($) {})(jQuery);って何？って思ったからいろいろ試してみた記録 - お勉強orz日和
どうでもいい話なのですが、inputタグのautocomplete属性について先日はじめてちゃんと知った気がしました（今更 それと日記見返すと、昔の方が雑記的だなぁと思った。。 うーん、そう考えるとローカルのもったいないメモは多そうだ。 今度書き出せたらいいなぁ。。 で本題ですが、先日jQueryを使っているプラグインのコードを見てて「(function($) {})(jQuery);」ってどういう意味？て思ったので、調べたりとかしてました。 謎って思ったのはおおまかに３つ。 何故全体を括弧で囲む必要があるのか。 function($)の「$」って何？ ２個目の括弧の中の「jQuery」って何？ これ、ほぼ「(function($) {})(jQuery);」の全てが謎っていってるようなものですねw http://q.hatena.ne.jp/1226297257 上記のURL先を参考にな
フォームのユーザビリティに貢献するjQueryプラグイン:phpspot開発日誌
Top 10 jQuery plugins for Form Usability ・Steve Reynolds フォームのユーザビリティに貢献するjQueryプラグイン。 入力制限やヒント表示といったフォーム入力に関する便利プラグインが色々と紹介されています。 AlphaNumeric アルファベット＆数字のみに入力を制限する JTip 入力ヒントボックスの設置 Password Strength Indicator パスワード強度の表示 Ajax Username Checker 使えるユーザ名か、ajaxでチェック Geogoer VChecks チェックボックスをファンシーなデザインにした上で押しやすくする 全部見る ブラウザが対応していなかったりすると、ユーザビリティ以前に使えないということになりかねませんが、そこら辺を検証してうまく使えばよいフォームが作れそうですね。 関連エン
FluentDOM – jQueryライクなPHPのDOMElementラッパー | 秋元@サイボウズラボ・プログラマー・ブログ
サーバ側(PHP)とクライアント側(Javascript)でDOMアクセスの書き方が異なるのが面倒、ということへの回答か、FluentDOMというPHPのプロジェクトが始まっていました。 jQueryライクに、ということですけど、要素の選択はCSSセレクタじゃなくてXPathで行ないます。PHPのDOMDocument, DOMXPathを使ってるからこっちの方が実装が楽だということらしいです。(CSSセレクタからXPath表記への変換もToDoには入っています) 全部の のテキストを抜き出すという処理を、素のPHPで書いたのと、FluentDOMで書いてみました。 <?php $xml = <<<XML <html> <head></head> <body> <div> <p>Hello</p> <p>cruel</p> <p>World!</p> </div> </body> </ht
jQueryのgetJSONで文字コード違うとIEでスクリプトエラーになるのを解消する - こんにちはこんにちはmonmonです！
jQueryでgetJSON使ってjsonpするライブラリ作っていたのだけど、IEでエラーになるって指摘を受けた。 （僕はFirefoxだったのと、utf-8のページでロードしてたので気付かなかったのよね。。） で、確認した。 確かにエラー。 なんでだろ？と思いIEのデバッガでエラーを確認してみると、 どうやら取得したJSONの文字化けのせいっぽい。 確かに、自分で作ったスクリプトを<script charset="utf-8" ...>とかでロードしたとしても、 その先のjsonpの部分でcharset指定しないと文字化けを起こすよね。 と言うことでjQueryのドキュメントを確認。 jQuery.ajax( options ) …それっぽいのがナイでやんの。。。 と言うことでjQueryのソース見てみた。 jsonpだからcreateElement("script")してるところを探し
anything from herejQuery解読
関連エントリイ in this Blog jQuery（）活用（2) Popup Tips を自作する──jQuery解読(22) popup メソッドは２年半前に一度作成していた 2007年12月。PopupTips と題して、jquery.js を最小限度使用してポップアップを作りました。お陰様で 6 件の拍手を戴きましたが、パソコンの高速化がますます定着し、加速されている今、jquery.js をフル活用したコードでも、描画に大きな支障は出ない程度にまでパソコン性能が... 「jQuery解読によるJavascript学習」関連エントリイ一覧 in this Blog 何回かに分けて Traversing に分類されているインスタンスメソッドの解読を行います。 全体の項目とこのエントリイの項目 eq()、slice()、is()、filter()、closest()、not()、ad
KAYAC engineers' blog
こんにちは！ カヤック面白プロデュース事業部のおばらです。 普段は受託案件のデザイン・フロントエンド開発などを担当しています。 さて、『JS体操』第2問 いかがでしたか？ 今回初めての方々 第1問に引き続きの方々 複数のアプローチで何通りも回答してくださった方々 普段業務で JavaScript をバリバリ書いているであろう方々 JavaScript を学んでいる学生の方々 などたくさんの方々が挑戦してくださいました。 とても嬉しいです。ありがとうございます！ 『JS体操』とは？ 『JS体操』とはカヤックが主催する JavaScript のコードゴルフ大会です。 もともとは社内の勉強会として始めた施策です。 その詳細は以下のブログ記事を御覧ください！ techblog.kayac.com 第2問の詳細はこちら https://hubspot.kayac.com/js-taiso-002 も
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ｊQueryで非同期通信によるファイルアップロード - 趣味の延長線
PHP＆MySQL＋jQueryでページ送りを実装するチュートリアル:phpspot開発日誌
http://aext.net/2009/09/learning-jquery-submit-form-php-mac-style-modal-window/
Prototyperに贈るjQuerystからの手紙