以下是 jQuery可伸展的网格布局特效js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery可伸展的网格布局特效</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/default.css">
<link href="css/gridex.css" rel="stylesheet">
<style>
html, body {
height: 100%;
color: #656565;
}
a:focus {
outline: none;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -120px;
}
.push {
height: 120px;
}
</style>
</head>
<body>
<article class="htmleaf-container">
<div class="container wrapper">
<br />
<h2>jQuery可伸展的网格布局特效</h2>
<hr>
<div class="clearfix"></div>
<br />
<ul class="thumbnails gridex">
<li class="span3 clearfix">
<a href="#" class="thumbnail"> <img alt="270x170" src="#/270x170" /> </a>
<!-- gd-expander required -->
<div class="gd-expander">
<!-- gd-inner optional -->
<div class="gd-inner">
<div class="row-fluid">
<div class="span6 text-center">
<img alt="270x170" class="img-polaroid" src="#/370x270" />
</div>
<div class="span6">
<h2>Heading text 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#" class="btn btn-success">Visit Website</a>
</div>
</div>
</div>
</div>
</li>
<li class="span3">
<a class="thumbnail" > <img alt="270x170" src="#/270x170" /> </a>
<div class="gd-expander">
<div class="gd-inner">
<div class="row-fluid">
<div class="span6 text-center">
<img alt="270x170" class="img-polaroid" src="#/370x270" />
</div>
<div class="span6">
<h2>Heading text 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#" class="btn btn-success">Visit Website</a>
</div>
</div>
</div>
</div>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img alt="270x170" src="#/270x170" />
</a>
<div class="gd-expander">
<div class="gd-inner">
<div class="row-fluid">
<div class="span6 text-center">
<img alt="270x170" class="img-polaroid" src="#/370x270" />
</div>
<div class="span6">
<h2>Heading text 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#" class="btn btn-success">Visit Website</a>
</div>
</div>
</div>
</div>
</li>
<li class="span3">
<a hreF="#" class="thumbnail">
<img alt="270x170" src="#/270x170" />
</a>
<div class="gd-expander">
<div class="gd-inner">
<div class="row-fluid">
<div class="span6 text-center">
<img alt="270x170" class="img-polaroid" src="#/370x270" />
</div>
<div class="span6">
<h2>Heading text 3</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#" class="btn btn-success">Visit Website</a>
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="thumbnails gridex">
<li class="span3 clearfix">
<a href="#" class="thumbnail"> <img alt="270x170" src="#/270x170" /> </a>
<div class="gd-expander">
<div class="gd-inner">
<div class="row-fluid">
<div class="span6 text-center">
<img alt="270x170" class="img-polaroid" src="#/370x270" />
</div>
<div class="span6">
<h2>Heading text 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#" class="btn btn-success">Visit Website</a>
</div>
</div>
</div>
</div>
</li>
<li class="span3">
<a class="thumbnail" > <img alt="270x170" src="#/270x170" /> </a>
<div class="gd-expander">
<div class="gd-inner">
<div class="row-fluid">
<div class="span6 text-center">
<img alt="270x170" class="img-polaroid" src="#/370x270" />
</div>
<div class="span6">
<h2>Heading text 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#" class="btn btn-success">Visit Website</a>
</div>
</div>
</div>
</div>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img alt="270x170" src="#/270x170" />
</a>
<div class="gd-expander">
<div class="gd-inner">
<div class="row-fluid">
<div class="span6 text-center">
<img alt="270x170" class="img-polaroid" src="#/370x270" />
</div>
<div class="span6">
<h2>Heading text 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#" class="btn btn-success">Visit Website</a>
</div>
</div>
</div>
</div>
</li>
<li class="span3">
<a hreF="#" class="thumbnail">
<img alt="270x170" src="#/270x170" />
</a>
<div class="gd-expander">
<div class="gd-inner">
<div class="row-fluid">
<div class="span6 text-center">
<img alt="270x170" class="img-polaroid" src="#/370x270" />
</div>
<div class="span6">
<h2>Heading text 3</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#" class="btn btn-success">Visit Website</a>
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="thumbnails gridex">
<li class="span3 clearfix">
<a href="#" class="thumbnail"> <img alt="270x170" src="#/270x170" /> </a>
<div class="gd-expander">
<div class="gd-inner">
<div class="row-fluid">
<div class="span6 text-center">
<img alt="270x170" class="img-polaroid" src="#/370x270" />
</div>
<div class="span6">
<h2>Heading text 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#" class="btn btn-success">Visit Website</a>
</div>
</div>
</div>
</div>
</li>
<li class="span3">
<a class="thumbnail" > <img alt="270x170" src="#/270x170" /> </a>
<div class="gd-expander">
<div class="gd-inner">
<div class="row-fluid">
<div class="span6 text-center">
<img alt="270x170" class="img-polaroid" src="#/370x270" />
</div>
<div class="span6">
<h2>Heading text 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#" class="btn btn-success">Visit Website</a>
</div>
</div>
</div>
</div>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img alt="270x170" src="#/270x170" />
</a>
<div class="gd-expander">
<div class="gd-inner">
<div class="row-fluid">
<div class="span6 text-center">
<img alt="270x170" class="img-polaroid" src="#/370x270" />
</div>
<div class="span6">
<h2>Heading text 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#" class="btn btn-success">Visit Website</a>
</div>
</div>
</div>
</div>
</li>
<li class="span3">
<a hreF="#" class="thumbnail">
<img alt="270x170" src="#/270x170" />
</a>
<div class="gd-expander">
<div class="gd-inner">
<div class="row-fluid">
<div class="span6 text-center">
<img alt="270x170" class="img-polaroid" src="#/370x270" />
</div>
<div class="span6">
<h2>Heading text 3</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#" class="btn btn-success">Visit Website</a>
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="thumbnails gridex">
<li class="span3 clearfix">
<a href="#" class="thumbnail"> <img alt="270x170" src="#/270x170" /> </a>
<div class="gd-expander">
<div class="gd-inner">
<div class="row-fluid">
<div class="span6 text-center">
<img alt="270x170" class="img-polaroid" src="#/370x270" />
</div>
<div class="span6">
<h2>Heading text 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#" class="btn btn-success">Visit Website</a>
</div>
</div>
</div>
</div>
</li>
<li class="span3">
<a class="thumbnail" > <img alt="270x170" src="#/270x170" /> </a>
<div class="gd-expander">
<div class="gd-inner">
<div class="row-fluid">
<div class="span6 text-center">
<img alt="270x170" class="img-polaroid" src="#/370x270" />
</div>
<div class="span6">
<h2>Heading text 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#" class="btn btn-success">Visit Website</a>
</div>
</div>
</div>
</div>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img alt="270x170" src="#/270x170" />
</a>
<div class="gd-expander">
<div class="gd-inner">
<div class="row-fluid">
<div class="span6 text-center">
<img alt="270x170" class="img-polaroid" src="#/370x270" />
</div>
<div class="span6">
<h2>Heading text 3</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#" class="btn btn-success">Visit Website</a>
</div>
</div>
</div>
</div>
</li>
<li class="span3">
<a hreF="#" class="thumbnail">
<img alt="270x170" src="#/270x170" />
</a>
<div class="gd-expander">
<div class="gd-inner">
<div class="row-fluid">
<div class="span6 text-center">
<img alt="270x170" class="img-polaroid" src="#/370x270" />
</div>
<div class="span6">
<h2>Heading text 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#" class="btn btn-success">Visit Website</a>
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="thumbnails gridex">
<li class="span3 clearfix">
<a href="#" class="thumbnail"> <img alt="270x170" src="#/270x170" /> </a>
<div class="gd-expander">
<div class="gd-inner">
<div class="row-fluid">
<div class="span6 text-center">
<img alt="270x170" class="img-polaroid" src="#/370x270" />
</div>
<div class="span6">
<h2>Heading text 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#" class="btn btn-success">Visit Website</a>
</div>
</div>
</div>
</div>
</li>
<li class="span3">
<a class="thumbnail" > <img alt="270x170" src="#/270x170" /> </a>
<div class="gd-expander">
<div class="gd-inner">
<div class="row-fluid">
<div class="span6 text-center">
<img alt="270x170" class="img-polaroid" src="#/370x270" />
</div>
<div class="span6">
<h2>Heading text 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#" class="btn btn-success">Visit Website</a>
</div>
</div>
</div>
</div>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img alt="270x170" src="#/270x170" />
</a>
<div class="gd-expander">
<div class="gd-inner">
<div class="row-fluid">
<div class="span6 text-center">
<img alt="270x170" class="img-polaroid" src="#/370x270" />
</div>
<div class="span6">
<h2>Heading text 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#" class="btn btn-success">Visit Website</a>
</div>
</div>
</div>
</div>
</li>
<li class="span3">
<a hreF="#" class="thumbnail">
<img alt="270x170" src="#/270x170" />
</a>
<div class="gd-expander">
<div class="gd-inner">
<div class="row-fluid">
<div class="span6 text-center">
<img alt="270x170" class="img-polaroid" src="#/370x270" />
</div>
<div class="span6">
<h2>Heading text 3</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#" class="btn btn-success">Visit Website</a>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="push"></div>
</div>
<!-- /container -->
</article>
<script src="js/jquery.js"></script>
<script src="js/bootstrap-gridex.min.js"></script>
<script>
$(function() {
$('.gridex').gridex();
})
</script>
</body>
</html>
JS代码(bootstrap-gridex.js):
/* ============================================================ * bootstrap-gridex.js for Bootstrap v2.3.1 * https://github.com/geedmo/gridex * ============================================================ * Copyright 2012 Twitter,Inc. * * Licensed under the Apache License,Version 2.0 (the "License");
* you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing,software * distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,either express or implied. * See the License for the specific language governing permissions and * limitations under the License. * ============================================================ * * jQuery Grid Expander for Bootstrap * * Author:Geedmo (http://geedmo.com) * Version:1.0 * ============================================================ */
!function ($){
"use strict";
// jshint;
_;
var pluginName = 'gridex',expandedClass = 'gd-expanded',expanderClass = 'gd-expander',oldwidth = 0;
/* PUBLIC CLASS DEFINITION * ============================== */
var Gridex = function (element,options){
this.settings = $.extend({
}
,$.fn[pluginName].defaults,options) this.$element = $(element);
this.items = this.$element.children(this.settings.children);
this.sliding = false;
this.onresize = false;
this.init();
}
Gridex.prototype.init = function (){
var that = this;
this.items.each(function(){
$(this).find('.'+expanderClass).height(0).on('click',function(e){
e.stopPropagation();
}
);
}
)// attacha eventthis.items.on('click.gridex.data-api',function (e){
e.preventDefault();
e.stopPropagation();
that.toggle(this);
}
)// force to recalc height on screen resize$(window).resize(function(){
if($(this).width() == oldwidth) return;
oldwidth = $(this).width();
that.items.each(function(){
var $this = $(this);
//$this.data('gridexHeight',$this.height())if($this.hasClass(expandedClass)){
that.toggle(this,function(){
$this.data('gridexHeight',$this.siblings().eq(0).height()) .css({
height:''}
)}
);
}
else$this.data('gridexHeight',$this.height()).css({
height:''}
)}
)}
)}
Gridex.prototype.toggle = function (item,callback){
var that = this,$item= $(item),$expander= $item.find('.'+expanderClass),itemHg= $item.data('gridexHeight'),otherExpanded = $item.siblings('.'+expandedClass),isCollapsed;
// ignore if not expander element or sliding if(!$expander.length || this.sliding) return;
this.sliding = true;
// save item height if(!itemHg){
itemHg = $item.height();
$item.css({
height:itemHg}
).data('gridexHeight',itemHg)}
isCollapsed = !$item.hasClass(expandedClass);
// when other expanded,show without animation if(otherExpanded.length){
// show the item$item.add($expander).css({
height:'+=' + this.settings.height}
).addClass(expandedClass)// hide siblingsotherExpanded.removeClass(expandedClass) .css('height','-=' + this.settings.height) .find('.'+expanderClass).css('height','0')that.sliding = false;
}
else{
// slide down $item.animate({
height:(isCollapsed ? '+=' + this.settings.height:itemHg)}
,{
duration:this.settings.speed,complete:function(){
$item[isCollapsed ? 'addClass':'removeClass'](expandedClass);
that.sliding = false;
callback && callback()}
}
) $expander.animate({
height:(isCollapsed ? this.settings.height:0)}
) if(isCollapsed)$( 'html,body' ).animate({
scrollTop:$item.offset().top - this.settings.offsetTop}
);
}
}
/* PLUGIN DEFINITION * ======================== */
var old = $.fn[pluginName] $.fn[pluginName] = function (option){
return this.each(function (){
var $this = $(this),data = $this.data(pluginName);
if(!data) $this.data(pluginName,(data = new Gridex(this,option))) // API if(typeof option == 'string')data[option] && data[option]();
}
)}
// DEFAULTS $.fn[pluginName].defaults ={
speed:400,// slide down speedheight:500,// expandable content heightoffsetTop:0,// scroll top extra offsetchildren:'li'// grid childrens selector}
// CONSTRUCTOR CONVENTION $.fn[pluginName].Constructor = Gridex;
/* GRIDEX NO CONFLICT * ================== */
$.fn[pluginName].noConflict = function (){
$.fn[pluginName] = old return this}
}
(window.jQuery);
CSS代码(gridex.css):
/* set relative to positionante content correctly */
.gridex{position:relative;}
/* animatable grid container */
.gd-expander{position:absolute;overflow:hidden;height:500px;margin-top:20px;max-width:100%;left:30px;/* standar row margin is 30px */
}
/* inner content container */
.gd-inner{padding:50px;background:#ccc;}
/* top arrow when expanded */
.gridex > li > a{position:relative;}
.gridex > .gd-expanded > a::after{top:auto;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-bottom-color:#ccc;border-width:25px;left:50%;margin:-25px 0 0 -25px;}
@media (max-width:1200px){.gd-expander{left:20px;/* decrement left as bootstrap does */
}
}
@media (max-width:767px){.gd-inner img{display:none;/* hide to not overflow */
}
.gd-expander{left:0;/* remove left as bootstrap does */
}
}
分享到QQ
分享到微博
微信扫一扫
