忍者ブログ

カウンター

プロモーション

カレンダー

01 2019/02 03
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28

AntinomyMy の実験室

   私のWEBアプリ実験室です!

ブログ内検索

楽天でお買い物

twitter

最新トラックバック

最新コメント

忍者アナライズ

ウェザーニュース

バーコード

本を買う

アクセス解析

Google+

[PR]

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。


No Image

iScrollをjQuery Mobiel で使う場合の初期化は、$(window).load で!

JavaScript の調べ物

あれこれ、タッチ対応のスクロールバーをカスタマイズできる、
スマホ用のプラグインを探していると、
最終的にブラウザの持つ、スクロールで更新してしまう機能などと
衝突したりして、うまく使えないものもあった。

その中でiScroll というのが一番うまく動いて、
指で謎って動かしすぎた時に、裏のスクロールや
そのブラウザで他の挙動が起こったりする事ができた。

というか、数種類みたりしてみたけど、どれも優れて居そうな点はあるけれど、
何処かを多少の手間を入れて補わなければいけない雰囲気。

実は一度、jQuery custom content scroller を試したけど、
一番上まで入ってスワイプでブラウザ更新にiPod のChrome でひっかかり、
こりゃ使えないな!って思って、実装した後にこのiScroll に変えました。

これバージョンがあって
http://cubiq.org/iscroll-4
http://cubiq.org/iscroll-5
とあったので、iscroll-5 を使ってみました。

問題だったのは、タイトルにある様に、
iScrollをjQuery Mobiel で使う場合の初期化は、$(window).load で
なければ、jQuery Mobile って全てをスクリプトで処理した後で
無いのに、それを知らずに

