Question

我正在尝试创建一个滑出面板，该面板会附加到页面页眉和页脚中的容器div。我正在使用Bootstrap进行响应，因此理想情况下，解决方案应该与该包中包含的媒体查询一起使用。我真的对如何处理这个问题感到茫然，因为我尝试的所有东西似乎都不会以某种方式起作用。

这张照片最能激发我想要完成的事情（抱歉不是设计师）： http://d.pr/i/DzQc+

我尝试了什么：

Pageslide - 这是我迄今为止找到的最接近的解决方案。这会将滑出面板附加到主体上。因此，它不允许我将滑出面板保持在页面的页眉/页脚容器中：http://srobbin.com/jquery-plugins/pageslide/

jQuery Mobile Panel Widget - 我试图破解并重新利用jQuery移动面板小部件插件，以便在没有任何运气的情况下正常运行。

.append函数 - 我试图为.append函数设置动画，但这不适用于bootstrap的响应函数。

所有人都说过，你们中有没有人对插件，功能或实现有什么建议？我不一定在寻找一段可靠的代码，而是在寻找一个可以按照我希望的方向工作的方向。

谢谢！

Answer 1

这是我构建的原型模式中的弹出容器，您可以创建任何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'));
   }
 }
};

滑出附加到DIV的面板

1 个答案: