jQuery PageSlide : 클릭시 .css 기능

Question

여러분, 안녕하세요!

나는이 플러그인을 사용 PageSlide을하고이 jquery.pageslide.js의 코드입니다 :

(function($) { 
    var $body = $("body"), 
    $pageslide = $("#pageslide"); 
    var 
    _sliding = false, 
    _lastCaller; 
    if ($pageslide.length == 0) { 
    $pageslide = $("<div />").attr("id", "pageslide").css("display", "none").appendTo($("body")); 
    } 

    function 
    _load(url, useIframe) { 
    if (url.indexOf("#") === 0) { 
     $(url).clone(true).appendTo($pageslide.empty()).show(); 
    } else { 
     if (useIframe) { 
     var 
      iframe = $("<iframe 
/>").attr({ 
      src: url, 
      frameborder: 0, 
      hspace: 0 
      }).css({ 
      width: "100%", 
      height: "100%" 
      }); 
     $pageslide.html(iframe); 
     } else { 
     $pageslide.load(url); 
     } 
     $pageslide.data("localEl", false); 
    } 
    } 

    function 
    _start(direction, speed) { 
    var slideWidth = $pageslide.outerWidth(true), 
     bodyAnimateIn = {}, 
     slideAnimateIn = {}; 
    if ($pageslide.is(":visible") || _sliding) { 
     return; 
    } 
    _sliding = true; 
    switch (direction) { 
     case "left": 
     $pageslide.css({ 
      left: "auto", 
      right: "-" + slideWidth + "px" 
     }); 
     bodyAnimateIn["margin-left"] = "-=" + slideWidth; 
     slideAnimateIn["right"] = "+=" + slideWidth; 
     break; 
     default: 
     $pageslide.css({ 
      left: "-" + slideWidth + "px", 
      right: "auto" 
     }); 
     bodyAnimateIn["margin-left"] = "+=" + slideWidth; 
     slideAnimateIn["left"] = "+=" + slideWidth; 
     break; 
    } 
    $body.animate(bodyAnimateIn, speed); 
    $pageslide.show().animate(slideAnimateIn, speed, function() { 
     _sliding = false; 
    }); 
    } 
    $.fn.pageslide = function(options) { 
    var 
     $elements = this; 
    $elements.click(function(e) { 
     var 
     $self = $(this), 
     settings = $.extend({ 
      href: $self.attr("href") 
     }, options); 
     e.preventDefault(); 
     e.stopPropagation(); 
     if ($pageslide.is(":visible") && $self[0] == _lastCaller) { 
     $.pageslide.close(); 
     } else { 
     $.pageslide(settings); 
     _lastCaller = $self[0]; 
     } 
    }); 
    }; 
    $.fn.pageslide.defaults = { 
    speed: 200, 
    direction: "right", 
    modal: false, 
    iframe: true, 
    href: null 
    }; 
    $.pageslide = function(options) { 
    var 
     settings = $.extend({}, $.fn.pageslide.defaults, options); 
    if ($pageslide.is(":visible") && $pageslide.data("direction") != settings.direction) { 
     $.pageslide.close(function() { 
     _load(settings.href, settings.iframe); 
     _start(settings.direction, settings.speed); 
     }); 
    } else { 
     _load(settings.href, settings.iframe); 
     if ($pageslide.is(":hidden")) { 
     _start(settings.direction, settings.speed); 
     } 
    } 
    $pageslide.data(settings); 
    }; 
    $.pageslide.close = function(callback) { 
    var 
     $pageslide = $("#pageslide"), 
     slideWidth = $pageslide.outerWidth(true), 
     speed = $pageslide.data("speed"), 
     bodyAnimateIn = {}, 
     slideAnimateIn = {}; 
    if ($pageslide.is(":hidden") || _sliding) { 
     return; 
    } 
    _sliding = true; 
    switch ($pageslide.data("direction")) { 
     case "left": 
     bodyAnimateIn["margin-left"] = "+=" + slideWidth; 
     slideAnimateIn["right"] = "-=" + slideWidth; 
     break; 
     default: 
     bodyAnimateIn["margin-left"] = "-=" + slideWidth; 
     slideAnimateIn["left"] = "-=" + slideWidth; 
     break; 
    } 
    $pageslide.animate(slideAnimateIn, speed); 
    $body.animate(bodyAnimateIn, speed, function() { 
     $pageslide.hide(); 
     _sliding = false; 
     if (typeof callback != "undefined") { 
     callback(); 
     } 
    }); 
    }; 
    $pageslide.click(function(e) { 
    e.stopPropagation(); 
    }); 
    $(document).bind("click 
keyup", function(e) { 
    if (e.type == "keyup" && e.keyCode != 27) { 
     return; 
    } 
    if ($pageslide.is(":visible") && !$pageslide.data("modal")) { 
     $.pageslide.close(); 
    } 
    }); 
})(jQuery); 

내가 한 번 더 기능이 필요합니다 PageSlide가 활성화 될 때 - 그래서 왼쪽 메뉴 열기 - [내용] div의 너비가 600px으로 변경되고 비활성 상태 일 때 원래 1200px로 변경됩니다.

나는 좋은 코드가 있다고 생각한다 : $('#content').css('width', '600px');, 그러나 나는 어디에 놓을 지 모른다. 나는 자바 스크립트를 많이 모른다.

감사합니다.

Answer 1

$ pageslide 요소를 조정하기 위해 _start() 함수가 호출 된 것처럼 보입니다. 해당 기능에 추가 변경 사항을 추가하십시오.

_start(direction, speed) { 
 
    var slideWidth = $pageslide.outerWidth(true), 
 
     bodyAnimateIn = {}, 
 
     slideAnimateIn = {}, 
 
     //may want to declare this somewhere else so its not fetched every time from the dom 
 
     $content = $('#content'); 
 
    if ($pageslide.is(":visible") || _sliding) { 
 
     return; 
 
    } 
 
    _sliding = true; 
 
    switch (direction) { 
 
     case "left": 
 
     $pageslide.css({ 
 
      left: "auto", 
 
      right: "-" + slideWidth + "px" 
 
     }); 
 
     bodyAnimateIn["margin-left"] = "-=" + slideWidth; 
 
     slideAnimateIn["right"] = "+=" + slideWidth; 
 
     // Looks like the default for direction is set to 'right', so this would be when its closing 
 
     $content.css({ 
 
      width: '1200px' 
 
     }) 
 
     break; 
 
     default: 
 
     $pageslide.css({ 
 
      left: "-" + slideWidth + "px", 
 
      right: "auto" 
 
     }); 
 
     bodyAnimateIn["margin-left"] = "+=" + slideWidth; 
 
     slideAnimateIn["left"] = "+=" + slideWidth; 
 
     //this should be when its opening. If not, just switch the two inserted statements. 
 
     $content.css({ 
 
      width: '600px' 
 
     }) 
 
     break; 
 
    }