This month, I’m learning jQuery with @TutsPremium: http://learnjquery.tutsplus.comLearn jQuery in 30 Days (It's free.) Each day you'll be sent a free video lesson. At the end of the month, you'll be able to confidently use jQuery in your projects, without help. Join 1833 students learning jQuery with us Learn: DOM Traversal jQuery provides dozens of different methods for traversing the DOM. You'll
Learning jQuery: Submit form PHP Mac style Modal window | AEXT.NET PHPとjQueryのAjax連携の学習用チュートリアルが公開されています。 macスタイルのログインフォームからjQueryでAjax送信してリアルタイム認証を行うサンプルです。 それぞれ簡単なコードになっているので入門にも最適で、かつ成果物もクール。 デモページ 入門としてだけでなく、サンプルとして応用して使ってみるのもよさそうです。 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 JavaScriptのウィジェット作成や各種メニュー作成等、便利なチュートリアル集のまとめ jQueryでアコーディオン作成のチュートリアル 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル
jQueryはよく使うのだけど、ちょっとだけ不便なときがあったので、それに対応する関数を書いてみた。 クラスを生成する var Class = $.klass({ init: function (a) { this.a = a; }, view: function () { alert(this.a) } }); initがコンストラクタとして機能します。 $.klass=function(a){var b=function(){this.init&&this.init.apply(this,arguments)};b.prototype=a;return b}; CSSルールの追加削除 var index = $.css.add("body{background:red;}"); alert("stop"); $.css.remove(index); あると便利なときがあるので一応。 $
JavaScriptを使えば画面遷移の少ない、スムーズな操作性を提供できる。いわゆるAjaxなどがそれに相当するが、ドメインを越えて通信できないのが問題だった。幾つかの打開案はあるが、例えばJSONPを使う方法やサーバサイドで取得する方法などがメインになっていた。 検索結果のXMLを並べるテスト これではどちらかのサーバで対応が必要になってしまう。そんな中、殆どをクライアントサイドだけで解決してしまうのがjQuery CrossDomainだ。 今回紹介するオープンソース・ソフトウェアはjQuery CrossDomain、jQueryによるクロスドメインAjaxライブラリだ。 jQuery CrossDomainが使うのはFlashだ。Flashを使って外部ドメインにあるXMLを取得し、それをJavaScriptに返すようになっている。その仕組みをjQueryプラグイン化することで容易に
Written by Samuli Kärkkäinen <amuli.karkkai[email protected]>. Idea from the Interactive XPath tester. See jQuery selector language docs.
GoogleがAjaxを頑張りすぎているせいで、一般的なWebシステム開発においてもAjaxを多用したシステムが求められるようになっている。特に表計算やカレンダー、メールなどそれまでローカルで使っていたものを置き換えようとした際に起こる問題だ。 カレンダーを導入しようと思った時に「Googleカレンダーみたいにドラッグできないの？」なんて言われたことはないだろうか。そんな時にはdhtmlxSchedulerの採用を検討しよう。 今回紹介するオープンソース・ソフトウェアはdhtmlxScheduler、JavaScriptによるカレンダーライブラリだ。 dhtmlxSchedulerはまさにGoogleカレンダーライクな操作が可能になっている。ドラッグして予定の時間を選択すれば、タイトル入力欄に変わる。そこで予定のタイトルを入れれば完了だ。編集ももちろんできる。表示は日/週/月と切り替えるこ
MS Office 2007から採用されたリボンメニュー。今は（といっても2年前からあるが）まだ違和感があるかも知れないが、徐々にリボンメニューを採用したソフトウェアも増えており、慣れると使いやすさは向上していることに気づくはずだ。 jQueryで実現するリボンメニュー！ そんなリボンメニューをブラウザで使える、そんなライブラリがjQuery Ribbonだ。 今回紹介するオープンソース・ソフトウェアはjQuery Ribbon、jQueryでリボンメニューインタフェースを提供するソフトウェアだ。 jQuery RibbonはjQueryを使ってあのリボンメニュー風インタフェースを実現する。凄いのは全てのインタフェースがリスト（ulタグ）だけで実現されていることだろう。そのためJavaScriptがオフであっても機能はするはずだ。 メニュー リボンインタフェースはもちろん、左上にはツリーメ
タイトルだけでは何言ってんだこの野郎という感じかもしれない・・・。 上にある画像の上部にスライドバーが付いていて、バーを動かすと、全体的に画像のサイズが変わると言う代物。 なかなか面白そうなのでメモしておきたい。 とりあえず動かして見るとわかります 動作サンプルはこちら 超訳していくとこんな感じ Create a Resizable Image Grid with jQuery First lets begin by setting up a static image grid. I have prepared 6 photographs than have been cropped to a maximum height and width of 500 pixels. We will create a ul and place our images inside li tags 6つの
Plugins | jQuery Plugins 高速に動作する画像カルーセルＵＩ実装用jQueryプラグイン「Agile Carousel」 ページ右上のページ送りボタンを押せば滑らかに、かつ高速にアニメーションします。 スクリプトはシンプルでありながら、オプション指定が色々とできてカスタマイズ性がある以下のようなコードで実装できます <script type="text/javascript"> $('#slide_holder').agile_carousel({ disable_on_first_last: "yes", next_prev_buttons: "yes", number_slides_visible: "3", slide_buttons: "yes", slide_captions: "Agile Carousel: View Examples With Vari
Working with hugedomains.com was a quick and easy process. We got to speak to multiple real people located in Colorado without having to wait on hold! Our only complaint was we felt we had to overpay more than this particular domain was worth, and we weren't able to negotiate it down to a level that we felt was fair. However, payment and delivery were seamless, and within a few hours we had all of
スケジュールソフトウェアに対する需要は意外と多い。グループウェアのような多彩な機能をもつものではなく、ただiCalファイルを読み込んで表示するだけのものといったシンプルな使い方ができるものに対する需要がある。 ドラッグアンドドロップでスケジュールを変更できるカレンダー ただ表示するだけなら問題ないだろうが、そこにちょっとした編集機能を付けるとなると面倒になる。そこで試したいのがFullCalendarだ。 今回紹介するオープンソース・ソフトウェアはFullCalendar、jQueryベースのAjax対応カレンダープラグインだ。 FullCalendarはその名の通り、フルサイズで提供されるカレンダーシステムだ。とは言え実際にはCSSで幅を制御しているので、小さなサイズにすることもできる。JavaScriptベースで、次の月/前の月への移動がページ遷移なしで行える。 サイズを小さくすること
Prototype.jsやjQueryなどのJavaScriptフレームワークではHTMLのクラス名やIDなどを指定して要素を取得できるようになっている。とは言え、簡単な要素の取得のためにフレームワーク全体を読み込むというのはちょっと面倒だ。 次世代版のCSSセレクタエンジン そこでもっと手軽に使えるCSSセレクタとしてSizzleを紹介しよう。jQuery開発者の方が開発している次世代版のCSSセレクタエンジンだ。 今回紹介するオープンソース・ソフトウェアはSizzle、高速＆多機能なCSSセレクタエンジンだ。 SizzleではCSS3のサポート、not指定による要素の除外指定、ポジション（最初、最後、偶数、奇数など）指定など多彩な機能が実装されている。単体で用いることもでき、わずか4KBという軽量さだ（難読化+GZip圧縮した場合だが）。 Firefox3 for Mac OSXの場合
個人的に何となくEコマースというシステムは大げさなものに見えて仕方がない。ちょっとした商店のレベルで、まるでデパート並みの仰々しさがシステムから溢れている。もっとシンプルに買い物できれば良いと思ってしまう。 jQueryを使って作られたショッピングカートシステム シンプルに買い物するための仕組みに、JavaScriptは欠かせない（スムーズという点において）。そこで試してみたいのがjCartだ。 今回紹介するオープンソース・ソフトウェアはjCart、jQuery + PHPで構築されたショッピングカートシステムだ。 jCartはjQueryを使っており、商品をクリックするだけで同じ画面にあるショッピングカートに商品がポストされる。同じ商品をクリックすれば数量が増え、商品数を変えればその場で金額も変更される。 removeを押せばすぐに消える 各商品の横にあるremoveをクリックすればショ
基幹システムをWebベースで作るといった話題が持ち上がるようになっている。そんな中、よく聞かれるのが表計算ソフトウェア的にデータを操作できる機能だ。技術者の方であればその難易度はご存知の通りで、大抵Excelを使えるようにCSVで出力してお茶を濁すことが多い。 需要の多そうなグリッドライブラリ しかしもう諦めないで良い。高機能、ではないけれど簡易的なデータ操作であればgrrid.jsを使ってみよう。 今回紹介するオープンソース・ソフトウェアはgrrid.js、Webベースで表計算ソフトウェアのように動作するグリッドライブラリだ。 grrid.jsを使うとまるで表計算ソフトウェアのようなグリッドが表示される。各セルは自由に文字を入力できる。移動はエンターキー、タブキー、矢印キーを使って可能だ。タブキーで右、エンターキーは下にフォーカスが移動する。なお、動作にはprototype.jsが用いら
スパイスラボ神部です。 OpenSocial アプリの開発を効率化するために、jOpenSocial か opensocial-jquery のどちらかを使いたいのですが、そのためにはまず jQuery について学ばないと行けないようなので、jQuery についてざっと調べてみました。 -AJAXが好きだ！ - Favorites! Write less, Do more -jQuery: The Write Less, Do More, JavaScript Library まずは公式。 リファレンス -jQuery 1.3.2 日本語リファレンス 参考になりそうなリソース いろんな記事を見ると、とりあえずは jQuery を使うと、構造化された状態でリッチアプリケーションが組めるという部分が強調されている記事が多いような気がします。「jQuery + AJAX で RIA な UI
Notimo Demos site 利用者に対し非常に分かりやすい通知を行うためのJavaScriptライブラリ「Notimoo」。 次のリンクをクリックしてみてください。 → 通知を表示してみる ページの右上にフェードインで表示するのはなかなかインパクトが大きいですね。 スクロールしても、いやみではない感じにちゃんとついてきてくれます。 使い方もかなり簡単で、必要なJSとCSSを読み込んだ後、インスタンスをnewして show メソッドを呼び出すだけです。 showは２回連続で呼び出しても、ちゃんと１個目と区別して表示してくれます。 <script type="text/javascript"> var notimooManager = new Notimoo(); // 通知を表示 notimooManager.show({ title: 'タイトル', message: 'メッセージ
ユーザに何かのアクションを起こさせようとする時にマウスオーバーでボタンを点滅させたり、色を変えるようなアクションを行うことがある。文字の色を変えるくらいなら簡単だが、ボタンを作成したりするのは面倒に感じてしまう。 光り輝く文字は相当目立つ だがユーザビリティを高くするには必要なことだ。開発者にとって楽で、かつユーザにとっても使いやすいサービスを目指してjQuery Glowを使ってみよう。 今回紹介するオープンソース・ソフトウェアはjQuery Glow、GlowイフェクトをJavaScriptで実現するjQueryプラグインだ。 Glowイフェクトとは文字の背後から光を当てて周囲が輝くようなイフェクトのことだ。jQuery Glowを使うとJavaScriptだけで実現できる。マウスオーバーした際に使えば、目立たせることができ、クリックを促せるようになるだろう。 こちらは緑 色は自由に設
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
