2016-01-20 4 views
-1

много свитка JQuery плагины работают как это: http://manos.malihu.gr/repository/page-scroll-to-id/demo/demo.html и http://alvarotrigo.com/fullPage/#firstPageПрокрутка между отдельными страницами .html

Они прокручивать между секциями.

Вопросы: Существуют ли также плагины или решение, прокручивать между .html страниц:

  • вверх (при достижении вершины он прокручивает на предыдущую страницу) и
  • вниз (при достижении нижней части его прокручивается до следующей страницы)

Пример, но не работает, как я хочу:

http://vostrel.cz/so/9652944/page.html

Он использует эти коды:

(function($){ 

var jump=function(e) 
{ 
    if (e){ 
     e.preventDefault(); 
     var target = $(this).attr("href"); 
    }else{ 
     var target = location.hash; 
    } 

    $('html,body').animate(
    { 
     scrollTop: $(target).offset().top 
    },1000,function() 
    { 
     location.hash = target; 
    }); 

} 

$('html, body').hide() 

$(document).ready(function() 
{ 
    $('a[href^=#]').bind("click", jump); 

    if (location.hash){ 
     setTimeout(function(){ 
      $('html, body').scrollTop(0).show() 
      jump() 
     }, 0); 
    }else{ 
     $('html, body').show() 
    } 
}); 

})(jQuery) 

Посмотри здесь работает: http://vostrel.cz/so/9652944/page.html

Но он пропускает (А) при достижении верхней прокрутки на странице 1 и (В), при достижении нижней прокрутки на стр. 2 и (C) при прокрутке вверх прокрутите вверх, при прокрутке вниз прокрутите вниз. Пример всегда прокручивается в одном направлении, и это тоже проблема.

Приведенные выше коды являются лишь примером. Может быть, у кого-то есть намного лучшие коды. Главное намерение - сделать мою идею понятной. Надеюсь, это иллюстрирует то, чего я хочу достичь. Заранее благодарю за любую помощь.

+0

Сообщение код здесь, а не просто ссылку –

+3

Вы забыли ту часть, где вы задать вопрос ... – David

+0

ВОПРОС ОБНОВЛЕНО – Cinzel

ответ

0

В горизонтальной прокрутки (салфетки) направлении (или оно может быть изменено в вертикальном направлении, если вы хотите), то можно сделать так:

HTML:

<div data-role="page" id="city" class="demo-page" data-dom-cache="true" data-theme="a" data-prev="prevCity" data-next="nextCity" data-url="city"> 
<!-- "city", "prevCity" and "nextCity" are used as placeholders and contain the name of the applicable city in our demo files. --> 
<div data-role="header" data-position="fixed" data-fullscreen="true" data-id="hdr" data-tap-toggle="false"> 
    <h1>City</h1> 
    <a href="swipe-page.html" data-direction="reverse" data-icon="delete" data-iconpos="notext" data-shadow="false" data-icon-shadow="false">Back</a> 
</div><!-- /header --> 
<div data-role="content"> 
    <div id="trivia-city" class="trivia ui-content" data-role="popup" data-position-to="window" data-tolerance="50,30,30,30" data-theme="d"> 
     <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a> 
     <p>Here some text.</p> 
    </div><!-- /popup --> 
</div><!-- /content --> 
<div data-role="footer" data-position="fixed" data-fullscreen="true" data-id="ftr" data-tap-toggle="false"> 
    <div data-role="controlgroup" class="control ui-btn-left" data-type="horizontal" data-mini="true"> 
     <a href="#" class="prev" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="d">Previous</a> 
     <a href="#" class="next" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="d">Next</a> 
    </div> 
    <a href="#trivia-city" data-rel="popup" class="trivia-btn ui-btn-right" data-role="button" data-icon="info" data-iconpos="left" data-theme="d" data-mini="true">Trivia</a> 
</div><!-- /footer --> 

JS:

$(document).on("pageinit", "[data-role='page'].demo-page", function() { 
var page = "#" + $(this).attr("id"), 
    // Get the filename of the next page that we stored in the data-next attribute 
    next = $(this).jqmData("next"), 
    // Get the filename of the previous page that we stored in the data-prev attribute 
    prev = $(this).jqmData("prev"); 
// Check if we did set the data-next attribute 
if (next) { 
    // Prefetch the next page 
    $.mobile.loadPage(next + ".html"); 
    // Navigate to next page on swipe left 
    $(document).on("swipeleft", page, function() { 
     $.mobile.changePage(next + ".html", { transition: "slide" }); 
    }); 
    // Navigate to next page when the "next" button is clicked 
    $(".control .next", page).on("click", function() { 
     $.mobile.changePage(next + ".html", { transition: "slide" }); 
    }); 
} 
// Disable the "next" button if there is no next page 
else { 
    $(".control .next", page).addClass("ui-disabled"); 
} 
// The same for the previous page (we set data-dom-cache="true" so there is no need to prefetch) 
if (prev) { 
    $(document).on("swiperight", page, function() { 
     $.mobile.changePage(prev + ".html", { transition: "slide", reverse: true }); 
    }); 
    $(".control .prev", page).on("click", function() { 
     $.mobile.changePage(prev + ".html", { transition: "slide", reverse: true }); 
    }); 
} 
else { 
    $(".control .prev", page).addClass("ui-disabled"); 
} 

});

CSS:

/* Set the background image sources */ 
#newyork { background-image: url(../../_assets/img/newyork.jpg); } 
#buenosaires { background-image: url(../../_assets/img/buenosaires.jpg); } 
#paris { background-image: url(../../_assets/img/paris.jpg); } 
#capetown { background-image: url(../../_assets/img/capetown.jpg); } 
#seoul { background-image: url(../../_assets/img/seoul.jpg); } 
#sydney { background-image: url(../../_assets/img/sydney.jpg); } 
/* Background settings */ 
.demo-page { 
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 
} 
/* Transparent footer */ 
.demo-page .ui-footer { 
    background: none; 
    border: none; 
    bottom: 0; 
} 
/* The footer won't have a height because there are only two absolute positioned elements in it. 
So we position the buttons from the bottom. */ 
.control.ui-btn-left, .trivia-btn.ui-btn-right { 
    top: auto; 
    bottom: 7px; 
    margin: 0; 
} 
/* Custom styling for the trivia source */ 
small { 
    font-size: .75em; 
    color: #666; 
} 
/* Prevent text selection while swiping with mouse */ 
.demo-page .ui-header, .ui-title, .control .ui-btn, .trivia-btn { 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    -o-user-select: none; 
    user-select: none; 
} 

DEMO: http://demos.jquerymobile.com/1.3.2/examples/swipe/newyork.html

ДОКУМЕНТАЦИЯ: http://demos.jquerymobile.com/1.3.2/examples/swipe/swipe-page.html

Смежные вопросы