在我的第一个移动应用程序上工作时,我注意到当我访问该站点并将鼠标悬停在每个列表上时,链接阴影不会覆盖显示列表的宽度。请参阅图像链接,其中显示鼠标悬停时底部的间隙:
当我使用以下脚本时,我注意到了:
<link href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" type="text/css" rel="stylesheet" />
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
结合:
一切看起来都没有任何差距,但问题是当我点击每个链接时,我的主页botton图标显示一个+符号而不是“home”符号,尽管我的'data-icon =“home”'。 / p>
当我将脚本更改为高于'jquery.mobile-1.0a2.min.css'和'jquery.mobile-1.0a2.min.js'的任何内容时,home botton正确显示,但会出现间隙问题。< / p>
对此有可能解决方法的任何人?
var postlimit = 10;
document.write(
'<div data-role="page" id="list">' +
' <div data-role="header" data-position="fixed" data-theme="c">' +
' <h1><span class="hd">My First App</span></h1>' +
' </div>' +
' <div data-role="content">' +
' <div data-role="listview" data-filter="true" id="articleList" >'
);
for(var i=1; i<=postlimit; i++){
document.write(
'<li id="list' + i + '"><a class="atcss" '+' href="#article' + i + '" id="link' + i + '"></a></a>' +
' <p class="adcss">Date: <span id="articleDate' + i + '"></span>' +
' <p class="apcss">By: <class="author">Sysadmin</p>' +
'</li>'
)
};
document.write(
' </div>' +
' </div>' +
'</div>'
);
for(i=1; i<=postlimit; i++){
document.write(
'<div data-role="page" id="article' + i + '">' +
' <div data-role="header" data-position="inline" data-theme="c">' +
' <a href="#list" data-role="button" data-icon="gear" data-back="true">Home</a>' +
' <h1 id="articleHeader' + i + '"> </h1>' +
// ' <a href="#" id="openButton' + i + '" data-role="button" data-icon="plus"' +
// ' class="ui-btn-right" rel="external">Open</a>' +
' </div>' +
' <div data-role="content">' +
' <div id="articleContent' + i + '" class="articleContent"></div>' +
' <div data-role="controlgroup" data-type="horizontal">' +
' <a href="#article' + String(i-1) + '" data-role="button" data-icon="arrow-l"' +
' data-inline="true" class="prevButton">Prev</a>' +
' <a href="#article' + String(i+1) + '" data-role="button" data-icon="arrow-r"' +
' data-inline="true" class="nextButton" data-iconpos="right">Next</a>' +
' </div>' +
' </div>' +
'</div>'
)
};