Jquery mobile: Thay đổi chủ đề khi nhấp vào

Question

Tôi đã có danh sách cơ bản với chủ đề a. Tôi đang cố gắng tìm cách thay đổi chủ đề khi nhấp vào nút. Đã thử $('a li').attr('data-theme','a'); kết hợp với làm mới danh sách mà không có may mắn. Một thành công ngoài kia?

Answer 1

$('a li').data('theme', 'a'); 
          //<-- use the data() function to change data attributes 

Answer 2

Tôi nhận thấy rằng nếu bạn thay đổi thuộc tính "chủ đề dữ liệu", jQuery Mobile sẽ làm mới chủ đề của bạn trên sự kiện di chuột. Giải pháp này là một loại hack, nhưng nó đơn giản.

$("a li").attr("data-theme", "a").trigger("mouseout") 

Xin lỗi vì đã hồi sinh câu hỏi đã chết, nhưng tôi đã tìm thấy câu hỏi này Google (# 6 trên SERP cho "chủ đề thay đổi di động jquery") và không có câu trả lời đúng.

Answer 3

Bạn sẽ phải tìm kiếm trang cho tất cả các lớp ui-body-, ui-button-up, ui-button-down, ui-button-hover và ui-bar-, tìm thư ở cuối mỗi người trong số đó, loại bỏ các lớp đó sau đó thêm chúng trở lại với thư chủ đề mong muốn ở cuối mỗi lớp. Tôi đang làm việc trên một plugin để làm điều đó tại thời điểm này.

dưới đây sẽ thay đổi một trang thiết lập để chủ đề D's thanh đến chủ đề B:

var pages = $("div[data-role='page']"), pageThemeClasses = $(pages+"[class$=d]"); 

$(pageThemeClasses).removeClass('ui-bar-b'); 
$(pageThemeClasses).addClass('ui-bar-b'); 

Answer 4

này đã làm việc cho tôi.

$("a li").removeClass("ui-body-b"); //remove old theme 
$("a li").addClass("ui-body-a"); //add new theme 

Answer 5

Không chắc chắn lý do tại sao điều này làm việc nhưng thay đổi các lớp rồi chủ đề, sau đó kích hoạt 'tạo' hoạt động cho tôi - hy vọng nó giúp ai đó.

$("div[data-role='collapsible']").bind('expand', function() { 
$(this).find("a[data-theme='c']").removeClass('ui-btn-up-c').addClass('ui-btn-up-b').attr('data-theme', 'b').trigger('create'); 
}); 

$("div[data-role='collapsible']").bind('collapse', function() { 
$(this).find("a[data-theme='b']").removeClass('ui-btn-up-b').addClass('ui-btn-up-c').attr('data-theme', 'c').trigger('create'); 
}); 

Answer 6

Vâng, điều đó tùy thuộc vào loại yếu tố bạn đang cố thay đổi. Đây là cách bạn có thể chuyển đổi một yếu tố nút chủ đề:

var oT = $(this).attr('data-theme'); // old theme 
var nT = (oT == 'a' ? 'e' : 'a'); // new theme 

$(this).removeClass('ui-btn-up-' + oT).addClass('ui-btn-up-' + nT).attr('data-theme', nT); 
$(this).parent('div').removeClass('ui-btn-hover-' + oT).addClass('ui-btn-hover-' + nT).removeClass('ui-btn-up-' + oT).addClass('ui-btn-up-' + nT).attr('data-theme', nT); 

Thay vào đó, nếu nó là một thẻ neo với dữ liệu-role = "nút":

$(this).removeClass('ui-btn-hover-' + oT).addClass('ui-btn-hover-' + nT).removeClass('ui-btn-up-' + oT).addClass('ui-btn-up-' + nT).attr('data-theme', nT); 

đơn giản, sử dụng console trình duyệt để kiểm tra trong đó các thuộc tính dữ liệu (và các phần tử cha/con) của thuộc tính data và theme được định nghĩa.

Answer 7

Vâng, câu trả lời từ Corey Docken về cơ bản hoạt động:

$("a li").attr("data-theme", "a").trigger("mouseout") 

Bí quyết là rằng jQuery di động luôn luôn thay đổi các lớp học khi bạn di chuột qua một yếu tố theo quy định của dữ liệu chủ đề choosen. Nếu bạn thay đổi chủ đề dữ liệu, sự kiện di chuột/di chuột tiếp theo sẽ thay đổi các lớp theo chủ đề mới.

Vâng, nó chỉ hoạt động nếu chủ đề mới có chữ cái cao hơn chữ cái cũ. Các lớp học từ chủ đề cũ vẫn còn. Vì các lớp có ký tự cao hơn được đặt sau các chữ cái có chữ cái thấp hơn, lá thư cao hơn sẽ thắng.

Answer 8

Nếu bạn đang sử dụng con lăn chủ đề (themeroller.jquerymobile.com) sau đó bạn có thể điều chỉnh màu sắc của riêng bạn và xuất khẩu từng chủ đề trên css, sau đó lập trình:

$("#idoflink").attr("href", "theotherstyle.css"); 

Tôi nghĩ rằng nó nên làm

Answer 9

Đặt mã này vào đầu:

<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.5.min.css"> 
<script> 
    $(document).on("pagecreate", function() { 
     $("#theme-selector input").on("change", function(event) { 
      var themeClass = $("#theme-selector input:checked").attr("id"); 

      $("#testpage").removeClass("ui-page-theme-a ui-page-theme-b").addClass("ui-page-theme-" + themeClass); 
     }); 
    }); 
</script> 

$ ("#testpage") là một id của thành phần ví dụ (đây sẽ là id trên div chính bên trong cơ thể).

Thêm vào cơ thể:

<div class="ui-field-contain" id="theme-selector"> 
      <fieldset data-role="controlgroup" data-type="horizontal"> 
       <legend>Theme:</legend> 
       <label for="a">A</label> 
       <input type="radio" name="theme" id="a" checked> 
       <label for="b">B</label> 
       <input type="radio" name="theme" id="b">  
      </fieldset> 
     </div> 

Tôi hy vọng đây là câu trả lời cho những gì bạn đang cố gắng để đạt được. Tất nhiên bạn có thể dễ dàng thay thế "radio" bằng "nút" và chỉnh sửa lại một chút.

Answer 10

Năm 2018, điều này phù hợp với tôi, chỉ cần điều chỉnh giá trị của bạn cho các chủ đề khác nhau mà bạn đã tải xuống từ ThemeRoller.

Lấy div người có một dữ liệu-role = "Trang"

var lastTheme = 'a'; 
function ThemeSwap() { 
    var rootDiv = $('#IdOfDivMarkedAsDataRolePage'); 

    if (lastTheme === 'a') { 
     rootDiv.removeClass('ui-page-theme-a'); 
     rootDiv.addClass('ui-page-theme-b'); 
     lastTheme = 'b'; 
    } 
    else if (lastTheme === 'b') { 
     rootDiv.removeClass('ui-page-theme-b'); 
     rootDiv.addClass('ui-page-theme-c'); 
     lastTheme = 'c'; 
    } 
    else if (lastTheme === 'c') { 
     rootDiv.removeClass('ui-page-theme-c'); 
     rootDiv.addClass('ui-page-theme-a'); 
     lastTheme = 'a'; 
    } 
    else 
     alert('bad theme swapping. last theme = ' + lastTheme); 

    rootDiv.trigger('create'); 
    return true; 
} 

Cảnh báo chưa được ném nhưng ở phần cuối của khối ifelse.