Skip to content
This repository
branch: master
file 163 lines (124 sloc) 5.201 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163
<!DOCTYPE html>
<html>
<head>
     <title>Sliding View Sample</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

     <script src="../../../src/libs/jquery-1.7.1.js"></script>
     <script src="../../../src/libs/jquery.animate-enhanced.js"></script>
     <script src="../../../src/libs/iscroll.js"></script>
     <script src="../../../src/libs/noClickDelay.js"></script>
    
    
     <link rel="stylesheet" href="../../../src/viewnavigator/viewnavigator.css" type="text/css" />
     <script src="../../../src/viewnavigator/viewnavigator.js"></script>
    
     <link rel="stylesheet" href="../../../src/slidingview/slidingview.css" type="text/css" />
     <script src="../../../src/slidingview/slidingview.js"></script>
     <script src="../../../src/libs/oriDomi.js"></script>


        <style>
            
          body {
            background: #eee;
            padding: 0px;
            overflow: hidden;
            border-left: 1px solid black;
          }

          #sidebar {
            width: 420px;
            padding: 0px;
            overflow: hidden;
            height: 100%;
          }

          #sidebar .viewNavigator_header {
            background: #333;
          }

          #sidebar .viewNavigator_contentHolder,#sidebar .viewNavigator_content {
            background: #bbb;
          }

            
        </style>

<script>
            
            var sv;
$(document).ready( function() {

//Setup the ViewNavigator
//Setup the default views
var leftView = getView( "left" );
leftView.backLabel = null;

var rightView = getView( "right" );
rightView.backLabel = null;


sv = new SlidingView( 'sidebar', 'body' );

//Setup the ViewNavigator
window.leftViewNavigator = new ViewNavigator( '#sidebar' );
window.leftViewNavigator.pushView( leftView );

window.rightViewNavigator = new ViewNavigator( '#body' );
window.rightViewNavigator.pushView( rightView );

//setup oridomi
sv.sidebarWidth = 420;
sv.sidebar.oriDomi({ hPanels: 1, vPanels: 2, speed:1, perspective:800, shadingIntensity:4 });
sv.sidebar.oriDomi( 'accordion', 90 );
sv.sidebar.bind( "slidingViewProgress", function(event, data) {

var fudge = 1
var half = data.max/2;
if ( data.current < half ) {
fudge = (data.current)/half
} else if ( data.current > half ) {
fudge = (half-(data.current-half))/half
}
fudge *= 15

var angle = 90-((90*(data.current/data.max)));
//console.log( (angle+fudge) );

if ( (angle+fudge) > 0 ) {

     sv.sidebar.oriDomi( 'restoreOriDomi' );
     sv.sidebar.oriDomi( 'accordion', (angle+fudge) );
                    }
                    else {
     sv.sidebar.oriDomi( 'restoreDOM' );
                    }
});
} );

function sidebarClick() {
var color = '#' + parseInt(Math.random()*0xFFFFFF).toString(16);
console.log(color);
$('#sidebar').css('color', color );
}


function leftPushView() {
//create a view and push it onto the view navigator
var view = getView("left");
window.leftViewNavigator.pushView( view );
}

function leftPopView() {
//pop a view from the view navigator
window.leftViewNavigator.popView();
}

function rightPushView() {
//create a view and push it onto the view navigator
var view = getView("right");
window.rightViewNavigator.pushView( view );
}

function rightPopView() {
//pop a view from the view navigator
window.rightViewNavigator.popView();
}

function getView( side ) {
//create a view descriptor with random content
var bodyView = $('<div>' + Math.random().toString() + '<hr><li href="#" onclick="'+side+'PushView()" class="viewNavigator_backButton">push view</li> <li href="#" onclick="'+side+'PopView()" class="viewNavigator_backButton">pop view</li><hr>' + getMeat() + '</div>');
var links = bodyView.find('a');

return { title: side + "Default View " + parseInt(Math.random()*1000),
backLabel: "Back",
view: bodyView
};
}

function getMeat() {
//randomly generate content
//text string generated by http://baconipsum.com/
var iterations = 1 + parseInt(Math.random() * 5);
var result = "";
for ( var i = 0; i < iterations; i ++ ) {
result += "Pork chop corned beef meatloaf prosciutto flank, chuck andouille fatback hamburger cow ham turkey. Drumstick filet mignon boudin, salami beef ribs ball tip turducken frankfurter chuck. Pork chop swine chuck meatloaf capicola tri-tip. Pork belly venison bresaola flank, jerky ham hock short loin ground round corned beef salami pork filet mignon tri-tip sirloin. Tenderloin meatball corned beef, boudin brisket bresaola rump short loin tri-tip spare ribs pork belly cow.<hr>"
}
return result;
}

</script>


</head>
<body>

<div class="slidingview_wrapper">
<div id="sidebar"></div>
<div id="body"></div>
</div>

</body>
</html>
Something went wrong with that request. Please try again.