jQueryサイト:addメソッドのページをさらに修正

昨日のaddメソッドの修正ですが、わたしの理解が浅く正しい説明になっていませんでした。ですので、さらに修正しました。以下の3項目が変更箇所です。
変更箇所→HTML上の並びに従う
変更箇所→ 配置されていない要素はaddした順に
変更箇所→セレクタエンジンの仕様
 

追記

上記の文言を微妙に修正「削除」→「HTML上から外す」。
あとremoveメソッドにメモを追加しました。
変更箇所→削除しても存在している
 

メモ

あとjQueryのセレクタエンジンのSizzleについて調べていたらメモしたほうが良さそうなページがあったのでメモ。とくにスマホでのパフォーマンスの記事。
→参考:console.lealog();様「jQueryとSizzleの関係について
 
 
 

jQueryサイト:addメソッドのページを修正

jQuery入門講座の読者様より、サンプルが機能せずページの内容に誤りがあると指摘がありましたので、本日修正させていただきました。
ご連絡ありがとうございました。
 

addメソッドのv1.9における仕様変更

内容に誤りがあったのはaddメソッドの項目で、v1.9とv1.8の仕様が異なる点を説明する部分でした(すでに修正済み)。
→jQuery入門講座「addメソッド」-v1.9での仕様変更
 
この修正に伴い、項目を1つ追加しました。
→jQuery入門講座「addメソッド」-新規に作成する要素の順番についての仕様変更
 
 
————-
ほかにも内容に誤りがありましたら、ご連絡いただけると幸いです。
メールの「info@designdrill.jp」だけでなくブログのコメントへのご連絡でも構いません。
これからもよろしくお願いいたします。
————-
 
 

jQueryでセンタリング

いろいろな企業のサイトのソースを眺めていたら、CENTER ELEMENT PLUGINなる
プラグインが気になったのでメモ。このプラグインを利用すれば簡単に要素を
センタリングすることができます。左右中央はcssで簡単にできますが、
上下中央はいろいろ大変なようなので、これに頼ってしまうのも良いかもしれません。
スマートフォン(iOS,Android)でも動作します。 
CENTER ELEMENT PLUGINのダウンロードページ
 
 

・最小設定のセンタリング

利用方法は非常にシンプルで以下の様に設定するだけです。セレクタでセンタリングしたい
要素を設定し、それに対してcenterメソッドを利用するだけです。センタリングは
要素の親要素に対して行われます。以下のサンプルではbodyが親要素になっています。
センタリングのサンプル01

$("#testBox").center();

 
 

・上下(左右)のみのセンタリング

このプラグインは引数を設定することで、上下中央や左右中央のみにセンタリングすることが
できます。引数は以下の様にオブジェクトを作成し、それにプロパティを追加する形で設定
することに注意してください。以下のサンプルではhorizontal(水平方向)のプロパティを
falseにしているので、上下方向のみセンタリングされます。
他に設定できるプロパティはvertical(垂直方向)です。
上下のみのセンタリングサンプル

var argObj = new Object();
argObj.horizontal = false;
$("#testBox").center(argObj);	

ネット上のサンプルでは以下の様に()内に無名Objectで設定されていることが多いです。

$("element").center({horizontal:false})

おしまい
 
 
 

Adobe Edge

さてはて年度末の忙しい時期、書き溜めていた記事がほとんど尽きてしまいました。
ということで、今回も簡単な記事だけです。
 
現在AdobeがHTML5、CSS3、javascriptを利用したコンテンツを開発する
アプリ「Adobe Edge」を準備中と言うことでメモ。
参考:Adobe Edgeの検索結果
 
HTML5、CSS3、javascriptなのでスマートフォン向けのリッチコンテンツ開発にも
良いのかもしれません。
 
 
 

jQuery:オリジナルのフリック

flipsnap.jsや13_flicksimple.jsは簡単に利用できるのでオリジナルのコードを
組むつもりはないのですが、以前Android(IS11T)を購入した際に機能しなかった
オリジナルのフリックをデバッグしました。
以前の記事:iOS+jQuery:部分横スクロール(3)androidでの検証
 
原因はタップ位置を取得するコードにありました。以前のコードは以下の様に
タップ位置を取得していたのですが、この方法ではスマートフォンでのタップ位置は
取得できません。というか何故iOSだと機能するのかが不思議です。下記のように
書き換えたら、iOSでもAndroidでも正常に機能するようになりました。

click_X = eo.pageX;

スマートフォンではマルチタッチに対応しているため、どのタッチポイントの座標かを
指定する必要があり、以下の様に書かなければならないのです。

click_X = eo.touches[0].pageX;
デバッグ済サンプル
サンプル:20_original.html
※PCでは動作確認できません、jQueryのソースはhtmlに書いてあります。

 
おしまい