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

前回の記事では、ActionSheet の使い方を学びましたが、リストを作成するための形式は HTML であることに注意してください。コードは次のとおりです:

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;);
}

この記事では、JSON 形式の ActionSheet を学習しましょう。実際、前回の記事の分析方法と同様に、まず次のようにサンプルコードのソースコードを見つけます。

さて、それを下に追加しましょう。 1 つのエントリを試してください。コードを次のように変更します:

<a class="button" onclick="showCustomJsonSheet()">Show Custom Json Sheet</a>

実行して効果を確認してください:

突然、上で設定した背景が機能しないことがわかりました。その理由は何ですか?もう一度ソース コードを見て、次のように要素を見つけてください。

                        function showCustomJsonSheet() {
                            $("#afui").actionsheet(
                            [{
                                text: 'back',
                                cssClasses: 'red',
                                handler: function () {
                                    $.ui.goBack();
                                }
                            }, {
                                text: 'show alert 5',
                                cssClasses: 'blue',
                                handler: function () {
                                    alert("hi");
                                }
                            }, {
                                text: 'show alert 6',
                                cssClasses: '',
                                handler: function () {
                                    alert("goodbye");
                                }
                            }]);
                        }

この項目を無効にすると、次のような影響が生じます。

さて、af.ui.css ファイルに移動して次のように変更しましょう:

 








 
 
	

    	

        	

           		<a class="button" onclick="showCustomJsonSheet()">Show Custom Json Sheet</a>
            
            

                
           	
            

            	
首页
            
            

            	首页
                关于我们
            
            

            	
Home
                

                	
Home
                
            
        

    

    <script>
		function showCustomJsonSheet() {
			$("#afui").actionsheet(
			[{
				text: &#39;back&#39;,
				cssClasses: &#39;red&#39;,
				handler: function () {
					$.ui.goBack();
				}
			}, {
				text: &#39;show alert 5&#39;,
				cssClasses: &#39;blue&#39;,
				handler: function () {
					alert("hi");
				}
			}, {
				text: &#39;show alert 6&#39;,
				cssClasses: &#39;&#39;,
				handler: function () {
					alert("goodbye");
				}
			},{
				text: &#39;大碗干拌&#39;,
				cssClasses: &#39;red&#39;,
				handler: function () {
					alert("哈哈");
				}
			}]);
		}             
	</script>

効果は上記と同じです。画像は貼り付けません。テキストを貼り付けたい場合は画像を貼り付けます。上のメニューが青色になるにはどうすればよいですか?実際には、上記のように af.ui.css で行うことができますが、この設定ファイルでは変更しないことをお勧めします。次のコードをindex.html に追加できます。以下:

上記は、Xiaoqiang の HTML5 モバイル開発ロード (39) - jqMobi プラグイン json 形式 ActionSheet の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。