頁面加載jQuery Mobile的事件

我使用這個代碼動畫的HTML5 + jquryMobile應用程序......我把它添加到我的頭上的可摺疊的內容：頁面加載jQuery Mobile的事件

$(document).on('expand', '.ui-collapsible', function() { 
    $(this).children().next().hide(); 
    $(this).children().next().slideDown(500); 
}) 

$(document).on('collapse', '.ui-collapsible', function() { 
    $(this).children().next().slideUp(500); 
});

它工作正常，當我點擊可摺疊的頭......我想用它來處理所有可摺疊的元素，但在某些頁面中，我希望在頁面加載後自動播放動畫... 有人可以幫助我嗎？

來源

2013-04-18 Loralon

工作例如：http://jsfiddle.net/Gajotres/vmZyn/

$(document).on('pageshow', '#index', function(){  
    $('.ui-collapsible').children().next().hide(); 
    $('.ui-collapsible').children().next().slideDown(1500); 
});

你想用一個pageshow事件。在這一點上，你可以動畫滑動。

如果你想這樣做只有一個（如文件準備好）使用語法來代替：

$(document).on('pageinit', '#index', function(){  
    $('.ui-collapsible').children().next().hide(); 
    $('.ui-collapsible').children().next().slideDown(1500); 
});

不像pageshow，pageinit將觸發一次。

來源

2013-04-18 11:33:11 Gajotres

pageshow的代碼工作正常......但我怎樣才能避免當我重新加載頁面collapsible仍然是打開？！...它打開了一秒鐘然後slideDown重新啓動.. – Loralon

將data-collapsed =「true」屬性添加到可摺疊div中。有關更多信息，請參閱官方文檔：http://api.jquerymobile.com/collapsible/#option-collapsed，您需要的所有內容都在那裏。 – Gajotres

我試圖使用data-collapsed = true ...問題仍然存在......在其他可摺疊元素（沒有動畫）時，元素在第一次加載頁面時摺疊了......如果我用元素打開時，我充值該頁面是開放的，我不能關閉它...？！ – Loralon

試試這個

<body onLoad='expand();'>

，然後把必要的功能

<script> 
function expand() 
{ 
$(this).children().next().hide(); 
    $(this).children().next().slideDown(500); 
} 
</script>

來源

2013-04-18 11:27:47 Prat

在jQuery Mobile的不工作：http://view.jquerymobile.com/1.3.1/dist /demos/faq/dom-ready-not-working.html – jgillich

JQM有你自己的事件，你需要掛鉤。文檔瀏覽：http://api.jquerymobile.com/category/events/

如果你想在某些網頁上使用此語法來觸發事件：

$(document).on("pageinit", "#some-page", function() { 
    ... 
});

來源

2013-04-18 11:34:29

頁面加載jQuery Mobile的事件

回答

相關問題