Xiaoqiang の HTML5 モバイル開発ロード (38) - jqMobi プラグイン ActionSheet

アクション シートは、WeChat の共​​有ボタン メニューなど、現在モバイル クライアントで非常に一般的です。以下では、次のように jqMobi を使用してアクション シートを実装します:

まず、上のボタンを右クリックし、[要素の検査] を選択します。 (私は Chrome ブラウザーを使用しています。最初に F12 を押します)

<a class="button" onclick="showCustomHtmlSheet()">Show Custom Html Sheet</a>

次に、Ctrl + F を押して showCustomHtmlSheet() メソッドを見つけます

コードは次のように投稿されます。

   function showCustomHtmlSheet() {
           $("#afui").actionsheet(&#39;<a  >Back</a><a  onclick="alert(\&#39;hi\&#39;);" >Show Alert 3</a><a  onclick="alert(\&#39;goodbye\&#39;);">Show Alert 4</a>&#39;);
   }

できます 上記の機能には 3 つのボタン リンクがあることがわかります。上の図の最後のキャンセルは、システムのデフォルトのキャンセル ボタンです。

次に、Ctrl + F を押してプラグインを見つけます。次の行が表示されます

<link rel="stylesheet" type="text/css" href="plugins/css/af.actionsheet.css">

それでは、プロジェクトで上記の効果を達成しましょう:

最初に af.actionsheet.css を導入します。ファイル

上記のコードをコンテンツ

 






<link rel="stylesheet" type="text/css" href="plugins/css/af.actionsheet.css">


 
 
	

        

            
            Toggle Side Menu
        
        

            
            

               <a class="button" onclick="showCustomHtmlSheet()">Show Custom Html Sheet</a>
            
            

            
            
        

        //底部
        

        Home
        
    

    <script>
		
		function showCustomHtmlSheet() {
			$("#afui").actionsheet(&#39;<a  >Back</a><a  onclick="alert(\&#39;hi\&#39;);" >Show Alert 3</a><a  onclick="alert(\&#39;goodbye\&#39;);">Show Alert 4</a>&#39;);
		}

                    
	</script>

実行結果:

上記は Xiaoqiang の HTML5 モバイル開発パス (38)・jqMobiプラグインの内容ActionSheet のその他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。