從一個位置更改多個jQuery移動“數據主題”屬性

Question

我正在使用jquery mobile開發我的移動網站。 我必須在許多地方設置“數據主題”屬性以包含特定主題。 是否有一個地方可以更改一次（例如在javascript函數中或類似的地方），但是它會導致我所有的元素都變成主題？ 我嘗試將其放入樣式表中，但無法正常工作。

我的htmlCode：

<!DOCTYPE html> 
<html>

<head>
    <script src="jquery.mobile-1.0/demos/jquery.js" type="text/javascript"></script>
    <script src="jquery.mobile-1.0/demos/jquery.mobile-1.0.min.js"  type="text/javascript"></script>
    <script src="CodeGeneral.js" type="text/javascript"></script>

    <link rel="stylesheet" href="jquery.mobile-1.0/demos/jquery.mobile-1.0.min.css">
    <link rel="stylesheet" href="StyleMaincss.css">

    <title>Home</title>
</head>

<body onload="GenerateData();" data-role = "page" >
    <div data-role="header" class="HeaderBar">
    <img src="Logos v2/Header.png" alt="" class="HeaderImage">
    </div> 

    //Content on page

    <div data-role="footer" class="NavBar" data-position="fixed">       
    <div data-role="navbar">
           //Navigation button creation
        </div>
    </div>
</body>

我的JavaScript：

$(document).delegate("[data-role='page']", 'pagebeforecreate', 
    function () {
         $(this).attr('data-theme', 'a')
    }
 ); 

function GenerateData() {
    //Things carried out during loading
}

Answer 1

這是來自jQuery Mobile Docs：

可以將data-theme屬性應用於頁眉和頁腳容器，以應用任何帶字母的主題色樣。 盡管可以將data-theme屬性添加到內容容器中，但建議將其添加到已分配了data-role =“ page”屬性的div或容器中，以確保將背景色應用於整頁。 完成此操作后，頁面上的所有小部件也將繼承頁面容器中指定的主題。 但是，頁眉和頁腳將默認為主題“ a”。 例如，如果要創建一個頁面，其所有元素（包括其頁眉和頁腳）僅包含主題“ b”，則需要為頁面div以及頁眉和頁眉指定data-theme =“ b”。頁腳divs。

資料來源： http : //jquerymobile.com/demos/1.0/docs/pages/pages-themes.html

因此，基本上，如果將data-theme="a"到data-role="page"標簽，則所有內容都應繼承a主題。 您可以通過弄亂上面鏈接頂部的“主題色板更改”鏈接來進行測試。

更新

要以編程方式更改頁面主題，請將以下代碼添加到您的網站：

$(document).delegate('[data-role="page"]', 'pagecreate', function (e) {
    $(this).removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e').addClass('ui-body-a').attr('data-theme', 'a');
});

但這會在渲染網站時給用戶的瀏覽器帶來開銷，因此我建議更改data-role="page"標簽上的硬編碼data-theme屬性。

更新

您也可以通過更改page prototype在mobileinit事件處理程序內執行此操作：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(document).bind('mobileinit', function () {
    $.mobile.page.prototype.options.theme  = "a";
});
</script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

這將使任何頁面沒有一組data-theme屬性默認為a主題。

這是一個演示： http : //jsfiddle.net/tEbD5/3/

從一個位置更改多個jQuery移動“數據主題”屬性

問題描述

1 個解決方案

解決方案1
6 已采納 2011-12-12 18:06:06

從一個位置更改多個jQuery移動“數據主題”屬性

問題描述

1 個解決方案

解決方案1 6 已采納 2011-12-12 18:06:06

解決方案1
6 已采納 2011-12-12 18:06:06