スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。



mirrorMan - コンボボックス風フォーム2

2ではソースの抜粋です。

右クリックメニューを表示するプラグインを読み込みます。
<script type="text/javascript" src="jquery.contextmenu.r2.packed.js" defer></script>

アドレスバー領域の要素です。
<span id=LftPthLst></span><span id=LftPthBox></span>

メニュー内容を作成します。class属性の指定で、プラグインによって起動後には非表示になります。
<div class="contextMenu" id="conMenuToAddBar">
<ul>
<li id="pasteToAddBar">貼り付け</li>
<li id="cpoyFrmAddBar">コピー  </li>
</ul>
</div>
右クリックメニュー項目選択時の処理です。色分けしたid属性値がひもづいています。
$('#LftPthLst').contextMenu('conMenuToAddBar',{
bindings:{
'pasteToAddBar': function(t){
switchPathBoxBtn(LftPthBox, clipboardData.getData("Text"));
},
'cpoyFrmAddBar': function(t){
clipboardData.setData("Text", LftPuldwn.options[LftPuldwn.options.selectedIndex].value);
}
}
});

function loadAdrBarItms(num,flg){
var resv = (new RegExp).compile(/^(\\\\.+\\)(.+?\\)/);
var relo = (new RegExp).compile(/^([A-Z]:\\).+(\\.+?)(\\.+?\\)/);
if(flg < 2){
var lHTML ="<select id=LftPuldwn class=lst0 onChange=chgLst(this.options[this.options.selectedIndex].value,0)>";
var itm,arLft = (new VBArray(dicLstLft.Keys())).toArray();
for(var i in arLft){
itm = String(dicLstLft(arLft[i]));
lHTML +="<option id='"+ arLft[i] +"' value='"+itm+"'>"+itm.replace(resv,'\\\\..\\$2').replace(relo,'$1..$3');
} lHTML +="</select>";
LftPthLst.innerHTML = lHTML;
var elm = document.all[arLft[num]];
elm.selected = true;
LftPthBox.innerHTML ="<input type=text class=txt0 id=LPthTxtBox value='"+ elm.value +"'>";
LPthTxtBox.size = (new String(elm.value)).length;
}
if(flg > 0){
var rHTML ="<select id=RhtPuldwn class=lst2 onChange=chgLst(this.options[this.options.selectedIndex].value,2)>";
var itm,arRht = (new VBArray(dicLstRht.Keys())).toArray();
for(var i in arRht){
itm = String(dicLstRht(arRht[i]));
rHTML +="<option id='"+ arRht[i] +"' value='"+itm+"'>"+itm.replace(resv,'\\\\..\\$2').replace(relo,'$1..$3');
} rHTML +="</select>";
RhtPthLst.innerHTML = rHTML;
var elm = document.all[arRht[num]];
elm.selected = true;
RhtPthBox.innerHTML = "<input type=text class=txt2 id=RPthTxtBox value='"+ elm.value +"'>";
RPthTxtBox.size = (new String(elm.value)).length;
}
}
プルダウンリストとテキストボックスの両方のhtmlを記述しています。とくにモダンなことはしていません。仕事場なんかだと長いフォルダ名や深い階層が多いので、パスを省略表示するための正規表現をfor文の中で何回も(リストの項目数分)使用するので、あらかじめ内部形式にコンパイルしているくらいでしょうか。あとは、パラメータ変数flgは左ペインなら0、右ペインなら2、両方なら1という値で左右の処理の有無を分けています。テキストボックスの幅は、文字数から求めています。
$(LftPthBox).toggle();
起動時はプルダウンリストのみを表示するので、テキストボックスを格納するspan要素はtoggle()メソッドで非表示にします。
function switchPathBoxBtn(elm, clp){
if(/^L/.test(elm.id)){
var box=LftPthBox, tox=LPthTxtBox, lst=LftPthLst, dwn=LftPuldwn;
}else{
var box=RhtPthBox, tox=RPthTxtBox, lst=RhtPthLst, dwn=RhtPuldwn;
}
if(box.style.display == "inline"){
box.style.display ="none";
lst.style.display ="inline";
}else{
box.style.display ="inline";
tox.value = clp || dwn.options[dwn.options.selectedIndex].value;
tox.width = lst.offsetWidth;
lst.style.display ="none";
txtBoxFocus(tox);
}
try{ resizeTo(currentWindowSize.width,currentWindowSize.height) }catch(e){}
winPositionize();
}
プルダウンリストとテキストボックスを切り替えるメインです。上で使っているjQueryのtoggle()を使えばいいかとも思いますが、toggle()はvisibiltyで切り替えているのでノードオブジェクト自体は消されません。起動時はむしろこっちのほうが安全ですが、displayプロパティならノードオブジェクトも消えるので、自前でやるならこっちのほうが安定するという意図です。
左ペインの処理か右ペインかでhtmlノードオブジェクトをそれぞれひとつの変数に格納して、displayプロパティを切り替えます。
テキストボックスの値は、右クリックメニューで貼り付けを選択された場合にパラメータでクリップボードデータが渡されていればそれを、なければプルダウンリストで選択されている値です。最後の2行は、画面の位置とサイズを調整する呼び出しです。HTAの場合、resizeTo()処理時にマウスのボタンが押されたままの状態だとエラーになるので、try{}catch{}で逃がします。

「 HTMLでコンボボックス風に マウス長押しで切替えてみる」も。
スポンサーサイト



trackback


この記事にトラックバックする(FC2ブログユーザー)

mirrorMan - コンボボックス風フォーム3

ソースの追加です。 selectタグをinput type=textに切り替える場合、表示文字列であるselectedIndex.lengthからテキストボックスのsizeを求めていたのですが...

comment

Secret

while(aho.atEndofStream)

笹部 政宏
笹部 政宏
mail




フリーソフツ
Category
はてブ
Monthly Archive
New Entry
New Comment
New Trackback
RSS
Copyright © Kittens flewby me All Rights Reserved.

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。