PhoneGap:将Radio Button与普通网页相同

时间:2013-11-11 08:40:49

标签: cordova

当我在HTML文件中创建单选按钮作为标签时,它正在工作,界面看起来非常好像本机(示例):

http://postimg.org/image/c65wab5nr/

但是当我从javascript中将其设为动态而不是原生的时候,它就像普通的网页一样(例子):

http://postimg.org/image/fohw6p6jr/

以下是代码:

<html>
    <head>
        <title>Calling Web Service from jQuery</title>
        <meta charset="UTF-8">
            <meta name="format-detection" content="telephone-no">
            <meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
            <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.2.0.css">
            <link rel="stylesheet" href="css/main.css">
            <script src="js/jquery.js"></script>
            <script src="js/jquery.mobile-1.2.0.js"></script>
            <script src="cordova.ios.js"></script>
            <script src="js/mustache.js"></script>
            <script type="text/javascript">

                            var list_total;
                            var que;

                                $(document).ready(function () {
                                                  //alert('ready');
                                                  });

                                                  function onDeviceReady()
                                                  {
                                                  }


           function set_list_text(){

                for (var i = 0; i< list_total.length; i++){

                    var temp_list = list_total[i].split("#");
                    //alert(temp_list.length);

                    //radio
                    if (temp_list[2] ==1)
                    {
                  //alert("here"+temp_list);
                        /*var h5 = document.createElement("h5");
                  h5.setAttribute("align","center");
                        h5.innerHTML = temp_list[1];
                      que = document.getElementById("que");
                        que.appendChild(h5);
                        */
                  do_h5(temp_list[1]);

                        for (var j = 3; j < temp_list.length - 2; j+=2){
                          //alert(j);
                            //addQ("radio", temp_list[j+1],temp_list[j],"m"+temp_list[0]);
                    do_radio(temp_list[j+1],temp_list[j],"m"+temp_list[0]);

                        }
                    }
                    //alert(document.body.innerHTML);
                    //text area
                    if (temp_list[2] == 0){
                        return ;
                    }



                }

           }

           function addQ(type,text,id,name){


               var label = document.createElement("label");
               var element = document.createElement("input");
               element.setAttribute("type", type);
               element.setAttribute("value", id);
               element.setAttribute("name", name);
             element.setAttribute("id", name);
             label.innerHTML = text;
               label.appendChild(element);


               //que = document.getElementById("que");
               que.appendChild(label);

               //alert("finished");
           }


           function do_h5(txt){

            document.getElementById("form_h5").innerHTML += '<h5 align="center">'+txt+'</h5>'
           }

           function do_radio(txt,id,name){
            document.getElementById("form_h5").innerHTML += '<label>'+txt+
            '<input type="radio" name="'+name+'" value="'+id+'">'+
                    '</label>';

           }


                            </script>
    </head>
    <body onload="saop();">

                   <div id="que">
                        <form id ="form_h5">




                       </form>
                     </div>

    </body>
</html>

1 个答案:

答案 0 :(得分:1)

function do_radio(txt,id,name){
    document.getElementById("form_h5").innerHTML += '<label>'+txt+
        '<input type="radio" name="'+name+'" value="'+id+'">'+
                '</label>';
    $("#form_h5").trigger("create");

}