4
我看來,像這應該工作(基於答案在這裏SM其它問題),但我沒有得到任何結果...不明白爲什麼這個JavaScript不會JQM工作
這裏是我的
第二個編輯:在頁面的起始碼
<script type="text/javascript">
function capitalizeFirstLetter(string){
return string.charAt(0).toUpperCase() + string.slice(1);
}
$(document).delegate('#sun, #mon, #tue, #wed, #thu, #fri, #sat', 'pageshow' , function() {
var days = ['sun','mon','tue','wed','thu','fri','sat'],
output = [],//create an output buffering variable
d = new Date();
for(var x=0; x<days.length; x++){
//rather than manipulate the DOM every iteration of the loop we add a string of HTML to an array
output.push('<li><a href="#' + days[x] + '">' + capitalizeFirstLetter(days[x]) + '</a></li>');
}
//now we add the buffered data to the listview and either refresh or initialize the widget
var $cNav = $('#custom-navbar')
$cNav.append(output.join(''));
//if the listview has the `ui-listview` class then it's been initialized, and the widget needs to be refreshed, otherwise it needs to be initialized
if ($cNav.hasClass('ui-navbar')) {
$cNav.navbar('refresh');
} else {
$cNav.navbar();
}
});
</script>
這是我的體內代碼:
<div data-role="content">
<div data-role="navbar" style="margin: -10px 0 15px 0;">
<ul id="custom-navbar"></ul>
</div>
修訂:'.live()'的工作,但'.listview()'沒有,所以我原來意見仍持有:如果人們遵循[教程](http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery),他們會注意到:*「幾乎當我們使用jQuery讀取或操作文檔對象模型(DOM)時,我們需要確保我們開始添加事件等,只要DOM準備就緒,爲此,我們爲文檔註冊一個準備好的事件。「*(舉例)。 – 2012-03-02 12:21:24
@FelixKling我會想象''.listview()'是jquery-mobile庫的一部分......它在'
我想'pageshow'事件是jquery移動框架。如果是的話,那麼你應該在你的腳本之前添加jquery手機腳本標籤。
來源
2012-03-02 12:14:47
這應該不重要。你甚至可以用jQuery定義自己的事件,他們不必「存在」。例如。我可以說'$('#foo')。bind('bar',....)'。 'bar'不是一個定義的事件。儘管如此,只要我調用'$('#foo')。trigger('bar')',就會執行事件處理程序。 – 2012-03-02 12:23:33
那麼,從jQuery Mobile網站他們直接推薦而不是綁定到$(document).ready(),因爲他們在幕後使用了一些ajax魔法,而是建議執行類似於您正在做的事情但用pageinit而不是pageshow。從我在文檔中可以看到他們應該(在此)功能上相同。加載jqm後你嘗試綁定pageshow或pageinit 後?
http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html
來源
2012-03-02 14:56:54 OldTroll
那麼首先使用
$('ul#custom-navbar').listview();
不
$('ul#custom-navbar').listview('refresh');
這不會工作,如果元素沒有初始化但是如果在ul上添加了html attr data-role =「listview」,則頁面顯示jQM將自動初始化列表查看,如果是這樣,然後你添加了元素,那麼你需要運行
$('ul#custom-navbar').listview('refresh');
我建議你這樣做。此外你需要把你的
$('ul#custom-navbar').listview();
像其他人提到的,當你把它JQM沒有加載有人肝功能中,你應該使用pageinit事件,pageshow也時觸發你回到頁面(通過後退按鈕等),你不想初始化它兩次。閱讀這兩篇文章,最好你會用這兩個來清理處理JS。PS:我很高興你正確地收聽pageinit/pageshow事件,而不是使用document.ready,我還建議在mobileinit處理程序中啓動這些監聽器。
$(document).bind("mobileinit", function(){//your pageinit/pageshow listeners here
,也是.live
功能現在已經廢棄,用$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(oEvent){
來源
2012-03-02 19:38:57