Simple jQuery Plugin For Responsive Sliding View - SimpleSlideView

File Size: 76.8 KB
Views Total: 3185
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple jQuery Plugin For Responsive Sliding View - SimpleSlideView

SimpleSlideView is a plugin for jQuery (or Zepto) that allows you to present content in a responsive & touch-enabled sliding view interface. The goal is to present content in distinct, bite-sized chunks while maintaining hierarchy through the use of spacial animation.

Basic Usage:

1. Markup html structure

<div class="views">
<div class="view views-nav" id="nav">
<ul>
<li><a href="#what" data-pushview>Title 1</a></li>
<li><a href="#how" data-pushview>Title 2</a></li>
<li><a href="#where" data-pushview>Title 3</a></li>
</ul>
</div>
<div class="views-main">
<div class="view" id="what">
<div class="view-content">
...
</div>
</div>
<div class="view" id="how">
<div class="view-content">
...
</div>
</div>
<div class="view" id="where">
<div class="view-content">
...
</div>
</div>
</div>
</div>

2. The sample CSS

.views {
background-color: #fff;
border-color: #ccc;
border-style: solid;
border-width: 2px 0;
display: block;
}
.views-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.views-nav li {
border-bottom: 2px solid #ccc;
margin: 0;
}
.views-nav li:last-child {
border-bottom-width: 0;
}
.views-nav a {
background: url(../img/arrow-right.svg) no-repeat 96% center;
display: block;
font-size: 1.125em;
line-height: 1.24444444444445em;
padding: 0.88888888888889em;
}
.views-main .view {
border-top: 2px solid #ccc;
}
/* When SimpleSlideView is active we won't need a border anymore */
.views-main .SimpleSlideView-view {
border-top-width: 0;
}
.view-content {
padding: 1em;
}
.view-nav {
list-style: none;
margin: 0;
padding: 0;
}
.view-nav a {
background-repeat: no-repeat;
display: block;
margin-bottom: -0.25em;
padding: 0.75em 1em;
white-space: nowrap;
}
.view-nav-contents a {
background-image: url(../img/hamburger.svg);
background-position: left center;
padding-left: 1.8em;
}
.view-nav-next a {
background-image: url(../img/arrow-right.svg);
background-position: right center;
padding-right: 1.8em;
}
.btn {
background-color: #0088cc;
border-radius: 0.25em;
color: #fff;
text-align: center;
}
.byline {
color: #999;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
 @media only screen and (min-width: 30.0625em) { /* 481px */
body {
margin: 1.5em auto;
max-width: 30.0625em;
}
.views {
border-radius: 0.5em;
border-width: 2px;
}
}

3. Include necessary javascript files on the page

<!-- this library removes the 300ms delay on browsers with touch UIs --> 
<script src="vendor/fastclick.js"></script> 
<script>
// "Zepto is a minimalist JavaScript library for modern browsers with a
// largely jQuery-compatible API." What this chunk of code does is
// determine which library to use (jQuery or Zepto), and then which
// scroll plugin to use. For more info, see http://zeptojs.com/#download
var useZepto = ('__proto__' in {})
  , lib = useZepto ? 'zepto' : 'jquery'
  , scrollPlugin = useZepto ? 'scroll' : 'scrollTo';
document.write(
  '<script src=vendor/' + lib + '.min.js><\/script>' +
  '<script src=vendor/' + lib + '.' + scrollPlugin + '.min.js><\/script>'
);
</script> 

<script src="lib/simpleslideview.min.js"></script> 

4. Call the plugin

<script>
$('.views').simpleSlideView({ duration: 250 });
</script>

More examples:

Change log:

v1.1.2 (2015-12-31)

  • Prevent changeView if inactive

v1.1.1 (2014-03-20)

  • Updated Zepto to 1.1.3 with fx module included.
  • Improved conditional checks on some $.fx-dependent default values.
  • Updated README with information about new Zepto dependency requirements.

This awesome jQuery plugin is developed by cloudfour. For more Advanced Usages, please check the demo page or visit the official website.