<ul>
連絡先の詳細を表示しながら、タグにテーマを適用しようとしています。ただし、data-theme と list-divider-theme は<ul>
、最初に連絡先の詳細が表示された後にのみコンテンツに適用されます。私のコードは次のとおりです。
document.addEventListener("deviceready", onDeviceReady, false);
$(function(){
$(".contactSelect").live('click',function(){
$('#contactdetail').empty();
var txt = "<ul data-inset='true' list-divider-theme='b' id='contactdetail'></ul>";
$("#box").append(txt);
id = this.id;
$('#contactdetail').append($('<li/>', {
'class':'contactdetailClass',
'data-role':'list-divider',
'text':'Name'
}));
$('#contactdetail').append($('<li/>', {
'class':'contactdetailClass',
'text':mainContacts[id].displayName
}));
$('#contactdetail').append($('<li/>', {
'class':'contactdetailClass',
'data-role':'list-divider',
'text':mainContacts[id].phoneNumbers[0].type
}));
$('#contactdetail').append($('<li/>', {
'class':'contactdetailClass',
'text':mainContacts[id].phoneNumbers[0].value
}));
$('contactdetail').trigger('create');
$('#contactdetail').listview();
$('#contactdetail').listview('refresh');
});
});
function onDeviceReady() {
var options = new ContactFindOptions();
options.multiple=true;
var fields = ["*"];
navigator.contacts.find(fields, onSuccess, onError, options);
}
function onSuccess(contacts) {
mainContacts=contacts;
for (var i=0; i < contacts.length; i++) {
$('#contactContainer').append($('<li/>', {
}).append($('<a/>', {
'id':i,
'href': '#two',
'data-role':'button',
'text': contacts[i].displayName,
'class': 'contactSelect'
})));
};
$('ul').listview('refresh');
}
function onError(contactError) {
}
<ul>
連絡先の詳細を表示しているときに、テーマが最初に適用されない理由を見つけるのを手伝ってください。最初の出力は、次のスナップショットに示されています。