帮助jQuery字体大小调整脚本(命名cookie)

时间:2010-09-06 13:17:15

标签: jquery

我正在使用jQuery文本大小调整脚本 - http://demos.cool-javascripts.com/jquery-fontsize-controller.html。该片段如下:

function fontSize(container, target, minSize, defSize, maxSize) {
/*Editable settings*/
var minCaption = "Make font size smaller"; //title for smallFont button
var defCaption = "Make font size default"; //title for defaultFont button
var maxCaption = "Make font size larger"; //title for largefont button


//Now we'll add the font size changer interface in container
smallFontHtml = "<a href='javascript:void(0);' class='smallFont' title='" + minCaption +"'>" + minCaption + "</a> ";
defFontHtml = "<a href='javascript:void(0);' class='defaultFont' title='" + defCaption +"'>" + defCaption + "</a> ";
largeFontHtml = "<a href='javascript:void(0);' class='largeFont' title='" + maxCaption +"'>" + maxCaption + "</a> ";
$(container).html(smallFontHtml + defFontHtml + largeFontHtml);

//Read cookie & sets the fontsize
if ($.cookie != undefined) {
    var cookie = target.replace(/[#. ]/g,'');
    var value = $.cookie(cookie);
    if (value != null) {
        $(target).css('font-size', parseInt(value));
    } else {
        $(target).css('font-size', defSize);
    }
}

//on clicking small font button, font size is decreased by 1px
$(container + " .smallFont").click(function(){ 
    curSize = parseInt($(target).css("font-size"));
    newSize = curSize - 1;
    if (newSize >= minSize) {
        $(target).css('font-size', newSize);
    } 
    if (newSize <= minSize) {
        $(container + " .smallFont").addClass("sdisabled");
    }
    if (newSize < maxSize) {
        $(container + " .largeFont").removeClass("ldisabled");
    }
    updatefontCookie(target, newSize); //sets the cookie 

});

//on clicking default font size button, font size is reset
$(container + " .defaultFont").click(function(){
    $(target).css('font-size', defSize);
    $(container + " .smallFont").removeClass("sdisabled");
    $(container + " .largeFont").removeClass("ldisabled");
    updatefontCookie(target, defSize);
});

//on clicking large font size button, font size is incremented by 1 to the maximum limit
$(container + " .largeFont").click(function(){
    curSize = parseInt($(target).css("font-size"));
    newSize = curSize + 1;
    if (newSize <= maxSize) {
        $(target).css('font-size', newSize);
    } 
    if (newSize > minSize) {
        $(container + " .smallFont").removeClass("sdisabled");
    }
    if (newSize >= maxSize) {
        $(container + " .largeFont").addClass("ldisabled");
    }
    updatefontCookie(target, newSize);
});

function updatefontCookie(target, size) {
    if ($.cookie != undefined) { //If cookie plugin available, set a cookie
        var cookie = target.replace(/[#. ]/g,'');
        $.cookie(cookie, size);
    } 
}
}

它工作正常,并与jQuery cookie插件一起,正确地将所需的字体大小存储在cookie中。但是,cookie始终按照函数调用中定义的“目标”命名:

function fontSize(container, target, minSize, defSize, maxSize)
function fontSize(".fontResizer", ".wrapper", 11, 13, 15);

所以在我的情况下,它总是被称为“包装器”。我不能为我的生活弄清楚如何为它指定一个唯一的名称。

任何想法?

1 个答案:

答案 0 :(得分:1)

好吧,包含的脚本确实使用目标名称作为cookie名称。我的建议是你添加一个名为cookieName的新参数。新签名将是:

function fontSize(container, target, minSize, defSize, maxSize, cookieName)

在脚本的所有引用中都使用该值。也就是说,改变例如:

updatefontCookie(target, newSize); //sets the cookie 

到此:

updatefontCookie(cookieName, newSize); //sets the cookie