$(document).ready
とか
$(document).on("pagecontainerchange" ~~~
を使っていて、alert()を入れてびっくり、
まだ描画が途中なのにこれらのイベントが発生しているので、
スクロールできる量、heigth とかが確定していないままで
iScroll の初期化をしていました。


なんで分かったかっていうと、
alert()をいっぱいしているサイトを見て
http://weback.net/jqm/2439/
そうか、こうなったら知りうる限りalert() しちゃえば、
どうなってるかそこでコマ切れで見られる!!!
って単純な発想で、既存のスクリプトに付け加えたりしてみました。

//------------------------------------------------------------------------
$(document).ready(function() {
alert("document  ready");
});
$(document).load(function() {
alert('document  load');
});
$(window).load(function() {
alert('window  load');
});
$(window).ready(function() {
alert('window  ready');
});

//サイトにあったのとか、+アルファ
$(document).on("pagecontainerload", function(e,d){
alert("pagecontainerload - ページロード完了後 - ページ遷移で発生");
});
$(document).on("pagebeforecreate", function(e,d){
alert("pagebeforecreate - ページ初期化前 - ページロード/ページ遷移で発生");
});
$(document).on("pagecontainerbeforehide", function(e,d){
alert("pagecontainerbeforehide - 前ページの非表示前 - ページ遷移/リターンで発生");
});
$(document).on("pagecontainerchange", function(e,d){
alert("pagecontainerchange - ページ変更後 - ページロード/ページ遷移/リターンで発生");
});
$(document).on("pagebeforecreate", function(e,d){
alert("pagebeforecreate - ほとんどのプラグインの自動初期化の前、ページ初期化処理の最初に発生する。 - ページロード/ページ遷移/リターンで発生");
});
$(document).on("pagecreate", function(e,d){
alert("pagecreate - Ajaxであるかどうかにかかわらず、ページがDOMに生成されたときに発生する。 - ページロード/ページ遷移/リターンで発生");
});
$(document).on("pagecreate", function(e,d){
alert("pagecreate - jQuery Mobile のロードが終わった時点で発生する - ページロード/ページ遷移/リターンで発生");
});
$(document).on("pagecontainerbeforechange", function(e,d){
alert("pagecontainerbeforechange - ページロードあるいはページ遷移前と、ページロードが成功して完了した後の2回発生する。 - ページロード/ページ遷移/リターンで発生");
});
$(document).on("pageinit", function(e,d){
alert("pageinit - ページの初期化が完了した後 - ページロード/ページ遷移/リターンで発生");
});
//------------------------------------------------------------------------

これだけで順番が分かったので、改めて、windows.load が一番最後に発生する!って思いました。
ただjQuery のラッパー込みで読み出しているので、jQuery ですが。




私の場合、スクロールバーをカスタムしているので
$(window).load(function() {
myScroll = new IScroll('#menu_scroll_contents', {
// scrollX: true,
scrollbars: 'custom', //カスタムの見栄えを使う
click: true,
mouseWheel: true, //マウスホイールでの操作を有効
keyBindings: true, //キーでの操作を有効
interactiveScrollbars: true, //内部の移動とバーの移動が正比例か反比例か?(ture=正比例)
fadeScrollbars: true //動かすと現れて、止めると消えるスクロールバー
});
});

にして動きました!

$(document).ready
とか
$(document).on("pagecontainerchange" ~~~
だと、スクロール量も表示の大きさもおかしかったので
うまくいってよかったのと、改めて、イベントのタイミングを
見直せたかな?と思いました。

以上、何時もの様にメモでした<_ _>

追伸:
他の参考サイト
http://weback.net/jqm/2433/
http://www.buildinsider.net/web/jquerymobileref/35

iscrollview(プル機能)
GitHub
これもiScroll の拡張で、そのブラウザが邪魔してた部分、
リロードになってたけれど、そこを好きな機能、中身だけ更新とか
新しい情報を読み込む挙動をJavaScirpt で作れるのでいいな!と思ったので
これもメモです。


拍手[0回]

PR

No Image

jQuery のvalidate.js でformat 関数の使い方いはまった

JavaScript の調べ物

今回はjQuery のフォームチェック(バリデーション)のプラグインである
validate.js の話

validate.js はブラウザ上でフォーム入力をチェックするものであるが
細かく思ったより設定して使う事が可能である

例えば、remote() を遣うと、
フォームの入力をそのまま指定のAPIサーバー(サーバーサイドプログラム)に
内容を送り付けて、サーバー上のDBなどや、リアルタイムな処理を用いて
フォームの入力チェックが有効かどうかを知る事ができる(自分へのメモなんですけどね^^;)

さて、今回はこのvalidate.js のformat() です。

これをネット上で使い方の参考を見ていると
例えば
$.validator.format("{0} is not a valid value");
とか
jQuery.format("{0} is not a valid value");
とか
なんだけど、これだとなぜかうちの環境で動かない!!(’Д’#)
理由が分からないから、そもそもこのformat() は、何処から継承されてるの?
と思って調べたら普通にvalidate.js に実装されている機能っぽい
http://jqueryvalidation.org/jQuery.validator.format/

それには
Example:
の部分に
jQuery.validator.format("{0} is not a valid value");
と書いてあるのでその通りに書いてみた。

すると。。。。動いた^w^;

うーん・・・・
よくある、よくあったら困る様な固有な書き方とか、
何かを回避する為に、$やQuery って書く書き方をしてるのだろうか?

不思議だけど、平然とどのサイトもその様に書いている・・・

私の場合には、
jquery-1.11.2.min.js

jquery.mobile-1.4.5.min.js

jquery.validate.1.13.1.min.js
を順に読み込んで使っていた環境での出来事

特に何かした覚えはないんだけどな・・・

普通に考えてそうだと思うけど、人のサイトの多くで
jQuery.validator
とは書いてない

あと私の環境では、試しに書いたjQuery を$ にした
$.validator.format("{0} is not a valid value");
でも動いた

なんだろう、みんなどうしてそんな書き方しちゃってるんだろう・・・

私の使い方が悪いのか?w

なんだろう、なんだろう・・・なんだろう・・・どうしてなんだろう・・・・


そのうち分かる日が来る・・・のかもしれないw

因みに私は勿論json で設定しているので
使っている部分のサンプルは、
フォームの郵便番号に対しては下記の様にしています(他の部分は紛らわしいので載せてないよ!)
{
rules: {
zipA :{
required: true,
minlength: 3,
maxlength: 3,
digits: true
},
zipB :{
required: true,
minlength: 4,
maxlength: 4,
digits: true
}
},
messages: {
zipA :{
required: "郵便番号上3桁は必須です",
minlength: jQuery.validator.format("{0} 文字以上を入力してください"),
maxlength: jQuery.validator.format("{0} 文字以下を入力してください")
},
zipB :{
required: "郵便番号下4桁は必須です",
minlength: jQuery.validator.format("{0} 文字以上を入力してください"),
maxlength: jQuery.validator.format("{0} 文字以下を入力してください")
}
},
errorPlacement: function (error, element) {
error.appendTo(element.parent().parent().last());
}
// ,
// submitHandler: function (form) {
// $(':mobile-pagecontainer').pagecontainer('change', '#success', {
// reload: false
// });
// /* サンプル */
// $('body').pagecontainer('load', 'change_linked.html');
// return false;
// }
}


フォームのinput でminlength="x" maxlength="x" としておけば、HTML5 の処理で
Chrome で確認した限り、思った通りに動いてました
(この場合ではx は3 か4 という事になります)

毎度ながら個人的なメモでした<_ _>







拍手[1回]


No Image

jQuery Mobile 1.4.5 listview css 高さがおかしい(heightじゃなくline-height が主な原因)

JavaScript の調べ物


jQuery Mobile のサンプルを
http://demos.jquerymobile.com/1.4.5/listview/index.html

より
Count bubbles やSplit buttons のサンプルを「View Source」ボタンを押して
そのまま試してみた。(jQuery Mobile のcss やJavaScirp は導入しているのが前提で話をしています)

するとなぜか、height が2倍になってしまう、
この現象はFireFox とChrome で確認している。

しかしなぜそうなるのか特定するのに時間がかかったが、
どうも親要素li 要素が持つ.ui-listview, .ui-li-has-count, .ui-li-has-alt にあたるクラスの
line-height がnormal になっているのが問題みたい。

line-height なんて滅多に使わないので、値の設定に困るが、とりあえず0 にしたら大凡
Count bubbles の方のサンプルは治った。

/* listビューのバグ取り */
.ui-listview, .ui-li-has-count, .ui-li-has-alt{
line-height: 0;
}

しかしどうも、FileFox の方だけSplit buttons の方だけどうも
どうしても.ui-btn の下に隙間が出来てしまう。

理由は不明だが、Firefox はバージョンが変わると
バグが治ったり、新たな見栄え上のバグが出来たりと
しょっちゅうある事なので、とりあえず今回は放置すると思います(気になったら調べるけど)

メモでしたorz

追伸:
解決出来ました!

/* listビューのバグ取り */
.ui-listview, .ui-li-has-count, .ui-li-has-alt{
line-height: 0;
}
/* listビューのバグ取り(FireFox 用、IEとCrome は使っても使わなくても変化なし) */
.ui-listview > .ui-li-static {
    padding: 0;
}
/* listビューのバグ取り(FireFox 用、IEとCrome は使っても使わなくても変化なし) */
.ui-listview > li h1, .ui-listview > li h2, .ui-listview > li h3, .ui-listview > li h4, .ui-listview > li h5, .ui-listview > li h6 {
margin: 0;
}

これでいけました(^ω^)ノ

拍手[1回]


No Image

遠い祖先(親の親xn)から見た その子の要素は何番目かを知る(jQuery)

JavaScript の調べ物

前回、
jQuery 先祖要素が、そのまた親から見て何番目か調べる、現在の何世代も上の親で何番目か? (親の親要素は何番目?)
という記事を書いたが、結果的にこの関数をつかっていたので、
追加としてメモ

/* 遠い祖先(親の親xn)から見た その子の要素は何番目かを知る */
function progenitorChildrenLength(progenitorName, childName, thisValue){
return $(progenitorName).children(childName).index($(thisValue).parents(childName).get(0));
}

上記の関数を使えばいいです。

progenitorName は、知りたい要素の親がいる、そのまた親の名前が入ります。

chidName は何番目か知りたいidやらclass の名前を入れます、
'#id'やら'.class'、もしくはそれらが入った変数です。

thisValue はthis で得られた自身のポインタです。

メモでした、お粗末<_ _>

追伸:

これ上記の関数であると、親の親がクラスで同じ名前の親がいると
うまく動かないです。

なので変えました、そしてLength も名前的に変なので
jQuery のindex が元なので名前も変えました。

/* 遠い祖先(親の親xn)から見た その子の要素は何番目かを知る */
function progenitorChildrenIndex(progenitorName, childName, thisValue){
return thisValue.parents(progenitorName).children(childName).index($(thisValue).parents(childName).get(0));
}

上記であればいいんでないでしょうか?

拍手[0回]


No Image

jQuery 先祖要素が、そのまた親から見て何番目か調べる、現在の何世代も上の親で何番目か? (親の親要素は何番目?)

JavaScript の調べ物

自身のかなり上方の祖先である親は、そのまた親要素で何番目なのか?
親の親は何番目?という簡単そうで難しかった・・・

くだらない事で2日も費やしたのでメモ・・・


こんな環境のHTMLである

<div "~~何処か~~">
 <div class="oya_no_oya">
  <div class="uenohouno_oya">
   <div>....(div が何階層もあるイメージ)
        <div class="targetChilled">対象の子供<div>
   </div>.... (何階層もあるのを終了する)
  </div>
 </div>
</div>

上記の様な構図で、子供である.targetChilled がクリックされたときなどに、
その子供が含まれる.uenohouno_oya 要素はoya_no_oya 要素で何番目なのか?
という事が知りたい!!!

○まずミスケース、removeからテストしていたので
$('.export-rule-delete-button').click(function (){
 $(this).parents('.uenohouno_oya').remove();
 alert($('#export-rule-item-area').children('.uenohouno_oya').index($(this).parents('.uenohouno_oya')));
}

this ポインタを使いたい場合には、this はremove などが
入っているとthis の内容まで変化して使えなくなっていることに気がつかなかった・・・(2日も)


○動く様にすると
$('.export-rule-delete-button').click(function (){
 alert($('#export-rule-item-area').children('.uenohouno_oya').index($(this).parents('.uenohouno_oya')));
 $(this).parents('.uenohouno_oya').remove();
}

やはりremove は後でなければいけない、もしくは$(this)を
thisObj =$(this)で変数にでも入れて、保存して、それを用いれば
this の値が変わっても使える

○あまり意味があるかどうか分からないが
$('.export-rule-delete-button').click(function (){
 alert($('#export-rule-item-area').children('.uenohouno_oya').index($(this).parents('.uenohouno_oya').get(0)));
 $(this).parents('.uenohouno_oya').remove();
}

.get(0) を追加しておいてみた、理由は
$(this).xxx() で取得した内容は、add()などを含み、ほぼ多くの場合で
中身がdocument 要素から取得したDOMではないので、
オブジェクトの比較に使えない場合もあるかもしれない場合も
もしかしてあるかもしれない?と思ったから、でも必要無いかも。
○動く様にすると
の部分で完成でいいかもしれない。

参考(結果的にあまり使わなかったが良かった参考リンクメモ)
jQueryオブジェクトの比較
jqueryオブジェクトを比較する時はDOMエレメントを比較しよう
JavaScript - jQueryオブジェクトの比較 - Qiita
jQueryオブジェクトの比較 - paranitips

追伸:
これ、また続きを作りました・・・済みませんorz
遠い祖先(親の親xn)から見た その子の要素は何番目かを知る(jQuery)
というか、次のブログへ見に行ってもらうのも気が引けるので
結果だけこっちにも残します(詳しくなんでこうなったか知りたい方は上記をどうぞ^^;)

以下結果
↓↓↓↓↓↓↓↓↓↓↓↓↓↓
/* 遠い祖先(親の親xn)から見た その子の要素は何番目かを知る */
function progenitorChildrenIndex(progenitorName, childName, thisValue){
 return thisValue.parents(progenitorName).children(childName).index($(thisValue).parents(childName).get(0));
}






拍手[1回]


[PR]