0

デスクトップ用の jQuery Mobile を使用しようとしています。ソーシャル ネットワーキング サービスを構築しており、グループとメッセージの用途ごとに左右のパネルを使用したいと考えています。

私が望むのは、Google+ のサイドバーのように、それぞれのヘッダー バー ボタンにカーソルを合わせるとサイド パネルが表示されることです。

これが私のコードです：

jsフィドル

<!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.3.2/jquery.mobile-1.3.2.min.css" />
    <!--jqm cdn-->
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head> 
<body> 

<div data-role="page">
<!--groups panel-->
<div data-role="panel" id="groups-panel" data-position="left" data-display="overlay">
LPS
</div>
<!--friends panel-->
<div data-role="panel" id="friends-panel" data-position="right" data-display="overlay">
LPS
</div>

    <div data-role="header" data-theme="b">
        <a href="#groups-panel" id="groups-button" data-icon="arrow-r" data-iconpos="notext">Groups</a>
        <h1>My Title</h1>
        <a href="#friends-panel" id="friends-button" data-icon="arrow-l" data-iconpos="notext">Friends</a>
    </div><!-- /header -->

    <div data-role="content">   

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

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

</body>
</html>

どうやってやるの？どんな助けでも大歓迎です。

4

1 に答える 1

3

このコードをページに追加します

$('#groups-panel').mouseleave(function () {
    $(this).panel("close");
});

$("#groups-button").hover(function () {
    $('#groups-panel').panel("open");
});

$('#friends-panel').mouseleave(function () {
    $(this).panel("close");
});

$("#friends-button").hover(function () {
    $('#groups-panel').panel("open");
});

フィドル

于 2013-09-15T08:45:32.643 に答える