NP_znItemFieldEX の改造メモ
- 投稿日 : 2009-12-20, 16:45
- 最終更新日時 : 2010-12-21 17:27:22（履歴）
- タグ（NucleusPlugin / HTML）
- カテゴリ（Nucleus Plugin）
- 記し人（luvsic）[PDF]
- 閲覧数（9039）
多分HTML出力の部分だけメモしておく用のエントリ
NP_znItemFieldEX var0.1alpha
Checkbox の出力を「label要素の中にフォーム部品とラベルを配置」する記法に変更する。
まずオリジナルコード
case "Checkbox": //
$fsetting = $this->preg_split_trim($row["fsetting"]);
$itemArray = $this->preg_split_trim($row_item["f__".$row["fname"]]);
$i = 0;
foreach ($fsetting as $value){
$checked = (in_array($value, $itemArray)) ? 'checked' : '';
echo '<input type="checkbox" name="f__'.$row["fname"].$i.'" id="i'.$i.'" value="'.urlencode($value).'" '.$checked.' />';
echo '<label for="i'.$i++.'">'.$value.'</label> ';
}
echo '<br />';
break;
改造後のコード
case "Checkbox": //
$fsetting = $this->preg_split_trim($row["fsetting"]);
$itemArray = $this->preg_split_trim($row_item["f__".$row["fname"]]);
$i = 0;
foreach ($fsetting as $value){
$checked = (in_array($value, $itemArray)) ? 'checked="checked"' : '';
//echo '<input type="checkbox" name="f__'.$row["fname"].$i.'" id="i'.$i.'" value="'.urlencode($value).'" '.$checked.' />';
//echo '<label for="i'.$i++.'">'.$value.'</label> ';
echo '<label>';
echo '<input type="checkbox" name="f__'.$row["fname"].$i.'" value="'.urlencode($value).'" id="i'.$i++.'" '.$checked.' />';
echo $value.'</label> ';
}
echo '<br />';
break;
znFieldEXのtype=Number にCSSのime-modeを適用し、jQuery Calculator（電卓のJavaScript）を実装
ime-modeの採用についてはFirefoxの個別記事アーカイブ Firefox 3 の修正内容のご紹介 その2 — IE 独自拡張 CSS: ime-mode プロパティのサポートを読んでおくこと。
まずオリジナルコード
case "Text": //width
case "Number": //width
echo '<input tabindex="'.$tabindex.'" type="text" name="f__'.$row["fname"].'" style="width: '.$row["fsetting"].
'px;" maxlength="255" value="'.htmlspecialchars($row_item["f__".$row["fname"]]).'" />';
break;
改造後のコード
case "Text": //width
echo '<input tabindex="'.$tabindex.'" type="text" name="f__'.$row["fname"].'" style="width: '.$row["fsetting"].
'px;" maxlength="255" value="'.htmlspecialchars($row_item["f__".$row["fname"]]).'" />';
break;
case "Number": //width
echo '<input tabindex="'.$tabindex.'" type="text" name="f__'.$row["fname"].'" style="width: '.$row["fsetting"].
'px;" class="znFEXinputTypeNum" maxlength="255" value="'.htmlspecialchars($row_item["f__".$row["fname"]]).'" />';
break;
追加するCSS
/* znFieldEX input type=text (number only field) */
.znFEXinputTypeNum {
ime-mode: disabled;
}
追加するJavaScript
jQuery(function(){
$('.znFEXinputTypeNum').calculator();
});
No comments yet