Question

我是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>

我感谢所提供的任何建议。

Answer 1

退房：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>

Answer 2

以下是使用布局网格的粗略示例：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>

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

jQuery Mobile：将url添加到可折叠内容标题中

2 个答案: