jQuery エフェクト

□未翻訳

□翻訳中

□翻訳完了（Omi Chiba）

■レビュー（細田謙二）

effects

ここで述べている基本的なエフェクトは追加のファイルを特に必要としません；必要なものは既にweb2py_ajax.htmlに含まれています。

The basic effects described here do not require any additional files; everything you need is already included in web2py_ajax.html.

HTML/XHTMLオブジェクトはそれらのタイプ（例：DIV）、クラス、idによって識別することができます。例を挙げると：

HTML/XHTML objects can be identified by their type (for example a DIV), their classes, or their id. For example:

1.

2.

<div class="one" id="a">Hello</div>

<div class="two" id="b">World</div>

これらはそれぞれ"one"と"two"というクラスに属しています。idはそれぞれ"a"と"b"という値です。

They belong to class "one" and "two" respectively. They have ids equal to "a" and "b" respectively.

jQueryでは前者を次のようなCSSに似た表記で参照できます。

In jQuery you can refer to the former with the following a CSS-like equivalent notations

1.

2.

3.

4.

jQuery('.one') // address object by class "one"

jQuery('#a') // address object by id "a"

jQuery('DIV.one') // address by object of type "DIV" with class "one"

jQuery('DIV #a') // address by object of type "DIV" with id "a"

後者は次のように参照できます

and to the latter with

1.

2.

3.

4.

jQuery('.two')

jQuery('#b')

jQuery('DIV.two')

jQuery('DIV #b')

両者を参照するには次のようにします

or you can refer to both with

1.

jQuery('DIV')

タグオブジェクトは"onclick"などのイベントに連携してます。jQueryはこれらのイベントとエフェクトをリンクできます。"slideToggle"の例を挙げます：

Tag objects are associated to events, such as "onclick". jQuery allows linking these events to effects, for example "slideToggle":

1.

2.

<div class="one" id="a" onclick="jQuery('.two').slideToggle()">Hello</div>

<div class="two" id="b">World</div>

このとき、"Hello"をクリックすると"World”が消えます。もう一度クリックすると、"World"が再度表示されます。hiddenクラスを付与するとタグをデフォルトで非表示にできます：

Now if you click on "Hello", "World" disappears. If you click again, "World" reappears. You can make a tag hidden by default by giving it a hidden class:

1.

2.

<div class="one" id="a" onclick="jQuery('.two').slideToggle()">Hello</div>

<div class="two hidden" id="b">World</div>

タグ自身の外部でアクションとイベントをリンクすることもできます。前のコードは次のように書き換えることができます。

You can also link actions to events outside the tag itself. The previous code can be rewritten as follows:

1.

2.

3.

4.

5.

<div class="one" id="a">Hello</div>

<div class="two" id="b">World</div>

<script>

jQuery('.one').click(function(){jQuery('.two').slideToggle()});

</script>

エフェクトは呼び出しオブジェクトを返すので、それらをチェインさせることができます。

Effects return the calling object, so they can be chained.

クリック時に呼び出されるコールバック関数をclickにセットする時にです。change、keyup、keydown、mouseoverなどでも同様です。

When the click sets the callback function to be called on click. Similarly for change, keyup,keydown, mouseover, etc.

全体のドキュメントがロードされた後だけJavaScriptを実行したいことがよくあります。これは通常BODYのonload属性で実現されますが、jQueryはレイアウトを編集する必要のない別の方法を提供します：

A common situation is the need to execute some JavaScript code only after the entire document has been loaded. This is usually done by the onload attribute of BODY but jQuery provides an alternative way that does not require editing the layout:

1.

2.

3.

4.

5.

6.

7.

<div class="one" id="a">Hello</div>

<div class="two" id="b">World</div>

<script>

jQuery(document).ready(function(){

jQuery('.one').click(function(){jQuery('.two').slideToggle()});

});

</script>

この無名関数の本体はドキュメントが完全にロードされ準備ができた時にだけ実行されます。

The body of the unnamed function is executed only when the document is ready, after it has been fully loaded.

便利なイベント名の一覧です：

Here is a list of useful event names:

フォームイベント

Form Events

  • onchange: 要素変更時にスクリプトが実行される

  • onsubmit: フォーム送信時にスクリプトが実行される

  • onreset: フォームリセット時にスクリプトが実行される

  • onselect: 要素選択時にスクリプトが実行される

  • onblur: 要素がフォーカスを失った時にスクリプトが実行される

  • onfocus: 要素がフォーカスされた時にスクリプトが実行される

  • onchange: Script to be run when the element changes

    • onsubmit: Script to be run when the form is submitted

    • onreset: Script to be run when the form is reset

    • onselect: Script to be run when the element is selected

    • onblur: Script to be run when the element loses focus

    • onfocus: Script to be run when the element gets focus

