2

ページのヘッダーとフッター内のコンテナー div に追加するスライド アウト パネルを作成しようとしています。レスポンシブに Bootstrap を使用しているため、ソリューションはそのパッケージに含まれるメディアクエリで理想的に機能するはずです。私が試したすべてが何らかの形で機能していないように見えるため、これにアプローチする方法について本当に途方に暮れています。

この画像は、私が達成しようとしていることを最もよく表しています (デザイナーではなく申し訳ありません): http://d.pr/i/DzQc+

私が試したこと：

Pageslide - これは私がこれまでに見つけた最も近い解決策です。これにより、スライド アウト パネルが本体に追加されます。そのため、スライド アウト パネルをページのヘッダー/フッター コンテナー内に保持することはできません: http://srobbin.com/jquery-plugins/pageslide/

jQuery モバイル パネル ウィジェット- 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 に答える