jQuery Mobile动态添加数据后渲染视图

最新推荐文章于 2018-06-28 21:01:49 发布

weixin_34296641

最新推荐文章于 2018-06-28 21:01:49 发布

阅读量298

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json python ViewUI

原文链接：https://my.oschina.net/u/3091477/blog/810290

本文介绍了使用jQueryMobile框架动态添加并渲染多种UI组件的方法，包括文本框、按钮、下拉菜单、列表视图等，并提供了具体的代码实现示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

jQuery Mobile动态添加数据后渲染视图：

0.Textarea field

$('body').prepend('<textarea id="myTextArea"></textarea>');
$('#myTextArea').textinput();

1.Text input field

$('body').prepend('<input type="text" id="myTextField" />');
$('#myTextField').textinput();

2.button

$('body').prepend('<input type="text" id="myTextField" />');
$('#myTextField').textinput();

3.Combobox or select dropdowns

<label for="sCountry">Country:</label>
<select name="sCountry" id="sCountry">
    <option value="">Where You Live:</option>
    <option value="ad">Andorra</option>
    <option value="ae">United Arab Emirates</option>
</select>
 
var myselect = $("#sCountry");
myselect[0].selectedIndex = 3;
myselect.selectmenu('refresh');

4.最常见的动态添加 listview>li 标签

<ul id="myList" data-role="listview" data-inset="true">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
 
$('#mylist').listview('refresh');

5.Slider control

<div data-role="fieldcontain">
    <label for="slider-2">Input slider:</label>
    <input type="range" id="slider-2" value="25" min="0" max="100" />
</div>
 
$('#slider-2').val(80).slider('refresh');

6.Toggle switch

<span><div data-role="fieldcontain">
    <label for="toggle">Flip switch:</label>
    <select name="toggle" id="toggle" data-role="slider">
        <option value="off">Off</option>
        <option value="on">On</option>
    </select> 
</div>
 
var myswitch = $("#toggle");
myswitch[0].selectedIndex = 1;
myswitch .slider("refresh");</span>

7.Radio

<span><div data-role="fieldcontain">
    <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>Layout view:</legend>
            <input type="radio" name="radio-view" value="list"  />
            <label for="radio-view-a">List</label>
            <input type="radio" name="radio-view" value="grid"  />
            <label for="radio-view-b">Grid</label>
            <input type="radio" name="radio-view" value="gallery"  />
            <label for="radio-view-c">Gallery</label>
    </fieldset>
</div>
 
$("input[value=grid]").attr('checked',true).checkboxradio('refresh');</span>

8.Checkboxes

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>Agree to the terms:</legend>
        <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
        <label for="checkbox-1">I agree</label>
    </fieldset>
</div>
 
$('#checkbox-1').attr('checked',true).checkboxradio('refresh');

【代码位置】以listview为例：

 $.ajax({
            type:"post",
            url:'php/json.php',
            data:{},
            datatype:'json',
            success:function(data){
                var ul=$('#myList');
                var dic=JSON.parse(data);
                for(var i=0;i<dic.length;i++){
                    var li=$('<li></li>');
                    var a=$('<a></a>');
                    a.html(dic[i].tname);
                    li.append(a);
                    ul.append(li);
                    $('#myList').listview('refresh');//代码位置
                }
            }
        });

输入图片说明