キーボードイベント

Keyboard Events

  • onkeydown: キーが押された時にスクリプトが実行される

  • onkeypress: キーが押されて離された時にスクリプトが実行される

  • onkeyup: キーが離された時にスクリプトが実行される

    • onkeydown: Script to be run when key is pressed

    • onkeypress: Script to be run when key is pressed and released

    • onkeyup: Script to be run when key is released

マウスイベント

Mouse Events

  • onclick: マウスクリック時にスクリプトが実行される

  • ondblclick: マウスダブルクリック時にスクリプトが実行される

  • onmousedown: マウスボタンが押された時にスクリプトが実行される

  • onmousemove: マウスポインタが動いたときにスクリプトが実行される

  • onmouseout: マウスポインタが要素の外に動いた時にスクリプトが実行される

  • onmouseover: マウスポインタが要素上を動いた時にスクリプトが実行される

  • onmouseup: マウスボタンが離された時にスクリプトが実行される

    • onclick: Script to be run on a mouse click

    • ondblclick: Script to be run on a mouse double-click

    • onmousedown: Script to be run when mouse button is pressed

    • onmousemove: Script to be run when mouse pointer moves

    • onmouseout: Script to be run when mouse pointer moves out of an element

    • onmouseover: Script to be run when mouse pointer moves over an element

  • onmouseup: Script to be run when mouse button is released

jQueryで定義されている便利なエフェクトの一覧です：

Here is a list of useful effects defined by jQuery:

エフェクト

Effects

  • jQuery(...).attr(name): jQuery属性値の名前を返します

  • jQuery(...).attr(name, value): 属性名に値をセットします

  • jQuery(...).show(): オブジェクトを表示します

  • jQuery(...).hide(): オブジェクトを非表示にします

  • jQuery(...).slideToggle(speed, callback): オブジェクトをスライドアップ・ダウンします

  • jQuery(...).slideUp(speed, callback): オブジェクトをスライドアップします

  • jQuery(...).slideDown(speed, callback): オブジェクトをスライドダウンします

  • jQuery(...).fadeIn(speed, callback): オブジェクトをフェードインします

  • jQuery(...).fadeOut(speed, callback): オブジェクトをフェードアウトします

    • jQuery(...).attr(name): Returns the name of the attribute value

    • jQuery(...).attr(name, value): Sets the attribute name to value

    • jQuery(...).show(): Makes the object visible

    • jQuery(...).hide(): Makes the object hidden

    • jQuery(...).slideToggle(speed, callback): Makes the object slide up or down

    • jQuery(...).slideUp(speed, callback): Makes the object slide up

    • jQuery(...).slideDown(speed, callback): Makes the object slide down

    • jQuery(...).fadeIn(speed, callback): Makes the object fade in

    • jQuery(...).fadeOut(speed, callback): Makes the object fade out

speed引数は通常"slow"、"fast"もしくは省略（デフォルト）されます。callbackはエフェクト処理が完了した際に実行されるオプション的な関数です：

The speed argument is usually "slow", "fast" or omitted (the default). The callback is an optional function that is called when the effect is completed.

jQueryエフェクトはヘルパーに簡単に埋め込むことができます。ビューの例を挙げます：

jQuery effects can also easily be embedded in helpers, for example, in a view:

1.

{{=DIV('click me!', _onclick="jQuery(this).fadeOut()")}}

jQueryはとてもコンパクトで簡潔なAjax libraryです；そのためweb2pyはjQueryの上層部に追加の抽象化レイヤ（後述するするajax関数を除く）を必要としません。jQuery APIはそのネイティブな形式で必要な時にアクセスでき、手軽に利用できます。

jQuery is a very compact and concise Ajax library; therefore web2py does not need an additional abstraction layer on top of jQuery (except for the ajax function discussed below). The jQuery APIs are accessible and readily available in their native form when needed.

エフェクトやjQuery APIについての詳細はドキュメンテーションを参考にしてください。

Consult the documentation for more information about these effects and other jQuery APIs.

jQueryライブラリはプラグインとユーザーインターフェースのウィジェットを使って拡張することができます。このトピックはここでは割愛します；参照76に詳細があります。

The jQuery library can also be extended using plugins and User Interface Widgets. This topic is not covered here; see ref.76 for details.

フォームの条件付フィールド

Conditional Fields in Forms

典型的なjQueryエフェクトのアプリケーションはフィールドの値によって外観を変えるフォームです。

A typical application of jQuery effects is a form that changes its appearance based on the value of its fields.

