我正在尝试将<audio>
附加到我的列表中,如下所示:
<ul data-role="listview" data-style="bubble">
<li class="ui-li-bubble-receive">short receive<span class="ui-li-bubble-time">9:20 PM</span></li>
<li class="ui-li-bubble-sent">But I have no choice. I have a big exam tomorrow. (bubble sent)<span class="ui-li-bubble-time">9:26 PM</span></li>
</ul>
使用原始的jquery-mobile(在Tizen OS上)风格:
.ui-listview .ui-li-bubble-receive,
.ui-listview .ui-li-bubble-left,
.ui-listview .ui-li-bubble-sent,
.ui-listview .ui-li-bubble-right,
.ui-listview .ui-li-bubble-sos {
display: inline-block;
background-clip: padding-box;
max-width: 100%;
word-wrap: break-word;
font-size: 0.8636363636363636rem;
}
.ui-listview .ui-li-bubble-receive p,
.ui-listview .ui-li-bubble-left p,
.ui-listview .ui-li-bubble-sent p,
.ui-listview .ui-li-bubble-right p,
.ui-listview .ui-li-bubble-sos p,
.ui-listview .ui-li-bubble-receive span,
.ui-listview .ui-li-bubble-left span,
.ui-listview .ui-li-bubble-sent span,
.ui-listview .ui-li-bubble-right span,
.ui-listview .ui-li-bubble-sos span {
font-size: 0.8636363636363636rem;
}
.ui-listview .ui-li-bubble-receive img,
.ui-listview .ui-li-bubble-left img,
.ui-listview .ui-li-bubble-sent img,
.ui-listview .ui-li-bubble-right img,
.ui-listview .ui-li-bubble-sos img {
position: relative;
min-width: 7.272727272727273rem;
min-height: 7.272727272727273rem;
}
.ui-listview .ui-li-bubble-receive:first-child,
.ui-listview .ui-li-bubble-left:first-child,
.ui-listview .ui-li-bubble-sent:first-child,
.ui-listview .ui-li-bubble-right:first-child,
.ui-listview .ui-li-bubble-sos:first-child {
margin-top: 0.6818181818181819rem;
}
.ui-listview .ui-li-static.ui-li-bubble-receive,
.ui-listview .ui-li-static.ui-li-bubble-left {
margin-left: 0px;
margin-right: 4.545454545454546rem;
border-image-source: url(images/00_messagebubble_bg_receive.9.png);
border-image-slice: 60 22 19 57 fill;
border-image-width: auto;
padding: 9px 14px 21px 48px;
color: #000000;
}
.ui-listview .ui-li-static.ui-li-bubble-receive > .ui-li-bubble-time,
.ui-listview .ui-li-static.ui-li-bubble-left > .ui-li-bubble-time {
margin-left: 0.3181818181818182rem;
position: absolute;
display: inline-block;
bottom: 0.5454545454545454rem;
left: 100%;
font-size: 0.5rem;
text-align: left;
color: #8b8b8b;
}
.ui-listview .ui-li-static.ui-li-bubble-sent,
.ui-listview .ui-li-static.ui-li-bubble-right {
margin-left: 4.545454545454546rem;
margin-right: 0px;
border-image-source: url(images/00_messagebubble_bg_sent.9.png);
border-image-slice: 55 47 20 13 fill;
border-image-width: auto;
padding: 9px 47px 20px 13px;
color: #000000;
}
.ui-listview .ui-li-static.ui-li-bubble-sent > .ui-li-bubble-time,
.ui-listview .ui-li-static.ui-li-bubble-right > .ui-li-bubble-time {
margin-right: 0.3181818181818182rem;
text-align: right;
color: #8b8b8b;
position: absolute;
display: inline-block;
bottom: 0.5454545454545454rem;
right: 100%;
font-size: 0.5rem;
}
.ui-listview .ui-li-static.ui-li-bubble-sos {
color: #e94949;
}
.ui-listview .ui-li-static.ui-li-bubble-sos > .ui-li-bubble-time {
color: #e94949;
}
.ui-listview .ui-li-static.ui-li-bubble-date {
color: #686868;
font-style: italic;
width: auto;
height: 1.0909090909090908rem;
background-image: url(images/00_messagebubble_date_bg.png);
background-repeat: repeat-x;
background-position: center center;
font-size: 0.7272727272727273rem;
margin: 0.9090909090909092rem 0.2727272727272727rem;
border: 0px none red;
padding: 0 0;
padding-top: 0.5em;
margin-left: 23px;
margin-right: 23px;
text-align: center;
}
.ui-listview .ui-li-static.ui-li-bubble-date * {
display: inline-block;
background-color: #f8f6ef;
padding-left: 0.5em;
padding-right: 0.5em;
}
.ui-listview span.ui-li-bubble-time {
font-weight: bold;
width: 3.181818181818182rem;
}
但是当我做的时候
code += '<table border=1 style="table-layout:fixed; min-height:100px; width:100%;max-width:180px;"><tr><td style="max-width:120px;">';
code += '<audio data-controls="true" style="width:150px;">';
code += '<source src="file.mp3" type="audio/mp3" />';
code += 'Your browser does not support the audio tag.';
code += '</audio>';
code += '</td></tr></table>';
temp = '<li class="ui-li-bubble-sent"><span>'+code+'</span><span class="ui-li-bubble-time">'+'10:20'+'</span></li>';
$("#myList li:last").after(temp);
它只显示我的空表。我做错了什么? :( 我浪费了很多时间,尝试了许多变种(有/没有div,表等),但没有成功。在列表之外我的音频成功运行,但我需要将它放在此列表中。
答案 0 :(得分:0)
你有很多代码错误:
您忘了将id="myList"
添加到listview ul
标记。
您应该在向其添加数据之前定义code
变量。
var code = '';
使用$("#myList").append(temp)
代替$("#myList li:last").after(temp)
,因为.append()
会在ul
的最后一个孩子之后添加元素。
$("#myList").append(temp);
将动态动态附加到列表视图后,您需要重新强化 ul
(应用样式)致电.listview("refresh")
。
$("#myList").append(temp).listview("refresh");
<强> Demo 强>