代码之家  ›  专栏  ›  技术社区  ›  Marlon Creative

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

  •  0
  • Marlon Creative  · 技术社区  · 16 年前

    我正在使用jquery文本大小调整脚本,从这里开始- http://demos.cool-javascripts.com/jquery-fontsize-controller.html . SCIPT如下:

    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 回复  |  直到 16 年前
        1
  •  1
  •   Peter Jaric    16 年前

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

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

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

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

    对此:

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