如何设计滑动页面导航? [英] How to design swipe page navigation?

问题描述

我们要使用几个具有水平过渡的页面，这些页面将通过滑动事件来触发.我想这很安静，但是我无法找到一种向用户指示的方法，即向右滑动即可到达另一个页面.所以我的问题是:

We want to use several pages with horizontal transitions that will be triggered with swipe events. I guess this is quiet common, but what I could not find is a good way to indicate to the user, that there is another page which can be reached with a right swipe. So my questions are:

1)某个地方是否有JQuery Mobile演示，它对此有很好的解决方案?向用户拼写向右滑动即可查看联系人"并不是一件好事.

1) Is there a JQuery Mobile demo somewhere with a good solution to this? It wouldn't be elegant to spell out "swipe right to see contacts" to the user.

2)我认为Windows Phone Panoramas通过在屏幕右边缘显示其他页面的一点来很好地解决了这个问题.这浪费了一些空间，但直观地表明您必须以某种方式向右滚动才能看到更多内容.这可以用jQM吗?

2) I think the Windows Phone Panoramas solve this nicely by showing a little bit of the other page on the right edge of the screen. That wastes some space but makes it intuitively clear that you must scroll to the right somehow to see more. Is this doable with jQM?

推荐答案

我为JQM V1.3编写的此示例在刷卡时指示当前页面.

This sample i wrote for JQM V1.3, indicates current page when swiping.

这是代码

css

#circle { width: 28px; height: 28px; border-radius: 35px; font-size: 12px; color: white; line-height: 28px; text-align: center; background: rgba(0, 180, 255, 0.8); margin:0 auto; }
#circleb { width: 25px; height: 25px; border-radius: 35px; font-size: 12px; color: white; line-height: 25px; text-align: center; background: rgba(0, 0, 0, 0.8); margin:0 auto; }

#pop1, #pop2, #pop3, #pop4, #pop5, #pop6, #pop7, #pop8 { position:fixed; bottom:0px; right: 0%; left: 0%; width: 100%; }

上面显示的pop1到pop8是您有多少页，因此，如果您有2页，则使用pop1和pop2，或者如果您有15页，则使用pop1到pop15.

the pop1 to pop8 you see above is how many pages you have, so if you have 2 pages then use pop1 and pop2 or if you 15 then pop1 to pop15.

现在考虑到移动设备的屏幕宽度，在iPhone上最适合10个气泡.我没有尝试更多，但在平板电脑上您可能会更适合.因此，请考虑更改ccs圆圈大小并设置较小的字体大小.

Now considering the screen width of a mobile device, 10 bubbles fit perfect on an iphone. I haven't tried more but on tablets you probably fit more. So consider changing the ccs circle size and set a smaller font size.

将此内容放入您的页面

  <div data-role="popup" id="pop2" data-theme="a">
  <table width="100%">
  <tr>         
  <td><div id="circleb"><a>1</a></div></td>
  <td><div id="circle"><a>2</a></div></td>
  <td><div id="circleb"><a>3</a></div></td>
  <td><div id="circleb"><a>4</a></div></td>
  <td><div id="circleb"><a>5</a></div></td>
  <td><div id="circleb"><a>6</a></div></td>
  <td><div id="circleb"><a>7</a></div></td>
  <td><div id="circleb"><a>8</a></div></td>
  </tr>
  </table>
  </div>

确保为每个页面更改id ="pop(number)".以上是第2页(pop2) 还要在表格上记下id ="circle"是活动的蓝色，id ="circleb"是黑色的，因此请为每个页面进行更改

make sure you change the id="pop(number)" for each page. the above is for page 2 (pop2) also make a note on the table id="circle" is the active blue, id="circleb" is the black, so change that for each page

并在页面顶部添加此javascript

and add this javascript in the head of the page

 $( '#page1' ).live( 'pageshow',function(event){
  setTimeout(function () {
  $( "#pop1" ).show();
  }, 100); 
  setTimeout(function () {
  $( "#pop1" ).hide();
 }, 1500); 
 });

现在该代码用于第一页，因此您需要像第二页一样对每一页重复该代码

now that code is for page one, so you need to repeat the code for each page like for page two lets say

 $( '#page2' ).live( 'pageshow',function(event){
  setTimeout(function () {
  $( "#pop2" ).show();
  }, 100); 
  setTimeout(function () {
  $( "#pop2" ).hide();
 }, 1500); 
 });

最多重复您拥有的页面

确保您的data-role ="page"具有与上述代码相似的ID

make sure your data-role="page" has the id's to relate like the above codes

 <div data-role="page" id="page1" data-theme="a" data-dom-cache="true" >

就是这样

这篇关于如何设计滑动页面导航?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！