INPUTの有効無効。jQuery バージョン違いによる動作【JavaScript】
フォーム部品のINPUTの有効、無効の切り替えができなくなった。
無効化はできるんだけど、有効化(解除)ができない。
1.4.4で動作していたコード
$("input").attr('disabled', 'true'); //無効
$("input").attr('disabled', ''); //有効
1.8.1で動作確認
$("input").attr('disabled', 'true'); //無効
$("input").removeAttr("disabled"); //有効
これで動くようになった!
jQuery バージョン毎の違い。変更点【JavaScript】
jQuery1.4.4 + IE8以下の場合、jQueryのセレクタ周りにバグというかIEアフォ!のせいか動作が劇的に重い。
特にClass名でセレクタ指定していると半端ない。><;
たとえばtableのtdにそれぞれClassを付けて、違う動作または条件分岐を行う。
10行や20行だと問題ないように見えるが、100行ほど表示させるとハングアップするw
列数によっては50行ほどでもハングする。(どれぐらいでハングするかはPC性能にもよります)
ジーっと待っていると次の警告が。
「このページのスクリプトが、Internet Explorer の実行速度を遅くしています。~~スクリプトを中断しますか? 」
いつまでたっても処理が終わる気配がないので「はい」を選択するしかない。
まったく同じ作業をFireFoxやGoogleChromeにさせるとビックリするぐらい早い。
早いというか一瞬で表示させる。
これが起こる原因は、「JavaScriptがページの読み込み時間を遅くする理由トップ10 | ゆっくりと…」の記事内にある「#1. IEの遅いCSSセレクタ」のようだ。
しかし、仕様上どうしても100行程度の表示をさせつつjQueryでガリガリ動かしたい!というかどうにか解決しなくてはならない。
簡単・・とは行かなかったけれど簡単にいうとjQueryのバージョンを上げるしかない。
1.4.4→1.8.1に変更したところ、悩んでいたのが馬鹿らしくなるほど速度が改善した。
注意しなければならないのがjQueryの場合、廃止される関数や使い方が頻繁に変わること。
下位互換はある程度保たれてはいますが廃止されたものは使えなくなっていることもある。
ここが簡単に行かなかった原因。
参考:jQueryのソースコードを読むための参考サイト20選 - DQNEO起業日記
■各バージョンの変更点
jQuery 1.4.4 → 1.5
本家:jQuery 1.5 Beta 1 Released
本家(変更点):Version 1.5 - jQuery API
参考:jQuery 1.5の新機能: jQueryのサブクラスが作れるようになる | へびにっき
参考:PhoneGapアプリでjQuery(1.5以上)のクロスサイトなajax通信を有効にするには|開発部 in ICtriumphs
jQuery 1.5 → 1.5.1
本家(変更点):Version 1.5.1 - jQuery API
jQuery 1.5 → 1.6
本家:jQuery 1.6 Released
本家(変更点):Version 1.6 - jQuery API
参考:jQuery1.6の更新内容をまとめたよ。 | Ginpen.com
参考:2011-05-25のJS: Firefox5ベータ版リリース、jQuery1.6移行時の注意点、Jasmine×Sinon | JSer.info
参考:jQuery1.6のattr()で困ったら、1.6.1にすればいいみたい。 | Ginpen.com
jQuery 1.6 → 1.6.1
本家:jQuery 1.6.1 Released
参考:JQuery Tips:propとattrの違い | mkkn.info
jQuery 1.6.1 → 1.7
本家:jQuery 1.7 Released
本家(変更点):Version 1.7 – jQuery API
参考:jQuery 1.7の更新内容をまとめたよ。 | Ginpen.com
jQuery 1.7 → 1.8
本家:jQuery 1.8 Released
参考:jQuery 1.8の更新内容をまとめたよ。 | Ginpen.com
参考:briccolog » jQuery1.8の変更点
1.8でセレクタのエンジンSizzleを書き換えたということ。
でIEに対して早くなったのかな!イカス!!
VB2008 WebBrowser内でテキストをアニメーション・・・【CSS VB.net】
WinXPで確認したので、Vistaやwin7で同じようになるかは不明。
ネットで探しても同じような状況の報告がないので・・・・
そもそもアプリ開発者はWebBrowser内でjQueryを使ってゴリゴリ動かす人いないんだろうか(@v@;;
まぁWebBrowser使う時点で・・・って話は置いといてw
ニョキニョキ動く業務アプリがあってもいいじゃないっw
・・・さて、本題。
かなり悩んだ挙句、原因は意外と単純でした。トホホ
原因はフォントとフォントサイズにある!らしい。
IE( .Net? )のバグが仕様かメイリオでフォントサイズが18未満だとwindows95時代のフォントのようにギザギザになりますw
メイリオだけがそうなのか試してないので不明ですが。
18以上にした途端、きれいに表示されました。謎だ。
WebBrowser 内でテキストをアニメーションさせるとき、ギザギザフォントになったら
フォントサイズ18以上に設定する。
jQuery で親フレーム子フレーム間の参照、操作【JavaScript】
jQueryで親フレームと子フレーム間で関数の実行や要素の参照・設定を行うメモ。
本来はフレームなんか使わないでdiv要素なんかをゴッソリ変えるほうがスマートなんだけど
業務用しかも内容がたっぷりある場合はファイル自体が膨大になるし重くなる。
メンテも大変だしねw
当然PHPと非同期しまくりで内容によってはガリガリ動かすよりもフレームで切り替えたほうがヌルッと動く。
セキュリティや他の事情によりPHP側で出力を分けたいってときもある。
そんな時のために。(いいわけはこれぐらいでw)
子のnameやidで参照できるが、Firefoxではnameを設定していないと動作しない。
以下では子(インラインフレーム)のIDをchildframeとする。
jQuery | |||||
1.4.4 | 8 | 21 | 14 | 5.1.7 | 12 |
OK | OK | OK | OK | OK |
parent.html 親
<html>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="parent.js" type="text/javascript"></script>
</head>
<body>Parent frame.
<form>
<input type="text" id="parenttest" />
<input type="button" id="testbt1" value="test1">
<input type="button" id="testbt2" value="test2">
</form>
<iframe src="child.html" frameborder="0" id="childframe" name="childframe"></iframe>
</body>
</html>
child.html 子
<html>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="child.js" type="text/javascript"></script>
</head>
<body>Child frame.
<form>
<input type="text" id="childtest" /><input type="button" id="testbt1" value="test1">
<input type="button" id="testbt2" value="test2">
</form>
</body>
</html>
■子フレーム内の要素の操作・参照。$('要素').contents().find().~
例:ボタンクリックで子フレーム内のテキストフィールドの内容を変える。
parent.js
$(function(){
$('#testbt1').click(function () {
$('#childframe').contents().find('#childtest').val("Hello!");
});
});
■子フレーム内の関数を実行する。parent.子フレームID.$.関数名
例:ボタンクリックで子フレームのchildFuncを実行する。
parent.js
$(function(){
$('#testbt2').click(function () {
var i=1;
parent.childframe.$.childFunc(i);
});
});
child.js
(function($) {
$.childFunc = function(i) {
alert(i);
};
})(jQuery);
■親フレーム内の要素の操作・参照。$("要素",parent.document).~
例:BUTTONクリックで親フレーム内のテキストフィールドの内容を変える。
child.js
$(function(){
$('#testbt1').click(function () {
$("#parenttest",parent.document).val("Hello!");
});
});
■親フレーム内の関数を実行する。
例:親フレームのparentFuncを実行する。parent.$.関数名
child.js
$(function(){
$('#testbt2').click(function () {
var i=1;
parent.$.parentFunc(i);
});
});
parent.js
(function($) {
$.parentFunc = function(i) {
alert(i);
};
})(jQuery);
ApacheとSkypeの共存 [ Windows ]
これじゃ仕事にならないので、いろいろ模索すると・・・
スカイプ側の設定で回避できた!
[Skype]
ツール > 設定 > 詳細 > 接続
↓
「上記のポートに代わり、ポート80を使用」のチェックを外す。
↓
Skype再起動。
これで共存できるようになった。