0

http://jsbin.com/iZILATE/1/edit

我在 JQuery Mobile 的标题上有按钮。我只想在锚点显示在标题元素上时隐藏标题（h1），例如低分辨率或将视图从横向更改为纵向。

的HTML

<div class="header ui-bar-c" id="head1" data-role='header'>
    <div id="gentags" class="ui-btn-left">
        <a id="htmltag" data-role="button" data-inline="true" data-mini="true">&lt;&gt;&lt;/&gt;</a>
        <a id="csstag1" data-role="button" data-inline="true" data-mini="true">{}</a>
        <a id="colon" data-role="button" data-inline="true" data-mini="true">:</a>
        <a id="semicolon" data-role="button" data-inline="true" data-mini="true">;</a>
        <a id="csstag2" data-role="button" data-inline="true" data-mini="true">:;</a>
        <a id="jstag1" data-role="button" data-inline="true" data-mini="true">()</a>
        <a id="jstag2" data-role="button" data-inline="true" data-mini="true">("")</a>
        <a id="function" data-role="button" data-inline="true" data-mini="true">function(){}</a>
    </div>

    <h1>Text Website Name</h1>
    <a href="#menupanel" data-role="button" data-icon="bars" data-iconpos="notext" data-inline="true" class="ui-btn-right">Bars</a>
</div>
4

1 回答 1

1

以下脚本可以帮助指导您：

jQuery(function($) {
   $(window).bind('resize', function() {
      var $btns = $('#headbtns'),
      btnsWidth = $btns.width(),
      width     = $(window).width();
      if ((btnsWidth / width) > 0.3)
         $('.ui-title').hide();
   else
         $('.ui-title').show();
   });
});

这里我们检测按钮容器的宽度是否大于视口宽度的 30%。默认情况下，jQuery mobile 中的标题在 x 轴上具有 30% 的边距。

虽然它按照我的解释工作，但是检测按钮容器与标题中文本的冲突并不精确。要做到这一点，它需要一些肮脏的技巧......

于 2013-08-31T00:33:15.517 回答