Pages UI
Search…
Views

Basic HTML Tag Structure

The below code is a basic structure for a view to work, you need to have all your view wrapped in a view-port
1
<!-- BEGIN View Port !-->
2
<div class="view-port clearfix" id="myViewPort">
3
<!-- BEGIN View !-->
4
<div class="view bg-white">
5
6
</div>
7
<!-- END View !-->
8
9
<!-- BEGIN View !-->
10
<div class="view bg-white">
11
12
</div>
13
<!-- END View !-->
14
</div>
15
<!-- END View Port !-->
Copied!

How to Navigate

You can navigate with a simple HTML link and the following attributes in it
1
<a data-view-animation="push-parrallax" data-view-port="#myViewPort" data-navigate="view" class="" href="#">
2
Go to View
3
</a>
Copied!
data-view-animation : Defines animation - push-parrallax / push / from-top data-view-port : Defines Parent View Port - ID of parent view port. Eg : "#myViewPort" data-navigate : Enables to toggle back and forth form two views in a view port

One to Many Navigation

There is an option where you can navigate from one view to different views, the structure will be the following
HTML
1
<!-- BEGIN View Port !-->
2
<div class="view-port clearfix" id="myViewPort">
3
<!-- BEGIN View !-->
4
<div class="view bg-white">
5
6
</div>
7
<!-- END View !-->
8
9
<!-- BEGIN View !-->
10
<div class="view bg-white">
11
<div class="view bg-white" id="subView1">
12
Your Content One
13
</div>
14
<div class="view bg-white" id="subView2">
15
Your Content Two
16
</div>
17
</div>
18
<!-- END View !-->
19
</div>
20
<!-- END View Port !-->
Copied!
Link
To link to the subview add the attribute called data-toggle-view this defines the ID of your subview
1
<a data-view-animation="push-parrallax" data-view-port="#myViewPort" data-navigate="view" data-toggle-view="#subView1" class="" href="#">
2
Go to View
3
</a>
Copied!

Multi Level Navigation

You can navigate up to unlimited levels by nesting views-ports under views
HTML Structure
1
<!-- BEGIN View Port !-->
2
<div class="view-port clearfix" id="myViewPort">
3
<!-- BEGIN View !-->
4
<div class="view bg-white">
5
Your Content
6
</div>
7
<!-- END View !-->
8
9
<!-- BEGIN View !-->
10
<div class="view bg-white">
11
<!-- BEGIN View Port !-->
12
<div class="view-port clearfix" id="myNestedViewPort">
13
<!-- BEGIN View !-->
14
<div class="view bg-white">
15
Level One
16
</div>
17
<!-- END View !-->
18
19
<!-- BEGIN View !-->
20
<div class="view bg-white">
21
Level Two
22
</div>
23
<!-- END View !-->
24
</div>
25
<!-- END View Port !-->
26
</div>
27
<!-- END View !-->
28
</div>
29
<!-- END View Port !-->
Copied!
Sample with Navigation Links
1
<div class="view-port clearfix" id="myViewPort">
2
<!-- BEGIN View !-->
3
4
<div class="view bg-white">
5
<a class="" data-navigate="view" data-view-animation="push-parrallax"
6
data-view-port="#myViewPort" href="#">Go To Level One</a>
7
</div><!-- END View !-->
8
<!-- BEGIN View !-->
9
10
<div class="view bg-white">
11
<!-- BEGIN View Port !-->
12
13
<div class="view-port clearfix" id="myNestedViewPort">
14
<!-- BEGIN View !-->
15
16
<div class="view bg-white">
17
<p>Level One</p><br>
18
<a class="" data-navigate="view" data-view-animation=
19
"push-parrallax" data-view-port="#myNestedViewPort" href="#">Go
20
To Level Two</a> <a class="" data-navigate="view"
21
data-view-animation="push-parrallax" data-view-port=
22
"#myViewPort" href="#">Go Back</a>
23
</div><!-- END View !-->
24
<!-- BEGIN View !-->
25
26
<div class="view bg-white">
27
<p>Level Two</p><br>
28
<a class="" data-navigate="view" data-view-animation=
29
"push-parrallax" data-view-port="#myNestedViewPort" href="#">Go
30
Back</a>
31
</div><!-- END View !-->
32
</div><!-- END View Port !-->
33
</div><!-- END View !-->
34
</div><!-- END View Port !-->
Copied!
Last modified 3yr ago