検索

ホームページ >ウェブフロントエンド >H5 チュートリアル >Xiaoqiang の HTML5 モバイル開発ロード (38) - jqMobi プラグイン ActionSheet

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

黄舟
黄舟オリジナル
2017-02-13 14:16:591575ブラウズ

アクション シートは、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 を導入します。ファイル


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


 



jqMobi


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


 
 
	

        

        

            
            

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

            

            
            

        

        //底部
        
    

    <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) に注目してください。


声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Xiaoqiang の HTML5 モバイル開発ロード (37) - jqMobi クイック スタート次の記事：Xiaoqiang の HTML5 モバイル開発ロード (37) - jqMobi クイック スタート

関連記事

続きを見る