jQuery UIのウィジェットの１つ、Tabsです。
タブコントロールを実現するライブラリです。 解説ページを参考に導入したのですが、一部の修正が必要だったのでメモっておきます。
参考ページは以下の通りところでこのWordPress、いつのまにかピンバックを送るフォームが消えてるんですけど、どこで設定するんでしょう… WordPressってどんどん使いにくくなる印象なのですが、クラシックモードとか無いのでしょうか。
次のようなURLがあったとします。
「http://www.printry.jp/product/category/detail.php?product_category_id=15#productId193」
これをパースしていろいろ弄りたいのですが、
「?」で分割して、右側を「&（&）」で分割して、「=」で分割して…
というのが何をやっているのか一目瞭然なのですが、次の方法があるようです。
var elm = document.createElement('a');
elm.href = 'http://www.printry.jp/product/category/detail.php?product_category_id=15#productId193';
console.log(elm.hostname);
// www.printry.jp
console.log(elm.pathname);
// /product/category/detail.php
console.log(elm.search);
// ?product_category_id=15
console.log(elm.hash);
// #productId193
これはなるほど、DOMに丸投げというわけですね。
カッコよく決まってデメタシデメタシ。
印刷用に画像を用意する場合、サイズの計算が少々面倒です。
仕上げサイズ？解像度？塗り足し？
一気に解決できるツールをご用意しました。
その名もまんまの「印刷用画像サイズ計算」です。
計算はJavascriptで行います。
全体では10分ぐらい要したと思います。
印刷注文は、管理人が運営するプリントライまでどうぞ。
ブラウザで管理画面にアクセスする場合、フレームにするとだめだとか、新しいウィンドウをポコポコこさえるなとか言われます。
けれど、何気にフレームが便利だったり、window.openがあちこちに出現するものです。
どうしてもこうなってしまう場合は、子ウィンドウで親ウィンドウを、親ウィンドウで子ウィンドウを追跡できるようにしておくと、どこかで救われるかもしれません。
必要な場面としては、レコードのリストを表示して、指定したレコードを編集する子ウィンドウを開いて、編集が完了したら子ウィンドウを閉じて親ウィンドウを更新する、などなど。
子から見た親はwindow.openerで何とかなりますが、親から見た子はウィンドウ名を持っておく必要があって、ちょっと面倒ですね。
DOMのchildNodesみたく、childWindowsとかあれば楽なんですが。
ファイルアップロードのはなしです。
ファイル選択が面倒なので、D&Dでできないかと相談されました。
まず思い立ったのがFlashを使ったもの。
しかし、サポートを狭めていく落ち目のFlashはあまり乗り気がしません。
適当に調べてもプログレスバーが表示できるという売りしか見つかりませんでした。
時代はHTML5に移って行くし、そっちの方向で何かないか調べてみました。
適当に検索ワードを入力して見つけたのが、html5uploaderと、ｊQuery File Uploadの2つ。
結局はどちらも、W3CのFile APIが基のようです。
この2つのデモ画面から動作確認したところ、正常に機能したのはFirefox、Chrome、Safariでした。
IEとOperaは動きませんでした。
結局は、<input type=”file” name=”files[]”>で妥協するしかなさそうです。
フォームでちょっとゴニョろうとしまして、パーツが何番目にあるのか取得する必要が出てきました。
ちょっとだけ調べてみましたが、ズバリそのものを取得できるメソッドがないようです。
document.form(0).item(0).focus()みたいに、指定は出来るんですが、オブジェクトから逆引きが出来ないみたいです。
ライブラリにあるとは思うんですけど、それっぽいのが見つからず、コード自体も大したことないですし、自前で用意してみました。
やり方は簡単、パーツを順番に走査するだけ、こんな感じ。
function getNumberByItem( itemObj ){
var formObj = itemObj.form;
for( var i = 0; i < formObj.length; i++ ){
if( itemObj == formObj[i] ) return i;
}
return null;
}指定されたオブジェクトの種類の確認もつけておけば安心ですね！
FLASHに頼らずJavaScriptで画像なとを扱うツールをこさえているのですが、IE7では問題なかったものがIE8でおかしくなっている。
IE8に搭載されているIE7互換モードでもだめ、どうやら純粋なIE7のレンダリングエンジンではないようだ。
問題となっているのは、非同期でimageを読んで表示を更新するものだけど、imageオブジェクトでcompleteがtrueになっているにもかかわらずwidthとheightの値が更新されていない。FirefoxやOpera、safariではもちろん正常に機能する。だめなのはIE8のみ。IE7を信じて調整を行って損した。
これからは絶対にIEを信じることはないだろう･･･
ブラウザの履歴操作をイベントとして捕捉しようと調べていましたが、
ブラウザによってwindow.onunloadの挙動が微妙に違うようです。
| ブラウザ | 戻る | 更新 | 進む | 閉じる（タブ） | 閉じる（ウィンドウ） |
|---|---|---|---|---|---|
| Internet Explorer 7.0 | 〇 | 〇 | 〇 | 〇 | 〇 |
| Firefox 2.0 （lolifox0.3.6） |
〇 | 〇 | 〇 | 〇 | 〇 |
| Firefox 3.0 | 〇 | 〇 | 〇 | 〇 | 〇 |
| Opera 9.51 | × | × | △ （ブラウザの進む機能は無効） |
× | × |
| Google Chrome ベータ | 〇 | 〇 | 〇 | 〇 | 〇 |
細かい仕様は確認していませんが、Operaはスクリプターにとってはあまり歓迎されない実装をしているようです。
（※この比較表は、ブラウザの履歴機能と、HTML内のち通常リンクで検証しており、historyオブジェクトによるページ推移は考慮されていません。）