在jQuery Mobile中响应地显示或隐藏按钮文本

Question

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

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

编辑2:我在几个浏览器和设备上测试了我的网站,似乎改变方向,调整窗口大小,显示和隐藏屏幕键盘(在可能的情况下)总是导致resize事件被触发的window对象.当然,我不确定这将永远发生在所有浏览器中.

我想过使用某种媒体查询来设置display文本上的CSS属性,inline或者none取决于视口宽度,但在我查看jQuery Mobile的代码之后,看起来该iconpos选项不仅影响文本的可见性:它会影响尺寸,标题属性,图标位置和其他一些内容,因此仅使用CSS可能无法实现.

编辑:我忘了提到按钮在标题中,所以它是内联按钮之一.简单地通过CSS隐藏文本将使它看起来很有趣.

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

Answer 1

这是一个纯粹的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/,只需拉伸一个Result区域即可看到差异.

编辑:

这应该这样做,例子是相同的: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>标记创建的按钮.

Answer 2

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

$(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();
});