How to remove button text responsively in JQuery Mobile

I'm very new to Jquery & jquery mobile. I'm resizing a button so it's responsive to window size. To be more specific, i'm changing it from iconpos="left" to iconpos="notext" to remove the text on small windows. I found the following function, which works for me.

$(window).on("throttledresize", function() { var smallButtons = $(window).width() <= 480; $('#menu_toggle').toggleClass('ui-btn-icon-notext', smallButtons); $('#menu_toggle').toggleClass('ui-btn-icon-left', !smallButtons); });

But it only works on the window resizing. Obviously, I'd also like it showing the correct size on pageload, not just resizing. I found the code below, but I don't know how put them both into 1, more succinct bit of code.

$("#page_id").on("pageshow" , function() { The Function });


jQuery Mobile >= 1.4

.buttonMarkup() as well as data-role="button" are deprecated and will be removed in <strong>1.5</strong>. Instead, classes should be added manually to Anchor tag.


    Create a function to manipulate classes of Anchor. As of jQM page events are now replaced with pageContainer events. The new events can't be bound to a specific page, therefore, you need to look for the Anchor inside active page.

    Note that $.mobile.activePage is also deprecated and replaced with $.mobile.pageContainer.pagecontainer("getActivePage").

    function resizeBtn() { var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"); if ($(window).width() <= 480) { $("#notext.ui-btn-icon-left", activePage) .toggleClass("ui-btn-icon-notext ui-btn-icon-left"); } else { $("#notext.ui-btn-icon-notext", activePage) .toggleClass("ui-btn-icon-left ui-btn-icon-notext"); } } </li> <li>

    Call function on pagecontainerbeforeshow event:

    $(document).on("pagecontainerbeforeshow", resizeBtn); </li> <li>

    Call function on throttledresize event:

    $(window).on("throttledresize", resizeBtn); </li> </ul>

    Note: throttledresize is better than resize as it delays firing resize event coming from the browser.



    jQuery Mobile <= 1.3

    You need to use .buttonMarkup() if you're using jQuery Mobile 1.3 or lower.

    $(".selector").buttonMarkup({ iconpos: "notext" });

      Resize function:

      function resizeBtn() { if ($(window).width() <= 480) { $(".selector").buttonMarkup({ iconpos: "notext" }); } else { $(".selector").buttonMarkup({ iconpos: "right" }); } } </li> <li>

      Call function on pagebeforeshow:

      $(document).on("pagebeforeshow", resizeBtn); </li> <li>

      Call function on resize:

      $(window).on("resize", resizeBtn); </li> </ul>


      人吐槽 人点赞



用户名: 密码:
验证码: 匿名发表


查看评论:How to remove button text responsively in JQuery Mobile