jQuery Mobile Panel问题 [英] jQuery Mobile Panel Problems

问题描述

 < div data- role =panelid =nav-popup-menudata-position =leftdata-transition =slidedata-display =overlaydata-dismissible =true> 
< button class =search>搜索< / button> 
< / div> 
 
 .ui-panel {
 background-color：rgba（0,0,0,0.5）！important; 
 width：200px; 
} 
 
< a href =＃nav-popup-menudata-role =buttondata-icon =gearstyle =background-color：＃f6f5f4; border-color：＃f6f5f4; color：＃f6f5f4;> |< / a> 
  

根据上面的内容，我认为按面板外任何位置都会导致它关闭。然而，这种行为似乎不尊重我的自定义宽度。也就是说，如果我按250px，它不关闭，而如果我按在500px，默认宽度已经结束，它关闭。

使用JQM 1.4.1

任何想法？

解决方案

em> Panel 添加了 ui-panel-dismiss 类的叠加层，一旦点击/触摸，就会关闭活动面板 left：17em; （如果是左面板）。

当您覆写面板的宽度时，您也需要调整重叠的位置。这个值也代表面板的预设宽度。

的新宽度。

  .ui-panel-dismiss {
 left：200px！important; 
} 
  

演示

I have a jQuery Mobile Panel that's not behaving properly (in PhoneGap if the matters).

<div data-role="panel" id="nav-popup-menu" data-position="left" data-transition="slide" data-display="overlay" data-dismissible="true">
  <button class="search">Search</button>
</div>

.ui-panel {
  background-color: rgba(0,0,0,0.5) !important;
  width: 200px;
}

<a href="#nav-popup-menu" data-role="button" data-icon="gear" style="background-color: #f6f5f4; border-color: #f6f5f4; color: #f6f5f4; ">|</a>

Based on the above I would expect that pressing anywhere outside the panel would cause it to close. However, this behavior doesn't seem to respect my custom width. That is, if I press at 250px, it doesn't close, whereas if I press at 500px, where the default width would have already ended, it does close.

Using JQM 1.4.1

Any ideas?

解决方案

A Panel adds an overlay with class ui-panel-dismiss, which closes active panel once clicked/touched. The default position of the panel's overlay is left: 17em; (in case of left panel). That value also represents the default width of panel.

When you override panel's width, you also need to adjust overlay's position. Just give it the same value of panel's new width.

.ui-panel-dismiss {
  left: 200px !important;
}

Demo

这篇关于jQuery Mobile Panel问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！