10

我有一个带有一些按钮的 jQuery Mobile 网站。如果视口为 640 像素或更宽，我想在按钮右侧显示一些文本，否则隐藏文本。

我知道用于该目的的iconpos选项/数据属性left，并且可以将其设置为在我需要和notext不需要时显示文本。我可能会想出一些 Javascript 来更改属性并在页面加载、方向更改和窗口调整大小事件时刷新按钮，但这可能会变得很麻烦，而且我不确定我是否忘记了一些可能导致视口的事件宽度来改变。

编辑 2：我在多个浏览器和设备上测试了我的网站，似乎更改方向、调整窗口大小以及显示和隐藏屏幕键盘（在可能的情况下）总是导致resize事件被触发window对象。当然，我不确定这是否会在所有浏览器中始终发生。

我考虑过使用某种媒体查询将display文本上的 CSS 属性设置为inline或none取决于视口宽度，但在查看 jQuery Mobile 的代码后，似乎该iconpos选项影响的不仅仅是文本的可见性：它会影响尺寸、标题属性、图标位置和其他一些东西，因此仅使用 CSS 可能无法实现。

编辑：我忘了提到该按钮位于标题中，因此它是内联按钮之一。简单地通过 CSS 隐藏文本会让它看起来很有趣。

这里有人知道基于视口宽度显示或隐藏文本的简单实用方法吗？或者作为一个更普遍的问题，这里有没有人知道如何根据视口宽度更改数据属性并让 jQuery Mobile 在视口宽度发生变化时确认更改？我发现了一个关于更改数据属性的类似问题，它没有任何合理的答案。

4

5 回答 5

6

这是一个纯 CSS 解决方案，它需要一个 HTML5 浏览器，但 jQuery Mobile 也需要一个：

/* Less then 620 px -------------------*/ 
@media all and (max-width: 620px){  
    #custom-button span span { visibility:hidden;} 
}       

/* More then 640 px -------------------*/ 
@media only screen and (min-width: 640px) {
    #custom-button span span { visibility:visible;} 
}

可见性是比显示更好的解决方案，因为按钮高度将保持不变。

这是一个有效的 jsFiddle 示例： http: //jsfiddle.net/Gajotres/adGTK/，只需拉伸一个结果区域即可查看差异。

编辑 ：

这应该这样做，例子是一样的：http: //jsfiddle.net/Gajotres/adGTK/

/* Less then 639 px -------------------*/ 
@media all and (max-width: 639px){  
    #custom-button span span.ui-btn-text 
    { 
        left: -9999px !important;
        position: absolute !important;
    } 

    #custom-button span span.ui-icon 
    { 
        float: left !important;
        margin: 2px 1px 2px 3px !important;
        display: block !important;
        z-index: 0 !important;   
        position: relative;
        left: 0 !important;
    } 

    #custom-button span.ui-btn-inner
    { 
        padding: 0 !important;
    } 

    #custom-button
    { 
        height: 24px !important;
        width: 24px !important;
        margin-top: 5px;
    }     
}

此示例仅适用于使用 <a> 标记创建的按钮。

于 2013-02-22T09:28:44.807 回答
3

这是迄今为止我想出的最好的事情：

$(window).resize(function() {
    $(".ui-btn-left, .ui-btn-right, .ui-btn-inline").filter("[data-icon]")
        .buttonMarkup({iconpos: window.innerWidth >= 640 ? "left" : "notext"})
        .buttonMarkup("refresh");
});

$(document).delegate("[data-role=page]", "pageinit", function() {
    $(window).resize();
});
于 2013-02-25T19:51:34.163 回答
1

在转移到仅类按钮声明之后，这在 jQuery Mobile 1.4 beta 1 中对我非常有效。

$(window).on("throttledresize", function() {
  var smallButtons = $(window).width() <= 480;
  $('#article_nav a').toggleClass('ui-btn-icon-notext', smallButtons);
  $('#article_nav a').toggleClass('ui-btn-icon-left', !smallButtons);
});
于 2013-10-02T18:15:57.073 回答
0

为 data-icon 类型的 a 和 button 标签工作，默认设置data-iconpos="notext"在 html 中，然后绑定pagebeforecreate orientationchange事件以根据屏幕宽度添加或删除属性：

$(document).on('pagebeforecreate orientationchange', updateIcons);

function updateIcons () {
    if ($(window).width() > 480) {
        $('a[data-icon], button[data-icon]').removeAttr('data-iconpos');
    } else {
        $('a[data-icon], button[data-icon]').attr('data-iconpos', 'notext');
    }
}

编辑：看起来它只适用于页面创建而不是方向更改。

信用：Aurelio@buildmobile.com

于 2013-03-03T12:15:03.730 回答
0

这是一个适用于 IE8+ 和所有其他浏览器的纯 css 解决方案。请注意，代码来自 Twitter-Bootstrap，只是稍作修改。

演示

<button type="submit" class="btn btn-primary" value="Submit">
    <i id="versturen" class="fa fa-check"></i>
    <span class="sr-only-xs"> Versturen</span>
</button>

@media (max-width: 767px) {
  .sr-only-xs {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
  }
}
于 2014-09-20T21:04:09.627 回答