DIV에 추가되는 슬라이드 아웃 패널

Question

내 페이지의 머리글과 바닥 글에서 컨테이너 div에 추가하는 슬라이드 아웃 패널을 만들려고합니다. 나는 반응 형 (Responseive)을 위해 부트 스트랩 (Bootstrap)을 사용하고 있으므로 솔루션은 이상적으로 해당 패키지 내에 포함 된 미디어 쿼리와 함께 작동해야합니다. 나는 시도한 모든 것이 어떤면에서나 다른 방식으로 작동하지 않기 때문에이 접근법을 잃어 버렸습니다.

이 그림은 최고의 애니메이션 제가 (미안하지 디자이너) 달성하기 위해 노력하고있어 : http://d.pr/i/DzQc+

나는 시도했다 :

Pageslide이 - 이것이 내가 '가장 가까운 솔루션이었습니다된다 지금까지 발견. 이것은 슬라이드를 패널에 추가합니다. 따라서이 페이지의 머리글/바닥 글 컨테이너 내에서 패널을 슬라이드를 유지하는 저를 허용하지 않습니다 http://srobbin.com/jquery-plugins/pageslide/

jQuery를 모바일 패널 위젯 - 나는 해킹과 작동하려면 jQuery를 모바일 패널 위젯 플러그인의 용도를 변경하려 행운을없이 원하는대로.

.append 기능 - .append 기능을 애니메이션으로 만들려고했으나 부트 스트랩의 반응 기능으로 작동하지 않았습니다.

그런 말로, 당신 중 누구라도 작동 할 수있는 플러그인, 기능 또는 구현에 대한 제안이 있습니까? 필자는 반드시 코드 조각을 찾는 것이 아니라 오히려 원하는대로 작동 할 방향을 찾고 있습니다.

감사합니다.

Answer 1

다음은 모든 div에 작성할 수있는 프로토 타입 패턴의 팝업 컨테이너입니다. 원하는대로 스타일 CSS 그것을

Useage : 요법

InfoPopup.Create('YourDivID'); 
InfoPopup.Destroy(); 
InfoPopup.Bounce(); 
$(InfoPopup.YesBtn).fadeIn(); 
$(InfoPopup.NoBtn).fadeIn(); 
$(InfoPopup.ShowBtn).fadeIn(); 

...

InfoPopup = { 
YesBtn:'', 
NoBtn:'', 
ShowBtn:'', 
IdlBtn:'', 
HintText:'', 
Create:function(target, contentId){ 

    var infoImage = ""; 
    var infoWrapperDiv = document.createElement('div'); 
    infoWrapperDiv.id = 'infoWrapperDiv'; 
    //min-max button 
    var minMax = document.createElement('img'); 
    minMax.src = "images/minimize.png" 
    minMax.id = 'infoPopupMinMax'; 
    minMax.setAttribute('onClick','InfoPopup.Shrink();'); 
    infoWrapperDiv.appendChild(minMax); 
    //content 
    var contentDiv = document.createElement('div'); 
    contentDiv.id = 'infoPopupContent'; 
    contentDiv.innerHTML = '<span>Some Stuff Here</span>' 
    infoWrapperDiv.appendChild(contentDiv); 
    //YesNoButtons - append to infoWrapperDiv if needed in specific activity 
    //---- set custom onClick for the specific Activity in the switch 
    this.YesBtn = document.createElement('input'); 
    this.YesBtn.id = 'infoBtnYes'; 
    this.YesBtn.setAttribute('value','Yes'); 
    this.YesBtn.setAttribute('type','button'); 
    this.YesBtn.className = 'inputButton'; 

    this.NoBtn = document.createElement('input'); 
    this.NoBtn.id = 'infoBtnNo'; 
    this.NoBtn.setAttribute('value','No'); 
    this.NoBtn.setAttribute('type','button'); 
    this.NoBtn.className = 'inputButton'; 

    this.ShowBtn = document.createElement('input'); 
    this.ShowBtn.id = 'infoBtnShow'; 
    this.ShowBtn.setAttribute('type','button'); 
    this.ShowBtn.setAttribute('value','Show'); 

    this.IdlBtn = document.createElement('input'); 
    this.IdlBtn.setAttribute('type','button'); 

    this.HintText = document.createElement('div'); 
    this.HintText.className = 'infoPopupHint'; 



    switch(contentId){//Remove switch to just set up the content 
     case 1://on a 1 page web app the activity will dictate what content is presented 
      this.YesBtn.setAttribute('onClick','currentActivityObject.SaveVerification(1);'); 
      this.NoBtn.setAttribute('onClick','currentActivityObject.SaveVerification(0);'); 
      this.YesBtn.style.display = 'none'; 
      this.NoBtn.style.display = 'none'; 
      infoWrapperDiv.appendChild(this.YesBtn); 
      infoWrapperDiv.appendChild(this.NoBtn); 
      this.ShowBtn.setAttribute('onmousedown',"currentActivityObject.ShowAnswer(1);"); 
      this.ShowBtn.setAttribute('onmouseup',"currentActivityObject.ShowAnswer(0);"); 
      this.ShowBtn.className = 'inputButton infoBottomLeft'; 
      this.ShowBtn.style.display = 'none'; 
      infoWrapperDiv.appendChild(this.ShowBtn); 
      break; 
     case 2: 
      break; 
    } 
    infoWrapperDiv.appendChild(this.HintText); 
    $id(target).appendChild(infoWrapperDiv); 

    $('#infoWrapperDiv').animate({top:"78%"},'fast').animate({top:"80%"},'fast'); 
}, 
Shrink:function(){ 

    $('#infoWrapperDiv').animate({top:"90%"},'fast').animate({top:"88%"},'fast'); 
    var minMax = document.getElementById('infoPopupMinMax'); 
    minMax.setAttribute('onClick','InfoPopup.Grow();') 
}, 
Grow:function(){ 

    $('#infoWrapperDiv').animate({top:"78%"},'fast').animate({top:"80%"},'fast'); 
    var minMax = document.getElementById('infoPopupMinMax'); 
    minMax.setAttribute('onClick','InfoPopup.Shrink();') 
}, 
Bounce:function(){ 

$('#infoWrapperDiv') 
    .animate({top:"90%"},'fast') 
    .animate({top:"80%"},'fast'); 

}, 
Destroy:function(){ 

    var infoWrapperDiv = $id('infoWrapperDiv'); 
    if(infoWrapperDiv){ 
     infoWrapperDiv.parentNode.removeChild($id('infoWrapperDiv')); 
    } 
} 
};