第11章 - Ajaxの統合 クライアントサイド上でのインタラクション、複雑な視覚効果(イフェクト)、非同期通信はWeb 2.0のアプリケーションにおいて共通の機能です。JavaScriptを必要とするこれらの機能の実装に関して、コードを手書きするのはやっかいでデバッグに時間がかかることはよくあります。幸いにして、symfonyはヘルパーの完全なセットを持つテンプレート内部のJavaScriptの多くの共通部分を自動化します。JavaScriptのコードを書かずに多くのクライアントサイドのふるまいを実現できます。開発者は実現したいイフェクトだけに集中していればよく、symfonyが複雑な構文と互換性問題を処理します。 この章ではクライアントサイドのスクリプト作成を円滑にするためにsymfonyが提供するツールについて説明します: 基本的なJavaScriptヘルパーは、DOM(Docume
=== 非同期、いわゆるAjaxで、画像情報を更新したいときってあるじゃないですか。 で、以前prototypeでAjax処理をやったので、軽く調べて実装してみたらFirefoxだとOKなのに、IEだと通信してくれないんですね。 なんでさ! と軽く涙目で調べた結果をメモするよ。 【環境】 prototype.js 1.7 XHTML 1.0 【確認環境】 Firefox 7.0.1 Internet Explorer 7.0.6 【やりたいこと】 prototype.jsのAjax.PeriodicalUpdaterを使って定期的にHTML上の特定要素を更新したい。 【起こったこと】 Firefoxでは指定秒数で更新が走るのに、IE 7だと更新が走らない。 ※通信が発生していないのをサーバ側のログで確認。 【原因】 IEは同じURLの表示が2回目以降のときにキャッシュを読み込む(らしい)
Event.observe(window, 'load', doubleClickLoadHandler, false); function doubleClickLoadHandler(){ inputTags = document.getElementsByTagName("input"); for(var i = 0 ; i < inputTags.length ; i++){ if(inputTags[i].type == "submit"){ Event.observe(inputTags[i],'click',doubleClickInputHandler); } } formTags = document.getElementsByTagName("form"); for(var i = 0 ; i < formTags.length ; i++){ Event.observ
prototype.jsを利用したスムーズなページスクロール 2007年3月14日 最新のPrototype version 1.5.1_rc1と最新のscript.aculo.usのeffects.jsをを使った超簡単でしかも高機能なページスクロールを実現できる記事を見つけたのでご紹介します。 auto-scrolling page navigation 以下のコードをauto-scroll.jsとして保存します。 Event.observe(window, 'load', function() { $$('a[href^=#]:not([href=#])').each(function(element) { element.observe('click', function(event) { new Effect.ScrollTo(this.hash.substr(1)); Event
dom:loadedは、prototype.jsの拡張イベントです。通常ページを読み込まれた後にJavaScriptを実行するには、loadイベントを使いますが、サイズの大きい画像ファイルなどが存在すると、loadイベントが発生するまで時間がかかります。この場合、dom:loadedイベントを利用すると、ユーザビリティが向上します。ただし、ブラウザの仕様によって動作のタイミングは違います。
HEAD <!-- JS --> <script type="text/javascript" src="prototype-1.5.0.js" charset="utf-8"></script> <script type="text/javascript" src="scriptaculous.js?load=builder,effects" charset="utf-8"></script> <script type="text/javascript" src="tooltips.js" charset="utf-8"></script> <!-- CSS --> <link rel="stylesheet" href="tooltips.css" media="screen" charset="utf-8" /> HTML <ul> <li><a href="#" title="ツー
prototype.js の便利な機能に Form.serialize('フォームのid名前'); というのがありますが、これをテストしてみます。(↓添付ファイルをダウンロード後、prototype.jsを読み込ませて実行のこと) 実行してみてわかることは <textarea name="text" rows="3" id="text_id">bbb bbb bbb </textarea> のところは text=bbb%0Abbb%0Abbb%0A という値が帰ってくるということ。調べたとろ htmlファイルの改行コードが「 LF 」「 CR+LF 」「 CR 」いずれの場合も %0A になる。 id ではなく name の値でシリアライズされる。 という事みたいです。 別ウィンドウのフォームをシリアライズするには。。。 別ウィンドウの DOM document インターフェイスは var
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Sample</title> <link rel="stylesheet" href="css/main.css" type="text/css" media="all"> <script type="text/javascript" src="js/prototype.js" charset="shift_jis"></script> <script type="text/javascript"><!-- Event.observe(window, "load", fu
このページはAjaxライブラリの1つであるPrototypeライブラリ系のライブラリの各種サンプルコードを掲載しています。 ミスや間違い、リンクエラーなどがありましたらopenspc@alpha.ocn.ne.jpまでお願いします。 一般的なJavaScriptに関するサンプルに関しては以下のサイトを参照してください。 JavaScript例文辞典 JavaScript例文辞典(新) Last update : 2008/7/23 PM 3:53 2008 Copyright 古籏一浩(KaZuhiro FuRuhata) ■Accordion ライブラリを読み込む アコーディオンを表示する アコーディオンを縦に表示する(横にスライドし展開表示する) 展開速度を指定する 展開処理するためのイベントを指定する 最初に表示するパネルを指定する ■DatePicker ライブラリを読み込む カレ
JavaScriptで配列をシャッフルする話を見て、そういえばArray#shuffleは以前書いた記憶があるなーと思って調べてみたらコピペだった。 http://www.fumiononaka.com/TechNotes/Flash/FN0212002.html Fisher-Yatesというアルゴリズムだそうです。 Array.prototype.shuffle = function() { var i = this.length; while(i){ var j = Math.floor(Math.random()*i); var t = this[--i]; this[i] = this[j]; this[j] = t; } return this; } a = [1,2,3,4,5]; a.shuffle() // 3,1,5,2,4 a // 3,1,5,2,4 ごく普通に実装
昔作った文字数カウントするやつが出てきたのでメモ、 この頃はjqueryをあんまり使って無かったみたい。 Prototypeのversionは'1.5.1.1' 完成デモ demo 主なソース部分 html側 <script type="text/javascript" src="../js/prototype.js"></script> <script type="text/javascript" src="../js/text_count.js"></script> ・ ・ ・ <textarea id="tContents"></textarea> <p>現在の文字数<span id="sCount"></span>文字</p> text_count.js window.onload = function () { fCount_load(); } // ページの初期化 functi
Prototype.jsとはなにか Prototype.jsは、Sam Stephenson氏を中心とするチームによって開発されているAjax対応JavaScriptライブラリだ。単体でもAjaxian.comの2006年と2007年の調査で最もよく知られたAjaxフレームワークに選ばれるほどの人気を得ているが、実はWebアプリケーション・フレームワークRuby on Railsのプロジェクトで開発されているプロダクトであり、同フレームワークに同梱されているため、Ruby on Rails経由で使用されるケースも多い。 ライブラリはMITライセンスで公開され、ドキュメントはクリエイティブ・コモンズ(Creative Commons)ライセンスのAttribution-Share Alike 3.0で公開されている。詳細はライセンスのページで確認していただきたい。 これから6回にわたって、こ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く