NP_znItemFieldEX の改造メモ

  • 投稿日 : 2009-12-20, 16:45（最終更新日時 : 2010-02-21, 02:46）
  • タグ（HTML）
  • カテゴリ（Nucleus Plugin）
  • 記し人（luvsic）
  • 閲覧数（82）
  • test null 13
  • test 1-3
  • test 2-3

多分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


Copyright © Luvsic. Some rights reserved.