2

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

这张图片最能体现我想要完成的工作（抱歉不是设计师）： http ://d.pr/i/DzQc+

我试过的：

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

jQuery Mobile 面板小部件- 我尝试破解并重新利用 jQuery 移动面板小部件插件以按需要运行，但没有任何运气。

.append 函数- 我尝试为 .append 函数设置动画，但这不适用于引导程序的响应函数。

综上所述，你们中有人对可能有效的插件、功能或实现有什么建议吗？我不一定要寻找一段有效的代码，而是寻找一个可以按我希望的那样工作的方向。

谢谢！

4

1 回答 1

0

这是我构建的原型模式中的弹出容器，您可以为任何 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'));
   }
 }
};
于 2013-08-14T00:43:28.537 回答