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://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 に答える
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 に答える