1

私はjQuery 1.9.1とJQM 1.3.0を使用しています。次のコードを使用して、リストビューの場合にすべてのページとサブページでヘッダーとフッターをレンダリングしています:

JavaScript:

$(document).bind("mobileinit", function() {
    $.mobile.defaultTransition = 'none';
});

$(document).on("pagebeforeshow", function () { 

    //var ActivePgURL=($.mobile.activePage.attr('url'));

    var hdhtml = $($.mobile.activePage).children('div').eq(0).clone();
    var fthtml = $($.mobile.activePage).children('div').eq(2).clone();
    $('div:jqmData(role="page")').on('pageinit',function() {
        $('div:jqmData(role="header")').remove();
        $('div:jqmData(role="footer")').remove();
        $('div:jqmData(role="page")').prepend(hdhtml).append(fthtml);
    });
    if( $('div:jqmData(role="page")').length >2 ){
        $('div:jqmData(role="header")').remove();
        $('div:jqmData(role="footer")').remove();
        $('div:jqmData(role="page")').prepend(hdhtml).append(fthtml);
    }

    $('#action_menu').change(actionHandler);
});

$(document).ready(function() {      
    var currentUrl = $.mobile.activePage.data('url');

    $("#header-logo").on("click",function(){
        window.location.href=mobileMainViewUrl;
    });

    $('#mainsrpactbtn').change(serpActionHandler);

    //$('#mainsrpactbtn').selectmenu("refresh");

    $('#searh_action').change(searchToolActHndlr);
});

function pageTitle() {

    var activePgTitle=($.mobile.activePage.attr('title'));

    //alert("this is function X"+activePgTitle);
    return activePgTitle;
} 

function  getUrl() {
    var currentUrl = $.mobile.activePage.data('url');         
    alert("this is the page before create function"+currentUrl);
    return currentUrl;
}

HTML:

<!--These are all my javascript functions I am using, the HTML that renders the the header is as follows -->

<body class="ui-mobile-viewport">

  <div  id="keysearch" data-role="page" data-theme="a" data-url="keysearch" title="Search Results">
    <!-- this is the template that holds the header for the home page  which works as required-->
    <xsl:call-template name="my_page_header"></xsl:call-template>

    <!--I have a control group with two buttons  Refine and parametric the refine is where the problem header is -->
    <div data-role="controlgroup" data-type="horizontal" class="display:inline-block;" id="pm_btns">
      <a data-role="button"  data-theme="c" id="refinebutton" class="f_serp_button" onClick="RefineFunction();"><xsl:value-of select="$refinesrch"/></a>
      <a href="#ParametricPage" data-role="button"  data-theme="c"  id="parametrics" class="f_serp_button ui-disabled" ><xsl:value-of select="$prmtrcsrch"/></a>  
    </div>

    <div data-role="fieldcontain" class="f_hidden" data-theme="c">
      <select data-native-menu="false" name='searh_action' id='searh_action' data-theme="a" ></select>
    </div>  
    <xsl:call-template name="my_page_footer"/>
  </div><!-- /page -->

  <!-- REFINE -->
  <div data-role="page" id="refine" title="Refine">
    <head>
    </head>
    <xsl:call-template name="refine_page_header"></xsl:call-template>
    <div data-role="content" >

      <div data-role="fieldcontain" data-theme="c" class="f_hidden">
        <select data-native-menu="false" name="mainsrpactbtn" id="mainsrpactbtn" data-theme="a"></select>
      </div>  
    </div>
  </div>
</body>

XSLT:

<!--This is the code that renders the refine page header-->

<xsl:template name="refine_page_header">
  <!-- *** replace the following with your own xhtml code or replace the text
       between the xsl:text tags with html escaped html code *** -->

  <div data-role="header" id="refine_header">

    <a data-theme="a"  data-role="button" data-icon="check" rel="external" href="/search?{$all_results_url}#keysearch">Done</a>
    <span id="header-logo" ></span>
    <!-- This is the left action button -->
    <!-- This is the left action button -->
    <a data-role="button" data-theme="a"  rel="external" data-icon="f-action" data-iconpos="notext" href="javascript:callSerpActionButton('mainsrpactbtn', getUrl());"></a>
  </div>

</xsl:template>

絞り込みページには、リストビューをレンダリングするテンプレートがあります。各サブページはヘッダーを取得しますが、アクション ボタンは機能しません。コントロールは機能に入りますが、選択メニューは表示されません。これに関するヘルプは大歓迎です。jQuery と JQM は初めてです。完了ボタンがすべてのページで機能する原因がどこにあるかはわかりません。

PS: 私は調査を行いました。完了ボタンが機能し、選択メニューをレンダリングする他のアクション ボタンが機能しない理由について混乱しています。リストビューは動的ページを作成しますが、ヘッダーが作成され、関数が呼び出されている場合、選択メニューが非表示になるのはなぜですか?

4

0 に答える 0