jQuery - 創建下拉工具欄組件

嘿所以我有一個HTML/PHP頁面，其中有一個工具欄，跨越瀏覽器頂部的整個寬度，從頂部向下約45像素。工具欄包含在<div>中，並使用CSS進行樣式化。我希望酒吧能夠被拖拽到一定的高度，當用戶釋放酒吧時，酒吧會回覆到原來的位置並執行一項任務（例如，使用$.ajax重新加載或者更酷的東西）。當用戶在y平面上拖動它時，我希望酒吧能夠在高度上增長和縮小。我已經完成了使用jquery UI部件可拖動的部分解決方案。這裏是我的代碼：jQuery - 創建下拉工具欄組件

//functions that handles topBarWrapper drags 
$('.topBarWrapper').draggable({ 
    axis : 'y', 
    appendTo : '.mainVideoPage', 

    drag: function(event, ui) { 
     //Possible place to set height? 
    }, 

    stop: function(event, ui) { 
     //resset offset and perfrom reload here 
     $(this).offset({ top: 0, left: 0 }) 
    } 
});

上述代碼幾乎完成。我能夠完成<div>，一旦發佈，它會恢復原來的偏移量並做一些事情。我似乎無法得到身高的工作，有什麼想法？

來源

2014-02-25 ScottOBot

我不確定實際會改變高度，但是......這是一個解決方案，它涉及隱藏視口上方的一些可拖動內容，並將拖動約束到適當大小和定位的容器（檢查小提琴，很難說這只是從這些片段做）：

http://jsfiddle.net/U2CRH/

<div class="topbar-container"> 
    <div class="topbar"> 
     <div class="topsection"> 
      <div>Pull down to refresh...</div> 
     </div> 
     <div class="dragger">Pull down...</div> 
    </div> 
</div>

.topbar-container { 
    height:250px; 
    position:absolute; 
    top:-100px; 
    right:0; 
    left:0; 
} 
.topbar { 
    width:100%; 
    margin:0; 
    height:150px; 
    position:absolute; 
    top:0; 
    right:0; 
    left:0; 
} 
.topsection { 
    height:100px; 
    margin:0; 
    padding:0; 
    background-color:lightblue; 
} 
.topsection div { 
    padding-top:50px; 
} 
.dragger { 
    height:50px; 
    background-color:lightgreen; 
    margin:0; 
    padding:0; 
}

$('.topbar').draggable({ 
    axis: 'y', 
    appendTo: '.mainVideoPage', 
    containment: 'parent', 

    drag: function (event, ui) { 
     //... 
    }, 

    stop: function (event, ui) { 
     var $this = $(this); 
     if ($this.offset().top >= -20) { 
      //perform reload 
     } else {    
      $this.animate({ 
       'top': '0' 
      }); 
     } 
    } 
});

來源

2014-02-25 04:30:45

jQuery - 創建下拉工具欄組件

回答

相關問題