Xiaoqiang の HTML5 モバイル開発ロード (41) - jqMobi でのサイドメニューの実装 (Renren と同様)-H5 チュートリアル-php.cn

Xiaoqiang の HTML5 モバイル開発ロード (41) - jqMobi でのサイドメニューの実装 (Renren と同様)

黄舟

リリース： 2017-02-15 13:13:26

オリジナル

1536 人が閲覧しました

私がネイティブアプリを作っていた頃、Renren.com に似たサイドスライドエフェクトが非常に人気だったことを思い出します。jqMobi にもサイドメニューという同様のエフェクトがあります。ステップ。

まず、次のように新しい HTML ファイルを作成し、jqMobi フレームワークを導入します:

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Side Menu</title>
<link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
<link href="css/icons.css" rel="stylesheet" type="text/css"/>
<script src="appframework.js" type="text/javascript"></script>
<script src="ui/appframework.ui.js" type="text/javascript"></script>
</head>

<body>
	<p id="afui">
    
    </p>
</body>
</html>

ログイン後にコピー

次に、次のようにパネルを追加します

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Side Menu</title>
<link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
<link href="css/icons.css" rel="stylesheet" type="text/css"/>
<script src="appframework.js" type="text/javascript"></script>
<script src="ui/appframework.ui.js" type="text/javascript"></script>
</head>

<body>
	<p id="afui">
    	<p id="content">
        	<p id="home" class="panel">
            	欢迎访问大碗干拌CSDN博客：http://www.php.cn/
            </p>
        </p>
    </p>
</body>
</html>

ログイン後にコピー

< を追加; nav＆gt;パネルの同じレベルのラベル

次に、パネルとフッターを追加します。 2つのパネルに対応するサイドメニューは同じです

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Side Menu</title>
<link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
<link href="css/icons.css" rel="stylesheet" type="text/css"/>
<script src="appframework.js" type="text/javascript"></script>
<script src="ui/appframework.ui.js" type="text/javascript"></script>
</head>

<body>
	<p id="afui">
    	<p id="content">
        	<p id="home" class="panel">
            	欢迎访问大碗干拌CSDN博客：http://www.php.cn/
            </p>
        </p>
        <nav>
        	<p class="title">Home</p>
            <ul>
            	<li><a class="icon home mini" href="">Android</a></li>
                <li><a class="icon home mini" href="">Linux</a></li>
                <li><a class="icon home mini" href="">HTML5</a></li>
            </ul>
        </nav>
    </p>
</body>
</html>

ログイン後にコピー

以下では、サイドメニューがパネルに属し、各パネルにそれを与えることができることがわかります。サイドメニューを指定するか、サイドメニューを共有します

現在の最大の問題は、上のサイドメニューに左右のスライド効果を持たせる方法です。これは、次のjsを導入することで実現できます

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Side Menu</title>
<link href="css/af.ui.css" rel="stylesheet" type="text/css"/>
<link href="css/icons.css" rel="stylesheet" type="text/css"/>
<script src="appframework.js" type="text/javascript"></script>
<script src="ui/appframework.ui.js" type="text/javascript"></script>
</head>

<body>
	<p id="afui">
    	<p id="content">
        	<p id="home" class="panel" selected="true" data-header="custom_header" data-footer="custom_footer">
            	欢迎访问大碗干拌CSDN博客：http://www.php.cn/
            </p>
            <p id="android" class="panel" data-header="custom_header" data-footer="custom_footer">
            	欢迎访问大碗干拌Android菜鸟开发历程专栏：http://www.php.cn/
            </p>
        </p>
        <header id="custom_header">
        	<h1>大碗干拌欢迎您</h1>
            <a class="button" style="float:right;" class="icon home"></a>
        </header>
        <footer id="custom_footer">
        	<a href="#home" class="icon info">HOME</a>
            <a href="#android" class="icon info">Android</a>
        </footer>
        <nav>
        	<p class="title">Home</p>
            <ul>
            	<li><a class="icon home mini" href="">Android</a></li>
                <li><a class="icon home mini" href="">Linux</a></li>
                <li><a class="icon home mini" href="">HTML5</a></li>
            </ul>
        </nav>
    </p>
</body>
</html>

ログイン後にコピー

。

上記は Xiaoqiang の HTML5 モバイル開発ロード (41) - jqMobi でのサイドメニュー実装の内容 (Renren と同様) より多くの関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。