久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

搜索
分享

根據(jù)Json串生成Html(一)

 昵稱10504424 2013-03-06
文章說明：這是我的第一篇博客，介紹了根據(jù)Json串生成Html的一種方式（只是簡單實(shí)現(xiàn)了文本框,，密碼框,，下拉框）。只是覺得好玩才這樣做,，如果覺得沒有任何價(jià)值,，請忽略。不足指出希望各位大牛指點(diǎn),。后續(xù)將根據(jù)各位的指點(diǎn)繼續(xù)完善,。

     功能說明：

　

     在左側(cè)輸入框中輸入Json串,，點(diǎn)擊執(zhí)行時根據(jù)輸入的Json串在右側(cè)展示區(qū)顯示出相應(yīng)的Html（使用Jquery1.4.4）

     HTML：

     <table style="width:100%; ">
            <col width="200px;" />
            <tr>
                <td>Json輸入框</td>
                <td>展示區(qū)</td>
            </tr>
            <tr>
                <td>
                    <textarea id="txtJson" rows="20" cols="50">
                    </textarea>
                </td>
                <td valign="top">
                    <div id="divShow">
                    </div>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input id="btnExec" type="button" value="執(zhí)行" />
                </td>
            </tr>
        </table>

      JS代碼:

      $(document).ready(function () {
      　　$("#btnExec").click(function () {
                    try{
                        var objList = eval($("#txtJson").val());
                        jsonToControl(objList);
                    }
                    catch(e){
                        alert("json格式錯誤");
                    }
                });
            });

            function jsonToControl(jsonObj) {
                $("#divShow").empty();
                $.each(jsonObj, function (index, item) {
                    var control = null;
                    var title = $("<label />");
                    switch (item.type) {
                        case "textbox":
                            control = createTextBox();
                            break;
                        case "select":
                            control = createSelect(item);
                            break;
                        case "password":
                            control = createPassword();
                            break;
                        //------------------------------  
                        // 其它控件在這里加代碼  
                        //------------------------------  
                    }
                    if (item.title != null) {
                        title.text(item.title);
                    }
                    if (control != null) {
                        control = setAttritube(control, item);
                        $("#divShow").append(title);
                        $("#divShow").append(control);
                        $("#divShow").append("<br/>");
                    }
                })
            }

            //設(shè)置控件的樣式
            function setAttritube(control, item) {
                if (item.width != null) {
                    control.width(item.width);
                }
                //--------------------------------
                // 其他樣式在這里加代碼
                //--------------------------------
                return control;
            }

            //創(chuàng)建TextBox
            function createTextBox() {
                return $("<input type='textbox' />");
            }

            //創(chuàng)建密碼框
            function createPassword() {
                return $("<input type='password'/>");
            }

            //創(chuàng)建Select
            function createSelect(item) {
                var c = $("<select></select>");
                if(item.items != null ){
                    $.each(item.items,function(index,i){
                        $("<option value='"+i.key+"' checked='checked'>"+i.value+"</option>").appendTo(c);
                    })
                }
                return c;
            }

     非常感謝各位抽空看完,。如果有任何意見或建議，請留言,。

     轉(zhuǎn)載請指明出處 張*權(quán),。

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn),。請注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購買等信息，謹(jǐn)防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,，請點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多