5

我有一些在客户端使用 JS 生成的 HTML。我仍然想将 jQuery Mobile UI 的样式和功能也应用于这些对象。我似乎无法弄清楚如何...

假设我生成一个：

<div data-role="fieldcontain">
    <label for="select-choice-1" class="select">Choose shipping method:</label>
    <select name="select-choice-1" id="select-choice-1">
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>
    </select>
</div>

并希望通过页面内的 jQuery Mobile UI 呈现它......如何做到这一点？

我知道使用标准 jQuery UI 我只需要按照以下方式进行调用：

$("#select-choice-1").buttonset();

jQuery Mobile UI 有类似的东西吗？

4

2 回答 2

2

如果调用 pagecreate

$('#page').live('pagecreate',function(event){
    $('#elem_container').page();
});

你去递归循环骑行。我编写了自己的 enhance() 函数来解决这个问题。

$('#page').live('pagecreate',function(event){
    enhance($('#elem_container'));
});

该功能基本上只是将下面的代码压缩...

function enhance(dis){
    dis.find( "[type='radio'], [type='checkbox']" ).checkboxradio();
    dis.find( "button, [type='button'], [type='submit'], [type='reset'], [type='image']" ).not( ".ui-nojs" ).button();
    dis.find( "input, textarea" ).not( "[type='radio'], [type='checkbox'], button, [type='button'], [type='submit'], [type='reset'], [type='image']" ).textinput();
    dis.find( "input, select" ).filter( "[data-role='slider'], [data-type='range']" ).slider();
    dis.find( "select:not([data-role='slider'])" ).selectmenu();
}

较早的帖子：

在挖掘了 jQuery 移动文件之后，我终于弄明白了......实际上很容易......

$("#select-choice-3").selectmenu();

这是我挖出来的代码块......

_enchanceControls: function() {
    var o = this.options;
    // degrade inputs to avoid poorly implemented native functionality
    this.element.find( "input" ).each(function() {
        var type = this.getAttribute( "type" );
        if ( o.degradeInputs[ type ] ) {
            $( this ).replaceWith(
                $( "<div>" ).html( $(this).clone() ).html()
                    .replace( /type="([a-zA-Z]+)"/, "data-type='$1'" ) );
        }
    });

    // enchance form controls
    this.element
        .find( "[type='radio'], [type='checkbox']" )
        .checkboxradio();

    this.element
        .find( "button, [type='button'], [type='submit'], [type='reset'], [type='image']" )
        .not( ".ui-nojs" )
        .button();

    this.element
        .find( "input, textarea" )
        .not( "[type='radio'], [type='checkbox'], button, [type='button'], [type='submit'], [type='reset'], [type='image']" )
        .textinput();

    this.element
        .find( "input, select" )
        .filter( "[data-role='slider'], [data-type='range']" )
        .slider();

    this.element
        .find( "select:not([data-role='slider'])" )
        .selectmenu();
}
于 2011-01-12T23:02:14.307 回答
2

更新！

是的！带有事件的新实现刚刚登陆！

http://jquerymobile.com/blog/2011/07/22/jquery-mobile-team-update-week-of-july-18th/

现在在 beta2 中会有一个create在元素上触发的事件将导致其渲染。

我会在 beta2 发布时更新常见问题解答。

找到您添加到 DOM 的最顶层元素并调用.page()它。这个问题实际上重复了很多其他标记为 jquery-mobile 的问题，因此我创建了一个镜头教程，不再每次都描述它。

请参阅此处的第一篇文章：http: //jquerymobiledictionary.dyndns.org/faq.html

于 2011-01-13T07:39:44.890 回答