我尝试使用以下来源将Jquery移动滑动集成到我网站上的网页。
http://demos.jquerymobile.com/1.3.2/examples/swipe/swipe-page.html
我已遵循语法并已将文件和结构添加到我的网站。但是，它仅在我点击下一个/上一个按钮时才工作，而不是在我实际滑动时？
我添加了所有CSS＆amp; JS代码让我很困惑为什么它不起作用。我甚至在每次刷卡后都将日志添加到控制台，以检查是否有任何事情发生，当我刷日志时？我无法链接到我正在处理的页面，因为它不在线，但是我使用的代码是：
// Pagecreate will fire for each of the pages in this demo
// but we only need to bind once so we use "one()"
$( document ).one( "pagecreate", ".page", function() {
// Initialize the external persistent header and footer
$( "header" ).toolbar({ theme: "b" });
$( "footer" ).toolbar({ theme: "b" });
// Handler for navigating to the next page
function navnext( next ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", next, {
transition: "slide"
});
}
// Handler for navigating to the previous page
function navprev( prev ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", prev, {
transition: "slide",
reverse: true
});
}
// Navigate to the next page on swipeleft
$( document ).on( "swipeleft", ".ui-page", function( event ) {
console.log('swiped left');
// Get the filename of the next page. We stored that in the data-next
// attribute in the original markup.
var next = $( this ).jqmData( "next" );
console.log(next);
// Check if there is a next page and
// swipes may also happen when the user highlights text, so ignore those.
// We're only interested in swipes on the page.
if ( next && ( event.target === $( this )[ 0 ] ) ) {
navnext( next );
console.log('Found next page');
}
});
// Navigate to the next page when the "next" button in the footer is clicked
$( document ).on( "click", ".next", function() {
var next = $( ".ui-page-active" ).jqmData( "next" );
// Check if there is a next page
if ( next ) {
navnext( next );
}
});
// The same for the navigating to the previous page
$( document ).on( "swiperight", ".ui-page", function( event ) {
console.log('Swiped right');
var prev = $( this ).jqmData( "prev" );
console.log(prev);
if ( prev && ( event.target === $( this )[ 0 ] ) ) {
navprev( prev );
}
});
$( document ).on( "click", ".prev", function() {
var prev = $( ".ui-page-active" ).jqmData( "prev" );
if ( prev ) {
navprev( prev );
}
});
});
$( document ).on( "pageshow", ".page", function() {
var thePage = $( this ),
title = thePage.jqmData( "title" ),
next = thePage.jqmData( "next" ),
prev = thePage.jqmData( "prev" );
console.log(thePage);
// We use the same header on each page
// so we have to update the title
$( ".breadcrumbs h1" ).text( title );
// Prefetch the next page
// We added data-dom-cache="true" to the page so it won't be deleted
// so there is no need to prefetch it
if ( next ) {
$( ":mobile-pagecontainer" ).pagecontainer( "load", next );
console.log('prefetched page');
}
// We disable the next or previous buttons in the footer
// if there is no next or previous page
// We use the same footer on each page
// so first we remove the disabled class if it is there
$( ".next.ui-state-disabled, .prev.ui-state-disabled" ).removeClass( "ui-state-disabled" );
if ( ! next ) {
$( ".next" ).addClass( "ui-state-disabled" );
}
if ( ! prev ) {
$( ".prev" ).addClass( "ui-state-disabled" );
}
});
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body class="archive category category-issue-39 category-42 logged-in">
<header>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid" style="position:relative;">
<div class="breadcrumbs hidden-md hidden-sm hidden-xs visible-lg">
<a class="breadcrumb-link" href="http://issues">Issues</a> <a class="breadcrumb-link">Market Review N°39</a>
</div><a href="http://"><img alt="Jackson Stops Logo" class="logo" src="http://img/logo.svg"></a>
<nav class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="nav navbar-nav" style="margin-left: 2em">
<div class="menu-main-container">
<ul class="menu" id="menu-main">
<li class="hidden-md menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-1754" id="menu-item-1754">
<a href="http://">Home</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3199" id="menu-item-3199">
<a href="http://issues">Issues</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3198" id="menu-item-3198">
<a href="http://topics">Topics</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3391" id="menu-item-3391">
<a href="http://500k">500k Properties</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3400" id="menu-item-3400">
<a href="http://www.jackson-stops.co.uk/downloads.html" target="_blank">Downloads</a>
</li>
</ul>
</div>
</div>
</nav><button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
</div>
</div>
</div>
</header>
<div id="user-logged-in">
<div class="breadcrumbs">
<h1>Issue N°39</h1>
</div>
<div class="page" data-dom-cache="true" data-next="issue-38" data-prev="issue-40" data-role="page" data-theme="b" data-title="N°39" id="issue-39">
<div class="container">
<article class="section featured">
<div class="article-body">
<div class="article-image" style="background-image:url('http://wp-content/uploads/2017/04/C3_Richmond_TW10_£9750001.jpg')"></div>
<div class="article-info">
<p class="article-sub-header">As central London would-be buyers and sellers hold back, the focus of activity has shifted to traditional family house... <a class="read-more-link btn btn-large" href="http://issue-39/london-market/sound-of-the-suburbs">Read more...</a></p>
</div>
</div>
<div class="article-title">
<div class="article-meta">
<span><a href="http://london-market" rel="tag">London Market</a></span> <span><span class='span-reading-time'>3</span> minutes</span>
</div>
<h2>Sound of the Suburbs</h2>
</div>
</article>
<article class="section white">
<div class="article-title">
<div class="article-meta">
<span><a href="http://country-market" rel="tag">Country Market</a></span> <span><span class='span-reading-time'>3</span> minutes</span>
</div>
<h2>Cash Trumps Caution</h2>
</div>
<div class="article-body">
<div class="article-image" style="background-image:url('http://wp-content/uploads/2017/04/C3_Cirencester_Herefordshire_71772_£1495000_IFC_Larger.jpg')"></div>
<div class="article-info">
<p class="article-sub-header">Many of the business owners we deal with are better off than they expected to be right now and,... <a class="read-more-link btn btn-large" href="http://issue-39/country-market/cash-trumps-caution">Read more...</a></p>
</div>
</div>
</article>
<article class="section">
<div class="article-title">
<div class="article-meta">
<span><a href="http://lettings-market" rel="tag">Lettings Market</a></span> <span><span class='span-reading-time'>2</span> minutes</span>
</div>
<h2>Rentals reflect new realities</h2>
</div>
<div class="article-body">
<div class="article-image" style="background-image:url('http://wp-content/uploads/2017/04/C3_Norfolk_71893_£2000_per_month.jpg')"></div>
<div class="article-info">
<p class="article-sub-header">As one traditional mainstay of rental activity declines, others are arising thick and fast, from all manner of new... <a class="read-more-link btn btn-large" href="http://issue-39/lettings-market/rentals-reflect-new-realities">Read more...</a></p>
</div>
</div>
</article>
<article class="section white">
<div class="article-title">
<div class="article-meta">
<span><a href="http://lettings-market" rel="tag">Lettings Market</a></span> <span><span class='span-reading-time'>2</span> minutes</span>
</div>
<h2>Sales & rental interactions reflect new realities</h2>
</div>
<div class="article-body">
<div class="article-image" style="background-image:url('http://wp-content/uploads/2017/04/C3_Cranbrook_Kent_£2800000_65858.jpg')"></div>
<div class="article-info">
<p class="article-sub-header">From different levels of inter-generational wealth, to different expectations from Brexit and a broad social acceptance of renting, property... <a class="read-more-link btn btn-large" href="http://issue-39/lettings-market/sales-rental-interactions-reflect-new-realities">Read more...</a></p>
</div>
</div>
</article>
<article class="section">
<div class="article-title">
<div class="article-meta">
<span><a href="http://international" rel="tag">International</a></span> <span><span class='span-reading-time'>2</span> minutes</span>
</div>
<h2>Tuscan bargains balance lower pound</h2>
</div>
<div class="article-body">
<div class="article-image" style="background-image:url('http://wp-content/uploads/2017/04/C3_Tuscany_£POA.jpg')"></div>
<div class="article-info">
<p class="article-sub-header">From Barbados to the Balearics, Brits wanting to buy are pitching against competitors whose dollars, euros and yuan are... <a class="read-more-link btn btn-large" href="http://issue-39/international/tuscan-bargains-balance-lower-pound">Read more...</a></p>
</div>
</div>
</article>
<article class="section white">
<div class="article-title">
<div class="article-meta">
<span><a href="http://new-homes" rel="tag">New Homes</a></span> <span><span class='span-reading-time'>2</span> minutes</span>
</div>
<h2>Off-plan sales boom in quest for quality and character</h2>
</div>
<div class="article-body">
<div class="article-image" style="background-image:url('http://wp-content/uploads/2017/04/C3_Cirencester_69504_£1095000-1.jpg')"></div>
<div class="article-info">
<p class="article-sub-header">Louisa Hooper of the Exeter New Homes team reports that even she has been a little taken aback by... <a class="read-more-link btn btn-large" href="http://issue-39/new-homes/off-plan-sales-boom-in-quest-for-quality-and-character">Read more...</a></p>
</div>
</div>
</article>
<article class="section half">
<div class="article-title">
<div class="article-meta">
<span><a href="http://home-stories" rel="tag">Home Stories</a></span> <span><span class='span-reading-time'>2</span> minutes</span>
</div>
<h2>Toyah Willcox</h2>
</div>
<div class="article-body">
<div class="article-image" style="background-image:url('http://wp-content/uploads/2017/04/toya.jpg')"></div>
<div class="article-info">
<p class="article-sub-header">Toyah Willcox was born in Kings Heath in Birmingham, in the family home her grandfather built around 1946. She... <a class="read-more-link btn btn-large" href="http://issue-39/home-stories/toyah-willcox">Read more...</a></p>
</div>
</div>
</article>
<article class="section half">
<div class="article-title">
<div class="article-meta">
<span><a href="http://private-finance" rel="tag">Private Finance</a></span> <span><span class='span-reading-time'>1</span> minutes</span>
</div>
<h2>Beware the cost of 90% mortgages</h2>
</div>
<div class="article-body">
<div class="article-image" style="background-image:url('http://wp-content/uploads/2016/08/private_finance_14_lg.jpg')"></div>
<div class="article-info">
<p class="article-sub-header">The number of lenders willing to grant 90% mortgages to first-time buyers is growing, but their costs compare so... <a class="read-more-link btn btn-large" href="http://issue-39/private-finance/beware-the-cost-of-90-mortgages">Read more...</a></p>
</div>
</div>
</article>
</div>
</div>
</div>
<div data-fullscreen="true" data-id="footer" data-position="fixed" data-tap-toggle="false" id="footer">
<div class="control ui-btn-left" data-mini="true" data-role="controlgroup" data-type="horizontal">
<a class="prev ui-btn ui-btn-icon-notext ui-icon-carat-l" href="#">Previous</a> <a class="next ui-btn ui-btn-icon-notext ui-icon-carat-r" href="#">Next</a>
</div>
</div><!-- /footer -->
</body>
</html>
修改
我已发布该页面，因此您可以看到代码http://www.ukmarketreview.co.uk/issue-30