Geek asks and answers

JQuery Mobile Change Icon Foldable Sets

This is the first time I have been working with jQuery Mobile, and I'm having trouble doing what seems like a simple change of icons on a collapsible set (accordion) .

I want to change the icon for each of the headers on the collapsible set with the up arrow for the expanded state and the down arrow for the minimized state.

I created a script that seems to have the same problem with the code, which I pretty much copied directly from the jQuery mobile site and modified a bit.

Any help or pointers to this would be greatly appreciated. Thank!

+3
source share
4 answers

, , jQuery mobile . , JQM. .

: " " jqm - http://jsfiddle.net/AAYjF/

. , :

<!DOCTYPE html>
<html>
    <head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <style>
        .ui-collapsible .ui-icon{
            background-position: -180px 50%;/*Position of up icon in icon sprite*/
        }

        .ui-collapsible-collapsed .ui-icon{
            background-position: -216px 50%;/*Position of down icon in icon sprite*/
        }

    </style>
</head>
<body>

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <div data-role="collapsible-set">

    <div data-role="collapsible">
    <h3>Section 1</h3>
    <p>I'm the collapsible set content for section B.</p>
    </div>

    <div data-role="collapsible" >
    <h3>Section 2</h3>
    <p>I'm the collapsible set content for section B.</p>
    </div>

</div>
    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

"" ""

: http://jsfiddle.net/6x8ew/

+6

, , JQM.

$(document).on('pageinit',function(){

    $('.ui-collapsible .ui-icon').removeClass('ui-icon-plus').addClass('ui-icon-arrow-u');

    $('[data-role=collapsible]')
        .on('expand',function(){ 
            $(this).find('.ui-icon').removeClass('ui-icon-arrow-u').addClass('ui-icon-arrow-d');               
        })
        .on('collapse',function(){
            $(this).find('.ui-icon').removeClass('ui-icon-arrow-d').addClass('ui-icon-arrow-u');
        });        
});​

jqm collapsible events .

. .

+5

I haven't done much with jQuery Mobile yet, so grab it for what it costs.

I think you need to put the attributes on <div data-role="collapsible-set">, not on each data-role="collapsible". Obviously, this will work only for all children, and this will not allow you to focus on individual children.

0
source

With jQuery mobile version 1.4.0 you can accomplish this by specifying the following code in your CSS file

For special right arrow

.ui-icon-arrow-r:after {
  background: url("Path to your image file") no-repeat scroll 0px 0px transparent;

}

To adjust the down arrow

.ui-icon-arrow-d:after {
  background: url("Path to your image file") no-repeat scroll 0px 0px transparent;

}

0
source

More articles:


All Articles