diary : Hisato's twits ...

Enhancing Forms using jQuery UIを修正してみた。

Enhancing Forms using jQuery UIを修正やらなんやらしてみたので放り投げ。
気になったとこなおした結果基本ここのコメントで投げつけられてるとこ対処しただけになったとかもいうけどw

ということでコメントをひろいまして。
重傷なところから。

radio複数チェックできるんだけどー!

内部処理は動いてんだけど表示が解除されてない模様なので関数追加して選択分のスタイル解除。
ファイルの一番下にでも足すといいんでなかろうか。


/**
 * ラジオ選択を解除
 */
function reset_radio(element){
		var f_name = $(element).attr("name");
		var radio_chk = $("input:[name='"+f_name+"']:checked");
		var parent =	radio_chk.parent("label").next();
		parent.removeClass("ui-state-active");
		parent.children().removeClass("ui-icon-bullet");
		parent.children().addClass("ui-icon-radio-off");
}

選択解除関数追加したらradio:function(element)内のクリックイベント内で呼び出し。
line:139あたりかな?


parent.parent("span").click(function(event){
reset_radio(element); // 選択状態解除追加
$(this).toggleClass("ui-state-active");
(略)

reset押してもradioとcheckboxがリセットされぬ!

これも表示部分の問題で内部では動いてるのでスタイル解除。
buttons:function(element)内のreset部分で処理書かれてないのでここを修正。
line:100かな?


else if($(element).is(":reset")){
	$(element).bind("click",function(event){
		// スタイル解除
		$("input:checkbox").each(function(){
			var parent =	$(this).parent("label").next();
			parent.removeClass("ui-state-active");
			parent.children().removeClass("ui-icon ui-icon-check");
		});
		$("input:radio").each(function(){
			var parent =	$(this).parent("label").next();
			parent.removeClass("ui-state-active");
			parent.children().removeClass("ui-icon-bullet");
			parent.children().addClass("ui-icon-radio-off");
		});
	});
}

select開きっぱなしだけど?

それはコメント内で解決してる人がいたのでご紹介。
[JavaScript] Fix for enhancing-forms-using-jquery-ui – Pastebin.com
selector:function(element)部分だけごっそりコピペで貰ってくればいいんじゃないかなと。

selectで初期値選択されてないよ!

それもコメントで解決してる人がいたのでご紹介。
[JavaScript] Tweeked version of Enhancing forms – Pastebin.com
これのline:125-128をぺたっとするといいです。

label対応してる?

してない。
てかサンプルのhtmlにlabel書かれてないし妙な使い方するlabel追加してるし。
、、、うん。ということでなおします。
まず各form要素をlabelで囲ってるのでそれをとめます。
line:16かな。
消してもいいしコメントアウトしてもいいです。
<label><input /></label>とかなるのちょっとよくわからない。
いやhtmlとしてはあってるんだけどラベル情報ありもしない状態ってのはどうなの。
おいといて。


//$(this).wrap("<label />");

labelくくり止めた後問題でるのはradioとcheckbox。
なのでここも変えます。
<label><input /></label>から<span><input /></span>に。
まずはcheckboxes:function(element)から。
line:110付近。


//$(element).parent("label").after("<span />");
//var parent =  $(element).parent("label").next();
// 一旦checkboxをspanで囲う
var f_name = $(element).attr("name");
$(element).wrap("<span class='ui_checkbox_"+f_name+"' />");
$(element).parent("span.ui_checkbox_"+f_name).after("<span />");
var parent =	$(element).parent("span.ui_checkbox_"+f_name).next();

次radio:function(element)も同じようにspanでくくってparentの呼び方を変えます。
line:129付近。


//$(element).parent("label").after("<span />");
//var parent =  $(element).parent("label").next();
// 一旦radioをspanで囲う
var f_name = $(element).attr("name");
$(element).wrap("<span class='ui_radio_"+f_name+"' />");
$(element).parent("span.ui_radio_"+f_name).after("<span />");
var parent =	$(element).parent("span.ui_radio_"+f_name).next();

【注意】コレにしたときradio選択解除関数(reset_radio)のparent呼び出しも変わってくるので一緒に変えてください。


//var parent =	radio_chk.parent("label").next();
var parent =	radio_chk.parent("span.ui_radio_"+f_name).next();

さて。
labelを自動でつけるとかしないけど書いてある分に関しては反応するように変えましょう。
そうしましょう。
まずはcheckboxes:function(element)。
これの最後にでも足します。
line:126あたりに。


// labelも対象に
var label_id = $(element).attr("id");
if(label_id){
	$("label:[for='"+label_id+"']").css("cursor","pointer");
	$("label:[for='"+label_id+"']").click(function(event){
		$("input:checkbox#"+label_id).prev("span").toggleClass("ui-state-active");
		parent.toggleClass("ui-icon ui-icon-check");
		$(element).click();
	});
}

続いてradio:function(element)。
これもここの最後に足します。
line:144あたり。


// labelも対象に
var label_id = $(element).attr("id");
if(label_id){
	$("label:[for='"+label_id+"']").css("cursor","pointer");
	$("label:[for='"+label_id+"']").click(function(event){
		reset_radio(element);
		$("input:radio#"+label_id).prev("span").toggleClass("ui-state-active");
		parent.toggleClass("ui-icon-radio-off ui-icon-bullet");
		$(element).click();
	});
}

コメントで言われてるのこんなところかな。
あぁキーボードつかえねー!って言われてるけど一旦スルー。
[JavaScript] Tweeked version of Enhancing forms – Pastebin.com
とかで出来るんじゃないかな?
試してないけど。
その他コメントで言われてないけどなんか諸々。

select開いたあと他の場所クリックしても閉じないよこいつ!

画面いっぱいにレイアー足してそこのクリックイベントで消すとかしましょう。
selector:function(element)のクリックイベント内にていていと。
line:156かな?
修正版に置き換えてたら対応行探してください。
修正版なら足す場所slideToggleの下でもいいかも。


$(parent).next("ul").find("li").click(function(){
$(element).val($(this).html());
$("#ui_form_overlay").remove(); // 追加レイヤー削除

続けてレイヤー追加処理を足します。
line:161あたり。


$(parent).click(function(event) {
	$(this).next().slideToggle('fast');
	event.preventDefault();
	// 画面外クリックで閉じる
	if($("#ui_form_overlay").size() === 0){
		$("body").prepend("<div id='ui_form_overlay'></div>");
		var ol_css = {
			position:"fixed",
			top:"0px",left:"0px",
			width:"100%",height:"100%",
			"z-index":"49"
		}
		$("#ui_form_overlay").css(ol_css);
	}
	$("#ui_form_overlay").click(function() {
		$(parent).next().slideUp('fast');
		$("#ui_form_overlay").remove();
	});
});

captachaの利用オプションにならんの?

やりましょう!(禿風に
line:38-69までをifってやればいいです。


if(this.options.captacha){
	var div = jQuery("<div />",{
	(略)
	$("#droppable").droppable({
		(略)
	});
}else{
	// submitのロック解除
	form.find(":submit").removeClass('ui-state-disabled').unbind('click');
}

オプション初期値設定。
line:4-5の間。


$.widget("ui.form",{
	options: {
		captacha : true
	},
	_init:function(){

trueなので初期値は使用するです。
falseにしておけば使用しないが初期値になります。
これで呼び出すときに下記の用にすればおけい。


$("form").form({
	captacha:true
});

name違いのform置いた時にそれぞれcaptacha置けないの?

親子仲良くさせましょう。
line:62かな。


//$("#droppable").droppable({
$(form).find("#droppable").droppable({

あー時間かかった。
まぁ大体はなんとかなったんじゃなかろうかと。
まだなんかあったら変えてこう。うん。
てか誰かもう修正あげてるんじゃないの、、、とは途中で思ったけど途中じゃ辞めるのもめんどくさいしねぇw

About Archive

Categories:

Recent Posts:

Tag Cloud:

Meta: