Look at the title is not feeling very drag appearance, in fact, there is nothing, that is often said the single page application. This Web form in today's mobile is very popular, after all, on the mobile side frequently have to refresh the interface is not very friendly, but also cost traffic. Today we are going to make a small app (mobile) to uncover the secrets of history. First, let's look at the core approach:
Window.history.pushState: Method: For Histroy to establish a history, the method passed three functions: 1, the corresponding URL information 2, the next interface title 3, you need to dynamically change the address bar in Germany URL
Window.history.state: attribute: The state of information in the current history.
Window.history.replaceState: Method: Replace the previous history content record with this information, the incoming parameters are the same as the first one.
First, you don't have to cling to some of the above definitions. When I first saw these instructions, I was also confused and really knew that they were using them. Without further ado, we first create the HTML structure to:
To achieve a simple interface switch, we first have to create three interfaces, of course, for convenience, these three interfaces are three div (a,b,c full screen, absolute positioning) and a button (to add historical content Records):
<!DOCTYPE HTML><HTML><Head> <title>History back</title> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1"> <Scripttype= "Text/javascript"src= "Zepto.js"></Script> <Linkrel= "stylesheet"type= "Text/css"href= "History.css"></Head><Body> <Divclass= "a"><P>What we talk about when we talk about love</P><span>A</span></Div> <Divclass= "b None"><P>Quell nous sommes parlons lorsqur nous parlons d ' amour</P><span>B</span></Div> <Divclass= "C None"><P>When we're talking about love, what are we talking about?</P><span>C</span></Div> <Buttonclass= "Forward">FORWARD</Button></Body></HTML>
Page flipping effect, can be simple, here, I made an animation, using CSS3 3d animation properties, to create a simple animation effect. If you feel trouble, you can directly element the display and hide, but in the actual project, I recommend the use of animation over-effects, so that not only improve the customer experience, and you can take advantage of many new CSS3, for the web2.0 era of the front-end elite This is a required course. Here is the CSS code for the Toggle effect:
@-webkit-keyframes Sliderightout{from{-webkit-transform:translatex (0px);} To{-webkit-transform:translatex (50%);}} @-webkit-keyframes Slideleftin{from{-webkit-transform:translatex (-50%);} To{-webkit-transform:translatex (0px);}} @-webkit-keyframes Slideleftout{from{-webkit-transform:translatex (0px);} To{-webkit-transform:translatex (-50%);}} @-webkit-keyframes Sliderightin{from{-webkit-transform:translatex (50%);} To{-webkit-transform:translatex (0px);}}. Slideleftout{-webkit-animation:slideleftout 350ms ease-in-out;}. Slideleftin{-webkit-animation:slideleftin 350ms ease-in-out;}. Sliderightout{-webkit-animation:sliderightout 350ms ease-in-out;}. Sliderightin{-webkit-animation:sliderightin 350ms ease-in-out;}. Animatestart{position:absolute;top:0;left:0;z-index:3;width:100%;height:100%;overflow-x:hidden}. Animatestart.page-container{overflow-x:hidden;-webkit-transform:translate3d (0,0,0);-webkit-backface-visibility : Hidden;background-color: #f5f5f5} Then the CSS code that controls the display of each element of the interface, arranges the various interfaces (div P button span).
*{padding:0;margin:0;}. none {Display:none;} div { position:absolute; height:100%; width:100%; Color: #fff;} Div span {display:block;font-size:6.5em;text-align:center;} Div p {font-size:1.2em;} button { position:absolute; height:40px; width:100px; border-radius:6px; Background: #fff; bottom:50px; border:0;} button.back { left:20px;} Button.forward {right:20px;}. A {background: #19a39e;}. B{background:rgb (245, 81, 81);}. C{BACKGROUND:RGB (71, 142, 30);}Next is the point, our idea is to first give the history of the browser to fill the record, this needs to be done manually, this is the mission of the button, so we first bound forward button:
//first adds a record to the history so that the first and later interfaces appear to be forever page= X End Window.history.pushState ({info: ' A '}, ' Page ', '? Page=a ');//data source var Source = [{cls: ' A ', url: '? page=a '},{cls: ' B ', url: '? page=b '},{cls: ' C ', url: '? page=c '}],//data source's following table, K = 0,//Interface Rally Property List index = [' A ', ' B ', ' C '],//record the list of the order of each interface jump stoage = []; The tap event of the bind button, we do the test on the mobile side, using the Tap,zepto will help us translate the event $ ('. Forward '). On (' Tap ', function () {if (Source[k]) {///Remove the data source of an interface var m = source[++k];//fill the history record here, Pushstate is the method is not caused by the interface refresh, but it will change the browser fallback/forward behavior, when performing this step can see the Address bar in the URL changes. Window.history.pushState ({info:m.cls}, ' Page ', m.url);//Save the program name to Stoage list Stoage.push (window.history.state.info) ;//The following is a toggle animation, because here is to simply do is to move forward the action, so the animation is right-to-left switching order $ ('. ' + m.cls). Removeclass (' None '). addclass ("Animatestart Sliderightin "); SetTimeout (function () {/////The end of the animation resets the class $ ('. ') + source[k-1].cls). addclass (' none '); $ ('. ' + m.cls). Removeclass (' Animatestart sliderightin '); }, 350); }})What is done above is simply to use the DOM event jump interface in the interface, to use the forward and backward buttons to implement a no-refresh jump program We need to listen to the event of the Popstate event, which is the fallback/forward behavior:
Using Stoage's storage and order rules in the index list, put back the animation rollover, from left to right, or right to left function J () {var L = stoage.length;if (Index.indexof (Stoage[l-2]) < Index.indexof (Stoage[l-1]) {return ' Animatestart sliderightin ';} Else{return ' Animatestart slideleftin ';} Start listening for browser's forward/Backward behavior $ (window). On (' Popstate ', function (state) {//Remove button $ ('. Forward '). Remove (); Save this interface name in the Stoage list Stoage.push (window.history.state.info);//Get the name of the previous interface var thiscls = stoage[stoage.length-2];// Get the name of the current interface var nextcls = stoage[stoage.length-1];//vs. two interface get animated effect var cls = j ();//Perform animation effect $ ('. ' + nextcls). Removeclass (' None ') ). addclass (CLS); SetTimeout (function () {////animation at the end of reset Clas $ ('. ') + thiscls). addclass (' none '); $ ('. ' + nextcls). Removeclass (CLS); }, 350); });By clicking on the button, we see that the browser's fallback button is already enabled, we click Rewind, observe the change of the URL and the change of the interface.
Page=c into a page=b, animation effect is from left to right, the interface is such a successful switch, the interface is not refreshed, try several times.
A->b
B->c
This allows us to implement a click-back/forward button to achieve a single interface without a refresh switch.
There is another way of doing things, even if you use the hash change monitoring onhashchange to achieve a no-refresh interface switch, you must have thought that backbone is doing so. But for smaller projects, I suggest '? ' (pass value) is not a ' # ' (hash), because the non-brush jump means to use with the tool Ajax, using '? ' The advantage is that even if the user forces to refresh the interface, we can also give the background parameters, tell the background we are in which interface, what kind of data needed to unify with the previous paragraph of Ajax. Because? The number represents search, and when it is refreshed, it passes the get type data to the background. The # number (hash value) does not do so. Of course, you can use your intelligence to change this situation, it is a matter of opinion.
Using history to implement a no-refresh jump interface
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
