3

我是 JQM 新手，需要在可折叠内容标题中放置链接图像，以便在单击它时用户能够访问关联的 href。我还需要能够让标题根据需要展开和折叠。到目前为止，这是我的代码

<h3><em><?=$agent_row['prefix'] . ' ' . $agent_row['first'] . ' ' . $agent_row['last'] . ' ' . $agent_row['suffix']?>
    <a class="vcard" id="vcard" href="http://vcard.parascript.com/<?=$agent_row['first']?>_<?=$agent_row['last']?>.vcf"><img src="images/vcard.png" style="vertical-align:middle;width:30px;" /></a>
    <a id="email" href="mailto:<?=$agent_row['email']?>"><img src="images/mail.png" style="vertical-align:middle;width:30px;" /></a>
    <a id="mobilephone" href="tel://<?=$agent_row['cell']?>"><img src="images/mobile_phone.png" style="vertical-align:middle;width:30px;" /></a>
</em></h3>

我感谢提供的任何建议。

4

2 回答 2

0

查看：http: //jquerymobile.com/demos/1.2.0/docs/content/content-collapsible.html

示例：http: //jsfiddle.net/Twisty/tJyeQ/

HTML

<html>
<body>
    <div data-role="page"  id="page1">
        <div data-role="header">
            <h1>page1</h1>
        </div>
        <div data-role="content">
            <div data-role="collapsible">
                <h3><em>First Last</em></h3>
                <a class="vcard" id="vcard" href="http://vcard.parascript.com/first_last.vcf">
                    <img src="images/vcard.png" style="vertical-align:middle;width:30px;" />
                </a>
                <a id="email" href="mailto:f.last@example.com"><img src="images/mail.png" style="vertical-align:middle;width:30px;" />Email</a>
                <a id="mobilephone" href="tel://4155551212"><img src="images/mobile_phone.png" style="vertical-align:middle;width:30px;" />Phone</a>
            </div>
        </div>
    </div>
</body>
</html>
于 2012-12-12T22:57:13.690 回答
0

这是一个使用布局网格的粗略示例：http: //jsfiddle.net/Twisty/tJyeQ/6/

HTML

<html>
<body>
    <div data-role="page"  id="page1">
        <div data-role="header">
            <h1>page1</h1>
        </div>
        <div data-role="content">
            <div class="ui-grid-c ui-btn ui-bar-c ui-corner-all">
                <div class="ui-block-a">
                    <span class="ui-btn-inner">
                        <span class="ui-icon ui-icon-plus ui-icon-shadow"> </span>
                        <span class="ui-btn-text">First Last</span>
                    </span>
                </div>
                <div class="ui-block-c">
                    <a class="vcard" id="vcard" href="http://vcard.parascript.com/first_last.vcf">
                        <img src="images/vcard.png" style="vertical-align:middle;width:30px;" />
                        vcard
                    </a>
                </div>
                <div class="ui-block-c">
                    <a id="email" href="mailto:f.last@example.com">
                        <img src="images/mail.png" style="vertical-align:middle;width:30px;" />
                        Email
                    </a>
                </div>
                <div class="ui-block-d">
                    <a id="mobilephone" href="tel://4155551212">
                        <img src="images/mobile_phone.png" style="vertical-align:middle;width:30px;" />
                        Phone
                    </a>
                </div>
            </div><!-- /grid-c -->
        </div>
    </div>
</body>
</html>

这允许您为每个图像设置一个唯一的焦点或按钮，并且您可以让名称显示/隐藏其他内容，如可折叠块，只需一点额外的代码。

于 2012-12-13T00:55:39.683 回答