jQuery onload并使用cookie集调整大小
寻找一点帮助,以增加我已经。我所做的是对一个特定的类进行一个onLoad和Resize交换,它可以改变网格的不同分辨率。我需要的是设置一个cookie,以便在从一页转到另一页时网格保持持久性jQuery onload并使用cookie集调整大小,jquery,class,cookies,resize,pageload,Jquery,Class,Cookies,Resize,Pageload,寻找一点帮助,以增加我已经。我所做的是对一个特定的类进行一个onLoad和Resize交换,它可以改变网格的不同分辨率。我需要的是设置一个cookie,以便在从一页转到另一页时网格保持持久性 // swaps the grid span names when the resolution goes below 1200px // or when page is loaded below 1200px $(window).bind("load resize", func
// swaps the grid span names when the resolution goes below 1200px
// or when page is loaded below 1200px
$(window).bind("load resize", function(){
var width = $(window).width(),
bodycontent_grid = width < 1200 ? 'span8' :
width > 1200 ? 'span6' : '';
rightcol_grid = width < 1200 ? 'span3' :
width > 1200 ? 'span5' : '';
$('.bodycontent').removeClass('span6 span8').addClass(bodycontent_grid),
$('.rightcol').removeClass('span3 span5').addClass(rightcol_grid);
});
//当分辨率低于1200px时交换网格跨度名称
//或者当页面加载速度低于1200px时
$(窗口).bind(“加载调整大小”,函数(){
变量宽度=$(窗口).width(),
bodycontent_grid=宽度<1200?'span8':
宽度>1200?'span6':'';
rightcol_网格=宽度<1200?'span3':
宽度>1200?'span5':'';
$('.bodycontent').removeClass('span6 span8').addClass(bodycontent_网格),
$('.rightcol').removeClass('span3 span5').addClass(rightcol_网格);
});
基于JS的解决方案不是很好(请继续阅读),但无论如何,我将首先尝试回答有关Cookie的问题:
您可以使用某种类型的JS,或者只是简单的JS,这有点难。
jQuery语法是:
$.cookie('name', 'value'); // storing cookie
$.cookie('name'); // reading cookie
使用它,您可以将源代码更改为以下内容:
function resizeContainer(var force=false) // additional parameter is used to force resetting cookie
{
var width;
if($.cookie('knownWidth') && !force) // if there's a cookie and we're not forcing reset, use width from cookie
{
width = $.cookie('knownWidth');
}
else
{
width = $(window).width();
$.cookie('knownWidth', width);
}
var bodycontent_grid = width < 1200 ? 'span8' :
width > 1200 ? 'span6' : '';
rightcol_grid = width < 1200 ? 'span3' :
width > 1200 ? 'span5' : '';
$('.bodycontent').removeClass('span6 span8').addClass(bodycontent_grid),
$('.rightcol').removeClass('span3 span5').addClass(rightcol_grid);
}
$(window).bind("load", function(){
resizeContainer(); // onload use cookie
});
$(window).bind("resize", function(){
resizeContainer(true); // when resizing force changing the cookie
});
顺便说一句,当你打开或:)它是纯CSS时,尝试调整浏览器窗口的大小
@media only screen and (min-width : 1200px) {
/* Styles when over 1200px */
}
@media only screen and (max-width: 1199px) {
/* Styles when under 1200px */
}