粘性左列在jQuery的移动

是否有可能在jQuery移动中完成以下内容？粘性左列在jQuery的移动

我有一个网格

<div class="ui-grid-a" > 
      <div class="ui-block-a" > 
       navigationtree 
      </div> 

      <div class="ui-block-b"> 
       datatable with 50+ rows 
      </div> 
</div>

当表中有太多数据滚动条就会出现，且嵌段b应该是滚动的，其中块的一个应该是在任何时候都粘，以便导航保持原位。

是否有可能在jquery mobile中完成这样的行为？

来源

2014-11-14 Andreas Zeiner

由于2个网格块共享50％的宽度，通过将块a设置为固定位置并使块b右移，可以很容易地实现它。

演示

http://jsfiddle.net/59v0gy6w/

<div class="ui-block-a" style="position:fixed"> 

<div class="ui-block-b" style="float:right">

来源

2014-11-14 14:54:48 Tasos

哇，谢谢sooo多!!!这正是我需要的！ – 2014-11-14 14:59:58

cytasos给了一个很好的答案！如果你真的想只是UI块-B是滚动的，你可以这样来做：

第一比例尺的UI内容div来填充设备/屏幕高度：

function ScaleContentToDevice() { 
    scroll(0, 0); 
    var content = $.mobile.getScreenHeight() - $(".ui-header").outerHeight() - $(".ui-footer").outerHeight() - $(".ui-content").outerHeight() + $(".ui-content").height(); 
    $(".ui-content").height(content); 
} 

$(document).on("pagecontainershow", function() { 
    ScaleContentToDevice(); 
}); 

$(window).on("resize orientationchange", function() { 
    ScaleContentToDevice(); 
});

下一组网格高度为100％和嵌段b的div至100％的高度和溢流在CSS：

.ui-grid-a { 
    height: 100%; 
} 
.ui-block-b { 
    height: 100%; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; 
}

DEMO

来源

2014-11-14 15:08:28 ezanker

哇，这很聪明。 – Tasos 2014-11-14 16:04:27

@cytasos，谢谢，我喜欢你的解决方案，因为它更简单，我永远不会想到它:) – ezanker 2014-11-14 16:10:25

thx很多这是真的另一个很酷的方式！问题是导航是一个可能比屏幕更大的树，意味着它应该可以滚动！ – 2014-11-14 16:31:31

粘性左列在jQuery的移动

回答

相关问题