追加到DIV的滑出面板

Slide Out Panel that appends to a DIV

本文关键字：DIV 追加      更新时间：2023-09-26

我正在尝试创建一个附加到页眉和页脚内的容器div的滑出面板。我使用Bootstrap进行响应，因此解决方案应该理想地与该包中包含的媒体查询一起工作。我真的不知道如何处理这个问题，因为我尝试过的所有方法似乎都不起作用。

这张图是我想要完成的最好的动画(抱歉不是设计师):http://d.pr/i/DzQc +

我试过了:

Pageslide -这是目前为止我发现的最接近的解决方案。这将滑出面板附加到阀体上。因此，它不允许我在页眉/页脚容器内保持滑出面板:http://srobbin.com/jquery-plugins/pageslide/

jQuery移动面板小部件 -我试图破解和重新使用jQuery移动面板小部件插件的功能，没有任何运气。

。append Function -我试图动画。append函数，但这与bootstrap的响应函数不起作用。

说了这么多，你们中有人对一个插件、函数或实现有什么建议吗?我不一定在寻找一个工作的代码片段，而是我在寻找一个方向，将工作，因为我希望。

谢谢!

这是一个我构建的原型模式的弹出式容器，你可以创建任何div。CSS它的风格，你喜欢

产品使用

: 

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'));
   }
 }
};

相关文章：