NP_znItemFieldEX の改造メモ

多分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();
});
/
Skooler Records

No comments yet

%3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%22%20%76%61%6c%75%65%3d%22%35%35%64%66%64%66%61%61%66%32%63%34%39%39%32%37%38%30%35%33%64%34%31%63%62%66%36%39%30%39%38%65%22%3e %3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%5f%68%61%73%68%22%20%76%61%6c%75%65%3d%22%30%37%64%38%64%64%36%61%35%61%61%38%64%30%33%62%66%30%38%30%39%64%66%64%30%30%30%34%64%62%32%64%22%3e
© 2006 – 2014 by Luvsic. Some rights reserved.