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

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

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

アクションシートは、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">


 
 
	
        

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Xiaoqiang の HTML5 モバイル開発ロード (37) - jqMobi クイックスタート次の記事：Xiaoqiang の HTML5 モバイル開発ロード (37) - jqMobi クイックスタート

続きを見る

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

関連記事