web2pyではSQLFROMヘルパーが"CSS friendly"なフォームを作成するので簡単に実現できます。フォームにはrowsを含むテーブルがあります。それぞれのrowはラベル、入力フィールド、オプション的な第3のカラムからなります。フォームの項目はテーブル名とフィールド名で厳密に指定されたidを持ちます。

This is easy in web2py because the SQLFORM helper generates forms that are "CSS friendly". The form contains a table with rows. Each row contains a label, an input field, and an optional third column. The items have ids derived strictly from the name of the table and names of the fields.

規約として、全ての入力フィールドはテーブル名_フィールド名というidを持ち、テーブル名_フィールド名_rowというidを持つrowの一部になります。

The convention is that every INPUT field has an id tablename_fieldname and is contained in a row with id tablename_fieldname__row.

例として、既婚者の場合のみ、納税者の名前とその扶養者の名前を入力するフォームを作成します。

As an example, create an input form that asks for a taxpayer's name and for the name of the taxpayer's spouse, but only if he/she is married.

次のモデルを持つテストアプリケーションを作成します：

Create a test application with the following model:

1.

2.

3.

4.

5.

db = DAL('sqlite://db.db')

db.define_table('taxpayer',

Field('name'),

Field('married', 'boolean'),

Field('spouse_name'))

コントローラーの"default.py":

the following "default.py" controller:

1.

2.

3.

4.

5.

def index():

form = SQLFORM(db.taxpayer)

if form.accepts(request.vars, session):

response.flash = 'record inserted'

return dict(form=form)

ビューの"default/index.html":

and the following "default/index.html" view:

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

{{extend 'layout.html'}}

{{=form}}

<script>

jQuery(document).ready(function(){

jQuery('#taxpayer_spouse_name__row').hide();

jQuery('#taxpayer_married').change(function(){

if(jQuery('#taxpayer_married').attr('checked'))

jQuery('#taxpayer_spouse_name__row').show();

else jQuery('#taxpayer_spouse_name__row').hide();});

});

</script>

ビューのスクリプトは扶養者名を含むrowを非表示にするエフェクトを持ちます。

The script in the view has the effect of hiding the row containing the spouse's name:

納税者が"married"チェックボックスをチェックすると、扶養者名フィールドが再表示されます：

When the taxpayer checks the "married" checkbox, the spouse's name field reappears:

"taxpayer_married"は"taxpayer"テーブルの"married"という"boolean"フィールドに関連しているチェックボックスです。"taxpayer_spouse_name__row"は"taxpayer"テーブルの"spouse_name"という入力フィールドを含むrowです。

Here "taxpayer_married" is the checkbox associated to the "boolean" field "married" of table "taxpayer". "taxpayer_spouse_name__row" is the row containing the input field for "spouse_name" of table "taxpayer".

確認と削除

Confirmation on Delete

confirmation

もう一つの便利なアプリケーションは編集フォーム上の削除チェックボックスのように、"delete"チェックボックスをチェックしたときに確認を要求するものです。

Another useful application is requiring confirmation when checking a "delete" checkbox such as the delete checkbox that appears in edit forms.

上記の例に次のコントローラーアクションを追加してみましょう：

Consider the above example and add the following controller action:

1.

2.

3.

4.

5.

6.

def edit():

row = db.taxpayer[request.args(0)]

form = SQLFORM(db.taxpayer, row, deletable=True)

if form.accepts(request.vars, session):

response.flash = 'record updated'

return dict(form=form)

対応する"default/edit.html:

and the corresponding view "default/edit.html"

1.

2.

{{extend 'layout.html'}}

{{=form}}

deletable

SQLFORMコンストラクタのdeletable=True引数は、web2pyが編集画面上に"delete"チェックボックスを表示するようにします。デフォルトはFalseです。

The deletable=True argument in the SQLFORM constructor instructs web2py to display a "delete" checkbox in the edit form. It is False by default.

web2pyの"web2py_ajax.html"は次のコードを含みます：

web2py's "web2py_ajax.html" includes the following code:

1.

2.

3.

4.

5.

6.

jQuery(document).ready(function(){

jQuery('input.delete').attr('onclick',

'if(this.checked) if(!confirm(

"{{=T('Sure you want to delete this object?')}}"))

this.checked=false;');

});

規約として、このチェックボックスは"delete"と同じクラスを持ちます。上記のjQueryコードはチェックボックスのonclickイベントと確認ダイアログ（JavaScript標準）を関連付け、納税者が承認しない場合はチェックボックスのチェックを外します：

By convention this checkbox has a class equal to "delete". The jQuery code above connects the onclick event of this checkbox with a confirmation dialog (standard in JavaScript) and unchecks the checkbox if the taxpayer does not confirm: