如何更新样式在jQuery Mobile的列表视图？ [英] how to update the styles to a listview in jquery mobile?

问题描述

我从服务器获取一些数据，我创造我试图更新的样式的UL列表。

似乎列表视图（刷新，真）不起作用。我使用JQM 1.4测试版

 函数parseData（数据）
{
    VAR HTML ='＆LT; UL数据角色=列表视图数据autodividers =真正的数据过滤器=真正的数据插入=真正的＆GT;';
    $。每个（数据，功能（指数值）{
        HTML ='＆LT;立GT;' +
            '＆LT; D​​IV数据角色=可折叠＆GT;' +
                '＆所述p为H.;' + value.title +'＆LT; / P＆GT;' +
            '＆LT; / DIV＆GT;' +
        '＆LT; /李＆GT;';
    }）;
    HTML + ='＆LT; / UL＆GT;';
    返回HTML;
}
VAR DIV = $（'＃DIV'）;
div.html（parseData（数据））;
。div.find（UL）的列表视图（刷新，真正的）;
 

的jsfiddle

一个想法？

解决方案

由于 jQuery Mobile的1.4阿尔法2 ， .trigger（'创造'）的和 .trigger（'pagecreate'）是德precated并将从1.5被删除。

替换这些功能是 .enhanceWithin（），当它被称为父元素，在将enhannced所有小工具。

此外，可折叠的正确语法/标记为

 ＆LT; D​​IV数据角色=可折叠＆GT;
  ＆LT; H4＆GT;标题＆LT; / H4＆GT; ＆LT;！ - 你失踪此标记 - ＆GT;
  ＆LT; P＆GT;可折叠/可扩展的内容和LT; / P＆GT;
＆LT; / DIV＆GT;
 

要加强ListView和可折叠的，你需要的是

  $（'＃DIV'）enhanceWithin（）;
 

---

更新

Col​​lapsibles都继承保证金从父里，结果造型可折叠的标题和内容不足。添加如下CSS修复此问题。

里的.ui-可折叠航向，的.ui可折叠镦拨动{
  保证金：0重要;
}李的.ui可折叠镦倒塌的.ui可折叠镦拨动{
  保证金底：1像素重要;！
}


  

演示

i am getting some data from a server and i create a ul list that i am trying to update the styles.

it seems that listview('refresh',true) doesn't work. I am using jqm 1.4 beta

function parseData(data)
{
    var html = '<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">';
    $.each(data, function( index, value ) {
        html = '<li>' +
            '<div data-role="collapsible">' +
                '<p>' + value.title + '</p>' +
            '</div>' +
        '</li>';
    });
    html += '</ul>';
    return html;
}


var div = $('#div');
div.html(parseData(data));
div.find('ul').listview('refresh',true);

jsfiddle

an ideas?

解决方案

As of jQuery Mobile 1.4 Alpha 2, .trigger('create') and .trigger('pagecreate') are deprecated and will be removed from 1.5.

The replacement of those function is .enhanceWithin(), when it is called on parent element, all widgets within will be enhannced.

Also, the correct syntax / markup of a collapsible is

<div data-role="collapsible">
  <h4>Heading</h4> <!-- you were missing this tag -->
  <p>collapsible / expandable contents</p>
</div>

To enhance listview and collapsible, all you need is

$('#div').enhanceWithin();

---

Update

Collapsibles are inheriting margin from parent li, resulting in styling collapsible's heading and content inadequately. Adding the below CSS fixes this issue.

li .ui-collapsible-heading, .ui-collapsible-heading-toggle {
  margin: 0 !important;
}

li .ui-collapsible-heading-collapsed .ui-collapsible-heading-toggle {
  margin-bottom: 1px !important;
}

Demo

这篇关于如何更新样式在jQuery Mobile的列表视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！