我写了下面的代码,但我希望我的主页图标为蓝色.如何更改背景颜色？
<ul data-role="listview" data-inset="true" class="ui-nodisc-icon ui-alt-icon">
<li><a href="#page_1" class="ui-btn ui-icon-home ui-btn-icon-right" data-role="link" style="text-align: center; font: bold arial 95px;">Home</a></li>
<li><a href="#" class="ui-btn ui-icon-shop ui-btn-icon-right" data-role="link" style="text-align: center;">Products</a></li>
</ul>
我有一个来自ajax的数组,我需要创建jQuery Mobile Listview.我没有找到这方法,所以有可能吗？
所以,标题是不言自明的.我正在尝试使用jQuery mobile和Handlebars,但我遇到了表格的CSS或者车把生成的列表视图的问题.似乎CSS被忽略了.
编辑:这是一个实际的实例:http://jsbin.com/adurar/1/edit
在本<head>节中,我有以下代码:
<script id="articles-template" type="text/x-handlebars-template">
<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
{{#entries}}
<li><a href="#" onClick="">{{msg}}</a></li>
{{/entries}}
</ul>
</script>
HTML的主体是非常直接的jquery移动:
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>
<div id="articleHandlebars" data-demo-html="true"></div>
</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
在.js文件中我有这个代码:
function showData(data)
{
var source = $("#articles-template").html();
var template = Handlebars.compile(source);
var html = template(data);
$("#articleHandlebars").html(html);
}
我也尝试添加这个无济于事:
$("#articleHandlebars").trigger('create');
$("#articleHandlebars").listview('refresh');
非常感谢任何形式的帮助!
markup jquery jquery-mobile handlebars.js jquery-mobile-listview
让这个工作变得困难,这就是我想要的:
-Collapsible
---Item 1
---Item 2
---Item 3
-Normal list view item with link
-Collapsible
---Item 1
---Item 2
---Item 3
所以基本上我想要一个普通的listview项目,其中包含由可折叠元素包围的链接.
我尝试过使用手风琴和列表视图,但到目前为止我还没有接近过.
<ul data-role="listview">
<li>
<div data-role="collapsible">
<h3>Invite</h3>
<ul data-role="listview" data-inset="false">
<li><a href="#">Email Invite</a></li>
<li><a href="#fb_invite">Facebook Invite</a></li>
<li><a href="#twitter_invite">Twitter Invite</a></li>
<li><a href="#address_book_invite">Address Book Invite</a></li>
</ul>
</div>
</li>
<li><a href="#">Normal item!</a></li>
</ul>
这样就可以很好地创建功能,问题是可折叠列表具有按钮的可视方面,我希望它看起来与普通的li项完全相同.
任何解决此问题的方法都是受欢迎的.
我正在使用jQuery mobile创建一个应用程序并加载其菜单和页面形式wordpress throw jsonp.我正在以collapsibleset和listview的形式取消其菜单,但我一直在收到错误.当我尝试通过此代码刷新collapsibleset时
$(".childnev").html(list);
$.mobile.loading( 'hide');
$('.popupmenu').slideToggle('slow');
$(".childnev").collapsibleset('refresh');
$(".childsublist").listview().listview('refresh');
它给了我这个错误
Error: cannot call methods on collapsibleset prior to initialization;
attempted to call method 'refresh'
当我尝试刷新此代码时.
$(".childnev").html(list);
$.mobile.loading( 'hide');
$('.popupmenu').slideToggle('slow');
$(".childnev").collapsibleset();
$(".childnev").collapsibleset('refresh');
$(".childsublist").listview().listview('refresh');
它再次给了我这个错误
TypeError: o[0] is undefined
我错过了什么或做错了什么？
jquery jquery-mobile jquery-mobile-listview jquery-mobile-collapsible
我有以下HTML,
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content" id="content">
<ul data-role="listview">
<li>
<a href="#">
<img width="80" height"80" src="http://www.gravatar.com/avatar/7efa2e4098f60c15d230436ca99d7250?s=32&d=identicon&r=PG" />
<div class="left">
<h3>New Latest One</h3>
<p>$12,000</p>
</div>
<div class="right">
<input type="text" style="width:75px"/>
</div>
</a>
</li>
<li>
<a href="#">
<img width="80" height"80" src="http://www.gravatar.com/avatar/7efa2e4098f60c15d230436ca99d7250?s=32&d=identicon&r=PG" />
<div class="left">
<h3>New Latest One</h3>
<p>$12,000</p>
</div>
<div class="right">
<input type="text" style="width:75px"/>
</div>
</a>
</li>
<li>
<a href="#">
<img width="80" height"80" src="http://www.gravatar.com/avatar/7efa2e4098f60c15d230436ca99d7250?s=32&d=identicon&r=PG" />
<div class="left">
<h3>New Latest One</h3>
<p>$12,000</p>
</div>
<div class="right">
<input …我在我的应用程序中使用$ .get()来检索设施名称列表.然后我想将它们作为jquery mobile中的列表项插入到已存在的列表项中.当我在html中添加一个元素时,它看起来没问题,但是当我使用for循环时,结果没有任何样式效果.
http://jsfiddle.net/mkamyszek/YDFZ3/1/
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-filter="true" id="fieldList">
<li>Test</li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
循环输出正确的信息,但由于某种原因,当我使用循环时样式不适用:
for (i=0; i<=5; i++){
$("ul").append("<li>something" + i + "</li>");
}
我将如何将href和listview标题添加到下面的代码中.如果我在html部分添加它我不会得到下面的列表html和js
<script type="text/javascript">
$(document).on("pagebeforeshow", "#index1", function() {
$(function(){
var items="";
$.getJSON("check-events.php",function(data){
$.each(data,function(index,item)
{
items+="<li>"+item.enddate+"</li>";
});
$("#contacts").html(items);
$("#contacts").listview("refresh");
});
});
});
</script>
<div data-role="fieldcontain">
<ul id="contacts" data-role="listview" data-divider-theme="b" data-inset="true">
</ul>
</div>
我把它放在哪里
<li data-role="list-divider" role="heading">
List view
</li>
如何设置用户在列表视图上滚动,列表视图外的其他div也不需要滚动？我无法在那里得到任何参考.
我在高低处寻找这个问题的答案。我有一个使用列表视图搜索过滤器的应用程序。但是，当用户离开页面时，搜索过滤器会“记住”之前的搜索。
我的问题：当用户离开页面时如何重置搜索过滤器？下次打开页面时，我希望清除搜索过滤器，以便再次显示整个列表并且“忘记”之前的搜索？
jquery filtering jquery-mobile jquery-mobile-listview jquery-mobile-fieldset