Skip to content

Instantly share code, notes, and snippets.

@jocoonopa

jocoonopa/prState.html

Last active December 28, 2015 11:09
Show Gist options
  • Save jocoonopa/7491049 to your computer and use it in GitHub Desktop.
Save jocoonopa/7491049 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
prState.html
<!doctype html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<title>pushState和replaceState介紹</title>
<link rel="stylesheet" href="//addyosmani.github.io/jquery-ui-bootstrap/css/custom-theme/jquery-ui-1.10.3.custom.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<button class="replace ui-button-info">replaceState Trigger </button><br/>
<button class="push ui-button-success">pushState Trigger </button><br/>
<label>page:</label>
<input type="text" name="nowUrl" value="" placeholder="現在的URL" />
<div style="width: 80%; height: 500px; margin: 0 0 0 50px; background-color: #edffff;"></div>
</body>
<script>
$(function () {
var prStateApp = function () {
var controller = {
// Bind the click events on buttons
bindEvents: function ( $button ) {
$button.each(function () {
$( this ).on( 'click', function () {
controller.moveBodyRight( $( this ) );
});
});
return this;
},
// update history entry
updateHistory: function ( $button ) {
// window.history , but you know that js will set default obj window so we ingore
// pushState create new history entry, you can test it in this example
// replaceState replace the current histroy, you can test it in this example
if ( $button.hasClass( 'push' ) ) {
model.count ++;
history.pushState( model.stateObject, 'Not important, may use in the future', 'page' + model.count);
} else {
model.count = -model.count;
history.replaceState( model.stateObject, 'Not important, may use in the future', 'page' + model.count);
}
console.log( history.state[ 'somethingCanBeSerialized' ] + model.count);
// update input value , its an URL
return this.updateInput();
},
// update input value , its an URL
updateInput: function () {
view.$input.val( model.count );
return this;
},
// history.back()
bindPopState: function () {
$( window ).bind( 'popstate' , function ( e ) {
var sURL = controller.getURL();
nStrPos = parseInt( sURL.indexOf( 'page' ) ) + parseInt( 'page'.length );
model.count = $.isNumeric( sURL.substr( nStrPos ) )
? sURL.substr( nStrPos ) : model.count;
console.log( model.count );
controller.updateInput().updateBody();
});
return this;
},
getURL: function () {
return model.sURL = document.URL;
},
updateBody: function () {
return view.$div.load( 'music.html', function() {
//Bind music function on select
controller.changeMusic();
view.$div.effect( 'drop', {}, 500, function () {
view.$div.hide(500).fadeIn(500);
});
});
},
moveBodyRight: function ( $button ) {
view.$div.stop().animate({ 'margin-left': 2000 }, 700, function() {
controller.updateHistory( $button );
view.$div.css( { 'margin-left': -2000 } ).stop()
.animate( { 'margin-left': 50 }, 700 );
});
return this;
},
changeMusic: function () {
var $select = $( 'select' ),
$container = $( 'div' ).filter( '.container' );
$select.on( 'change', function () {
var $this = $(this),
_val = $this.val(),
_src = '';
switch ( _val )
{
case '1':
_src="<iframe marginwidth='0' marginheight='0' src='http://vlog.xuite.net/embed/S21YQWhTLTExOTg4NDk5LmZsdg==?v=1.0.1&ar=1&as=1' scrolling='no' frameborder='0' width='640' height='360'></iframe>";
break;
case '2':
_src="<iframe marginwidth='0' marginheight='0' src='http://vlog.xuite.net/embed/Ym1Pcmh3LTEwMjUyNjQ5LmZsdg==?v=1.0.1&ar=1&as=1' scrolling='no' frameborder='0' width='180' height='60'></iframe>";
break;
case '3':
_src="<iframe marginwidth='0' marginheight='0' src='http://vlog.xuite.net/embed/aWthTGFRLTExNDg2Mzk5LmZsdg==?v=1.0.1&ar=1&as=1' scrolling='no' frameborder='0' width='180' height='60'></iframe>";
break;
case '4':
_src="<iframe marginwidth='0' marginheight='0' src='http://vlog.xuite.net/embed/VXhJOGdpLTM0MDc1MzIuZmx2?v=1.0.1&ar=1&as=1&volume=100' scrolling='no' frameborder='0' width='180' height='60'></iframe>";
break;
case '5':
_src="<iframe marginwidth='0' marginheight='0' src='http://vlog.xuite.net/embed/aERYYTh4LTI5NDU2MTUuZmx2?v=1.0.1&ar=1&as=1&volume=100' scrolling='no' frameborder='0' width='180' height='60'></iframe>";
break;
case '6':
_src="<iframe marginwidth='0' marginheight='0' src='http://vlog.xuite.net/embed/MzNORXlKLTUzNjgyOTEuZmx2?v=1.0.1&ar=1&as=1' scrolling='no' frameborder='0' width='180' height='60'></iframe>";
break;
case '7':
_src="<iframe marginwidth='0' marginheight='0' src='http://vlog.xuite.net/embed/S0RZbmR0LTg0MTU1ODYuZmx2?v=1.0.1&ar=1&as=1&volume=100' scrolling='no' frameborder='0' width='640' height='360'></iframe>";
break;
case '8':
_src="<iframe marginwidth='0' marginheight='0' src='http://vlog.xuite.net/embed/ZTJNN1JILTQ0MzM1MDMuZmx2?v=1.0.1&ar=1&as=1&volume=100' scrolling='no' frameborder='0' width='640' height='360'></iframe>";
break;
case '9':
_src="<iframe marginwidth='0' marginheight='0' src='http://vlog.xuite.net/embed/c25keTI0LTQ1MjE3MjMubXA0?v=1.0.1&ar=1&as=1&volume=100' scrolling='no' frameborder='0' width='640' height='360'></iframe>";
break;
default:
break;
}
$container.html( _src );
});
}
},
view = {
setup: function ( $app ) {
this.$app = $app;
this.$div = this.$app.find( 'div' );
this.$button = this.$app.find( 'button' );
this.$pushButton = this.$button.filter( '.push' );
this.$replace = this.$button.filter( '.replace' );
this.$input = this.$app.find( 'input' );
}
},
model = {
'count': 0,
'stateObject': { 'somethingCanBeSerialized' : 'some where' },
'sURL': document.URL
};
return {
init: function ( $app ) {
view.setup( $app );
controller.bindPopState().bindEvents( view.$button );
}
};
};
//呼叫方法1:
//prStateApp().init( $( 'body' ) );
//呼叫方法2:
StateApp = new prStateApp();
StateApp.init( $( 'body' ) );
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment