Question

我正在制作一个混合移动应用程序，我希望在从网络服务中获取html之后应用jQueryMobile-initialize方法..（通过“混合移动应用程序”我的意思是我开始一个html页面，使用jQueryMobile for样式化，并使用ajax调用Web服务来获取按钮点击等数据。最后，我将所有内容折叠到本机应用程序中。）

那么，有没有人知道是否有类似（伪）的东西 $ .initWithJQueryMobile（$（ '＃my_div_id'））
注意：当我执行ws请求/响应时，我不会访问新的data-role =页面。

背景：您可能知道，在初始化html文件时，jqm会更改此

    <select id="116" data-role="slider" >
    <option value='no'>No</option>                               
    <option value='yes'>Yes</option></select>

进入这个

我希望在我的webservice返回之后 - 在pagecreate事件被触发之后很久。

当您点击或点按翻转切换（他们称之为）时，它会在“是”和“否”之间切换。

为了实现这个目标，jqm通过跨度，div和样式彻底重写了dom，并将一个javascript方法应用于onclick进行翻转切换。

我可以从page-view-source窃取html，所以如果有人知道jqm js方法让它切换我可以从那里拿走它（我知道，大黑客）。要么 …。是否有我们可以使用的$ .initWithJQueryMobile（）函数？

Answer 1

我想要jqm-initialize的标签是<select> jqm将它们更改为翻转切换。 jqm让我们用<select>

标记data-role='slider'

无论如何，我正在加载一堆选择以响应用户在邮政编码框中输入第5个号码。事实证明这是有效的：

// get an array of the &lt;select>s you want to initialize
var endorsement_controls =  $('div#divEndorsements select');
endorsement_controls.each(function(){
    // the next two lines make them flip toggles
    $(this).slider();
    $(this).slider('refresh');
});

$.slider()就是他们所说的小部件。对于大多数（如果不是全部）控件，我猜有一个模拟。

我从Craig Brooks

获得了改变游戏规则的提示

Answer 2

首先，如果您想了解有关此主题的更多信息，请查看我的博客 ARTICLE 。或者可以找到 HERE 。每个解决方案都附带一个或多个 jsFiddle 示例。

这是一个相当复杂的$ .ajax调用示例，标记增强 jsFiddle 。

$('#index').live('pagebeforeshow',function(e,data){    
    $('#cars-data').empty();
    $.ajax({
        type: "POST",
        url: "/echo/xml/",
        dataType: "xml",
        data: {
            xml: "<cars><car><name>TOYOTA</name><country>JAPAN</country><pic>http://1call.ms/Websites/schwartz2012/images/toyota-rav4.jpg</pic><description>Toyota has announced that it will recall a total of 778,000 units that may have been manufactured with improperly-tightened nuts on the rear suspension.</description></car></cars>"
        },
        success: function(xml) {
            ajax.parseXML(xml);
        },
        error: function (request,error) {
            alert('Network error has occurred!');
        }
    });
});

$("#cars").live('pagebeforeshow', function () {
    $("#cars div[data-role='header'] h1").html(carObject.carName);
    $('#car-data').empty();
    $('#car-data').append('<li>Car Type:<span> ' + carObject.carName + '</span></li>');
    $('#car-data').append('<li>Car Country:<span> ' + carObject.carCountry + '</span></li>');        
    $('#car-data').append('<li>Car Description:<span> ' + carObject.description + '</span></li>');    
    $('#car-data').listview('refresh');   
    $('#car-img').attr('src' , carObject.img );    

});

var ajax = {  
    parseXML:function(result){
        $(result).find("car").each(function()
        {
            carObject.carName  = $(this).find('name').text();
            carObject.carCountry  = $(this).find('country').text();
            carObject.img  = $(this).find('pic').text();
            carObject.description  = $(this).find('description').text();

            $('#cars-data').append('<li><a href="#cars"><img src="' + carObject.img + '" title="sample" height="100%" width="100%"/><h3>Car type:<span> '+carObject.carName+'</span></h3><p>' + carObject.description + '</p></a></li>');
        });    
        $('#cars-data').listview('refresh');
        $('#index').append('<div data-role="footer" data-position="fixed"><h1>Dynamicaly added footer</h1></div> ');
        $('#index [data-role="content"]').append('<fieldset data-role="controlgroup"><legend>Choose:</legend><input type="radio" name="radio" id="radio1" value="1" checked="checked" /><label for="radio1">option 1</label></fieldset>');
        $('#index').trigger('pagecreate');
    }
}

var carObject = {
    carName : '',
    carCountry : '',
    img : '',
    description : ''    
}

在pagecreate事件之后应用jQueryMobile初始化

2 个答案: