在頁面外應用主題

我正在嘗試學習jquery mobile，並且在過去的幾天裏一直在玩它，事情會好起來的，但我不太確定我是否採取了正確的方法。在頁面外應用主題

我嘗試使用與facebook應用程序類似的用戶界面製作網站。在頁面標題的右上角和左上角是可以使頁面像抽屜一樣滑出的按鈕。

左上角的按鈕會將頁面向右滑動以顯示菜單，而右上角的按鈕會向左滑動以顯示要填寫的表格。

我所做的就是創建頁面外的div並使用JavaScript來滑出活動頁面，菜單或形式取決於哪個按鈕被按下時會顯示：

<body> 

    <div id="my-menu"> 
    <ul> 
     <li><a href="page1.html">Menu Item 1</a></li> 
    </ul> 
    </div> <!-- end of my-menu --> 

    <div id="my-form"> 
    <form method="post" action="form-action.php"> 
     <!-- form elements --> 
    </form> 
    </div> <!-- end of my-form --> 

    <div data-role="page" id="home"> 
    <div data-role="header"> 
    </div> 

    <div data-role="content"> 
    </div> 
    </div> <!-- end of home --> 

</body>

我用我自己的CSS樣式菜單，但我也注意到我的主題並不適用於「我的形式」，但「家」頁面中的所有元素都有適當的樣式。

我不能把表單放在頁面「家」裏面，因爲我不能在菜單上做滑動抽屜效果。

我想我有自己的風格適用於頁面外的窗體，或者有沒有辦法將jQuery的手機主題應用到頁面外的元素？

這是實現這種用戶界面的最佳方法嗎？還是有更好的方法來使用jquery mobile中的可用方法？

因爲這將是我的應用程序用戶界面，這是否意味着我只是將相同的代碼複製到所有頁面？還是有更好的方法來做到這一點？

我想使用此用例的最佳實踐，請提供任何建議！在此先感謝您的幫助！

BTW我沒有在此基礎上的博客文章滑動菜單： http://blog.aldomatic.com/facebook-style-slide-out-menu-in-jquery-mobile/

來源

2012-12-20 Grish

您在頁面div標記中出現錯誤。更改id =「home to id =」home「只有頁面內容將應用jQM樣式。您的表單已在外部。 – Gajotres

oops！感謝您收到該錯字。是的，我意識到風格不能應用，但是有沒有更好的方法來做到這一點，或者我必須爲外部形式創造一種新風格？我想使用相同的風格，並使用屬於jQM一部分的翻轉開關和其他表單元素。 – Grish

您需要創建自己的風格，如果您看一下該博客文章，其所有者正在使用自己的CSS來設計左側菜單。然後再次，我不知道這是否會工作，但你可以添加data-role =「page」來形成div容器，也許這會有所幫助。但我不認爲有可能有2個活動頁面。 – Gajotres

解決方案1：

正如我告訴你的意見，JQM樣式無法在頁容器但外部應用不應該阻止你使用它的CSS。

如果您使用的是firefox，請使用firebug插件並查看每個jQM頁面元素，複製其結構和css。用它在頁面容器外部創建樣式。

還有一件事，新元素將被設計，但他們不具備功能，您將需要自行重做。

溶液2：

有一個數據角色裏面的內容=在頁面加載「頁」分區，讓jQuery Mobile的風格的頁面，然後將你的內容的div出的數據角色的= 「page」div是身體標記的孩子。

來源

2012-12-20 13:51:25 Gajotres

是的，菜單沒有jQM功能，因爲它是所有鏈接，但希望有一些方法可以讓jQM形式的功能和樣式，即使它是data-role =「page」之外的元素。僅僅因爲它在頁面之外，所以再次進行重做不太合適。我會嘗試探索其他解決方案，如果我發現有什麼會更新這個。感謝輸入Gajotres！ – Grish

在頁面外應用主題

回答

相關問題