我正在使用Jquery zAccordion插件,我希望它是响应式的。所以我尝试从他们自己的网站的例子中: http://www.armagost.com/zaccordion/a-responsive-example-using-media-queries/
无论如何,我已经在我的wordpress网站上包含了zAccordion,Enquire和下面提到的脚本,但什么也没发生。
怎么了?这是脚本:
jQuery(document).ready(function($) {
var example = $('#media'), defaults = {
buildComplete: function () {
example.css('visibility', 'visible');
},
timeout: 5500
};
function build(x) {
var opts, current;
if (!$.isEmptyObject(example.data())) { /* If an zAccordion is found, rebuild it with new settings. */
example.css('visibility', 'hidden');
current = example.data('current');
opts = $.extend({
startingSlide: current
}, defaults, x);
example.zAccordion('destroy', {
removeStyleAttr: true,
removeClasses: true,
destroyComplete: {
afterDestroy: function() {
try {
console.log('zAccordion destroyed! Attempting to rebuild...');
} catch (e) {}
},
rebuild: opts
}
});
} else { /* If no zAccordion is found, build one from scratch. */
example.css('visibility', 'hidden');
opts = $.extend(defaults, x);
example.zAccordion(opts);
}
}
/* A unique Media Query is registered for each screen size. */
enquire.register('screen and (min-width: 960px)', { /* Standard screen sizes and a default build for browsers that are unsupported. */
match : function () {
build({
slideWidth: 540,
width: 860,
height: 200
});
} /* The *true* value below means this media query will fire by default. */
}, true).register('screen and (min-width: 768px) and (max-width: 959px)', {
match : function () {
build({
slideWidth: 420,
width: 680,
height: 200
});
}
}).register('screen and (min-width: 480px) and (max-width: 767px)', {
match : function () {
build({
slideWidth: 220,
width: 380,
height: 200
});
}
}).register('screen and (max-width: 479px)', {
match : function () {
if (!$.isEmptyObject(example.data())) {
example.zAccordion('destroy', {
removeStyleAttr: true,
removeClasses: true,
destroyComplete: {
afterDestroy: function() {
try {
console.log('zAccordion destroyed!');
} catch (e) {}
}
}
});
}
}
}).listen(5);
});
这是 HTML :
<ul id="media">
<li><img src="http://domain.com/wp-content/uploads/2014/11/1.jpg" width="750" height="300" alt="Image Title"/></li>
<li><img src="http://domain.com/wp-content/uploads/2014/11/2.jpg" width="750" height="300" alt="Image Title"/></li>
<li><img src="http://domain.com/wp-content/uploads/2014/11/3.jpg" width="750" height="300" alt="Image Title"/></li>
<li><img src="http://domain.com/wp-content/uploads/2014/11/4.jpg" width="750" height="300" alt="Image Title"/></li>
</ul>
<pre class="js">
$("#media").zAccordion({
timeout: 4000,
slideWidth: 600,
width: 960,
height: 270
});
</pre>
在 ul 标签后面包含代码,并用"jQuery"删除"$"。