我正在使用 jQuery 1.9.1 和 JQM 1.3.0,我使用以下代码在 listviews 的情况下在所有页面和子页面上呈现页眉和页脚:
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:我已经研究过了。我对为什么我的完成按钮有效而另一个呈现选择菜单的操作按钮无效感到困惑。Listviews 创建动态页面,但是如果正在创建标题并且正在调用函数,为什么选择菜单隐藏?