JavascriptでHTMLスニペットを挿入した後、JQMのボタンにヘッダを合わせる

Javascriptを使用してページのヘッダ（JQM）にタイトルを挿入しようとしています。サブスクリプション機能を有効にして、JavaScriptを介してボタンを挿入する必要もあります。しかし、私はそれを注入するたびに、それは乱雑になってきている。ボタンをタイトルに合わせたいと思っています。タイトルをヘッダの中央にします。ボタンとタイトル（JS）を挿入するためにこれらの行を使用して Here's a picture to demonstrate how it looks right now JavascriptでHTMLスニペットを挿入した後、JQMのボタンにヘッダを合わせる

と私は（それが今持っているように）それがすべてではありません改行して、完全に整列する

イム：

   document.getElementById("forum_name").innerHTML = fName; 
      document.getElementById("subscribe_btn").innerHTML = "&nbsp; <a href='#' class='ui-btn'>Unsubscribe</a>";

HTMLファイルに次の行を使用して

とIM：

 <div data-role="header"><span style="display:inline;" id="subscribe_btn"></span><center><div id="forum_name" style="display:inline-block"></div></center></div>

出典

2017-05-04 Nutz

あなたは私たちが手助けをしたい場合は、スクリーンショットの持っているものを複製し、コードをポストする必要があります。 @michaelCokerを編集する[mcve] –

の作成方法をご覧ください！ – Nutz

JQMを使用すると、道以下のことを行うことができます。

を

var subscribeText = "Subscribe", unsubscribeText = "Unsubscribe"; 
 

 
function changeSubscription() { 
 
    var choiche = $('input[name=rg-subscription]:checked'), 
 
    value = choiche.val(), 
 
    label = choiche.parent().text(); 
 
    $("#toggleSubscription").toggleClass("ui-screen-hidden", value == "no-subscription"); 
 
    if (value == "no-subscription") { 
 
    $("#toggleSubscription").text(subscribeText); 
 
    } 
 
    var pageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id"); 
 
    $("#" + pageId + " [data-role='header'] h1").text(label); 
 
} 
 

 
$(document).on("pagecreate", "#page-1", function(e) { 
 
    $("input[name='rg-subscription']").change(changeSubscription); 
 
    $("#toggleSubscription").on("vclick", function(e) { 
 
    $(this).text($(this).text() === subscribeText ? unsubscribeText : subscribeText); 
 
    }); 
 
    $("#injectButton").click(injectButton); 
 
}); 
 

 
$(document).on("pagebeforeshow", "#page-1", function(e, ui) { 
 
    changeSubscription(); 
 
}); 
 

 
function injectButton() { 
 
    $("#toggleSubscription").off(); 
 
    var html = [ 
 
    '<button id="toggleSubscription" ', 
 
    'class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all">', 
 
    'Subscribe', 
 
    '</button>' 
 
    ].join(""); 
 
    $("#toggleSubscription").remove(); 
 
    $("#page-1 [data-role='header']").prepend(html).enhanceWithin(); 
 
    $("#toggleSubscription").on("vclick", function(e) { 
 
    $(this).text($(this).text() === subscribeText ? unsubscribeText : subscribeText); 
 
    }); 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> 
 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="page-1" data-role="page"> 
 
    <div data-role="header"> 
 
     <h1>Header</h1> 
 
    </div> 
 
    <div role="main" class="ui-content" id="page-1-content"> 
 

 
      <fieldset data-role="controlgroup" data-mini="true"> 
 
      <input name="rg-subscription" id="rc-subscription-0" value="no-subscription" checked="checked" type="radio"> 
 
      <label for="rc-subscription-0">no subscription</label> 
 
      <input name="rg-subscription" id="rc-subscription-1" value="alt-binaries-mp3" type="radio"> 
 
      <label for="rc-subscription-1">alt.binaries.mp3</label> 
 
      <input name="rg-subscription" id="rc-subscription-2" value="alt-binaries-linux" type="radio"> 
 
      <label for="rc-subscription-2">alt.binaries.linux</label> 
 
      <input name="rg-subscription" id="rc-subscription-3" value="alt-binaries-games" type="radio"> 
 
      <label for="rc-subscription-3">alt.binaries.games</label> 
 
      </fieldset> 
 

 
     <button id="injectButton" class="ui-btn ui-btn-inline ui-mini ui-corner-all">Inject "Subscribe" Button</button> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-05-05 17:47:42 deblocker

JavascriptでHTMLスニペットを挿入した後、JQMのボタンにヘッダを合わせる

答えて

関連する問題