前回、フォームをAJAXでうんちゃかするjQueryFormPluginのエントリーを書きましたけど、フォームと言えばValidateですよね。 ってことでjQueryValidatePluginについてもサラサラ見ていたので、こっちも日本語Document化したのを書いておく。 で、日本語化して書いていたら思ったよりも量が多くて少し適当な感が否めないような感じになっているかもしれません。 必要なさそうなところは一部飛ばしているしー、たまにおかしいところがあるかもしれませんが悪しからず。そんときはコメントくださーい。 あ、あとエラーメッセージ等のローカライズ版と日本語環境用のValidateメソッドを新たに追加するスクリプトも書きました。 デフォルトだと半角英数のみとかー、ひらがなのみとかーできないんでー それから、もともとの目的のjQuery Form Pluginとの連携でAJAXなん
今さら感はありますが、Rails3 の Ajax 実装の方法を紹介します。 Rails3.1 から jQuery がデフォルトになり、AjaxもRails2の頃とは違うスタイルなりました。また、幾つかのパターンが選べるようになりました。 ここでは上の画像のように、 rails g scaffold todo due:date task:string で作ったアプリのshow がindex画面に表示される簡単な Ajax アプリで説明します。 1. Rails2 に近いやり方 Rails2 では、view にjavascriptを書かずに ajax アプリを書けるようになっていましたが、それに近い方法は、 index.html.erb の showへのリンクに :remote => trueを指定し、Ajax用の表示エリア div.show_area を置きます。 <% @todos.eac
初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')
jQuery API jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new to jQuery, we recommend that you check out the jQuery Learning Center. If you're updating to a newer version of jQuery, be sure to rea
jQuery Form Framework - jFormer ログイン/ユーザ登録といったフォーム実装用のフレームワーク「jFormer」。 JavaScript と PHP、CSSファイルが1つのセットになっており、このフレームワークを使って便利なフォームをPHPで簡単構築できるライブラリです。 例えば、ログイン用のフォームを見てみると、次のように、demoユーザの案内を出すことも出来ます。 デモページ上には、単にデモだけではなく、実現するためのPHPコードがデモページ上から確認でき、比較的容易に実現できるようになっています。 全てPHPのコードで記述出来てしまうところがこのフレームワークの特徴。PHPとJavaScriptの思考をいったりきたりする必要がなくて作り安いというわけです。 テキストのバリデーション機能なんかも入ってます。 ここら辺もPHPでrequiredに設定することで
This shop will be powered by Are you the store owner? Log in here
Lightweight Footprint Only 30kB minified and gzipped. Can also be included as an AMD module CSS3 Compliant Supports CSS3 selectors to find elements as well as in style property manipulation What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use
jQuery基礎文法最速マスター はやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> jQueryの記述場所 基本的にはscript要素内の次の箇所に記述していきます。 <script type="text/javascript"> $(function(){ /*ここにjQueryを記述*/ }) </script> 上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。 <script type="text/javascri
WEBサイトには欠かせないフォーム。様々な情報のやりとりに利用されていて、多くのWEBサイトで利用されていますが、今回紹介するのは一般的なコンタクトフォームから、ログインフォーム、EC用のフォームまで、様々なフォームに対応したjQueryベースのWebフォームライブラリ「jFormer」です。 「jFormer」はバリデーション機能も備えたフォームのフレームワークで、AJAXを使ったページ遷移や、入力データのレジュームなど、細かな機能も標準で備わっており、フォームの開発の時間を短縮してくれます。 詳しくは以下 基本的にフォームの部分はphpで作られており、デザインをCSSで、動きなどはjavascriptを利用しています。 多彩なデモは「Demos – jFormer」からご覧いただけます。またベーシックなコンタクトフォームのつくり方は「Installation and Documenta
もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 2011年04月11日- Tipped - The Javascript Tooltip Framework | jQuery & Prototype Tooltips もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 これ1つで出回ってるであろう殆どのツールチップは作れる気がします。しかも全てハイクオリティ。 フレームワークということで以下の点をカスタマイズ可能 ・スキン ・ツールチップの位置設定(左右上下など) ・コンテンツをAJAX読み込み ・ローディング画像のカスタマイズ ・コールバック機能(afterUpdate)、イベント(onHide, onShow) ・APIの提供 スクリーンショットを以下にサンプルとして掲載。 それぞれがセンスがよくてどれをつかってもよい気が
In the last few years jquery image sliders and jQuery image galleries become very popular in blogs and especially in portfolio sites and are also useful for any other type of site for displaying images and photos. Fortunately, adding a jQuery gallery does not have to be difficult, even if you don’t have much experience with JavaScript and jQuery. One of the easiest solution to attract your visitor
このところHTML5関連のモバイルアプリケーション開発について調べていて、先週の水曜日にはSwapSkills主催のイベント「jQueryモバイルで簡単! スマートフォンサイト作成」に参加してjQuery Mobileについて勉強してきました。 jQuery Mobileとは、jQueryのプラグインとして利用するモバイルアプリケーション用のライブラリです。そしてその驚異的なまでの簡単さは、これから業務用のモバイルアプリケーションの作り方を一変させてしまう可能性を感じさせます。 jQuery Mobileの大きな特徴は次の3つです。 1)HTMLを書くだけでモバイルアプリケーションができてしまう 2)モバイルのユーザーインターフェイス対応の部品が多く揃っている 3)iOS、Android、WebOS、Windows Moblie、Symbianなどクロスプラットフォーム対応である 具体的な
先日作った「jQuery SameHeight Plugin」 今まではclassにsameHeightをつけなければ使用できませんでしたが、 ブクマコメントに、「$('hoge')sameHeight();みたいに使いたい」 というのが書いてあったので、対応してみました。 今までどおり、class="sameHeight"に対応はもちろん、 ユーザー指定のセレクタにも対応するようにしました。 ダウンロードして使用してください。 リンク先を保存で保存できます。 ダウンロード:jquery.sameHeight-1.1.js 動作を確認したブラウザは Firefox3、IE6、IE7、Safari3、Opera9.6、Chrome。 今回も、SafariとChromeはemなどの指定には対応できていません。 (高さがうまく確保できないですが、一応揃います。) 使い方 jQueryが無いと動か
「プロが作ったWebサイトのあの“技”をウチのサイトでも(それもタダで)マネしたい!」――。そんな欲求に応えてくれる JavaScriptライブラリ/フレームワークが、ネット上にはたくさん公開されています。この連載では、国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間をかけずに自分のWebサイトをブラッシュアップしていく方法を紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く