Xiaoqiang의 HTML5 모바일 개발 도로(39) - jqMobi 플러그인 json 형식 ActionSheet-H5 튜토리얼-php.cn

Xiaoqiang의 HTML5 모바일 개발 도로(39) - jqMobi 플러그인 json 형식 ActionSheet

黄舟

풀어 주다： 2017-02-13 14:18:36

원래의

1944명이 탐색했습니다.

이전 기사에서 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에 대해 알아보겠습니다. 이전 글의 분석 방법과 마찬가지로 먼저 다음과 같이 예제 코드에서 소스 코드를 찾습니다. >

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

로그인 후 복사

rrree

작동 효과:

자, 아래에 항목을 추가해 보겠습니다. 다음과 같이 코드를 수정하세요.

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

로그인 후 복사

실행하고 효과를 확인하세요.

갑자기 위에서 설정한 배경이 작동하지 않는 것을 발견했습니다. 이유는 무엇인가요? 소스 코드를 다시 살펴보고 다음과 같이 요소를 찾으세요.

 



jqMobi





 
 
	
    	

        	

           		<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 파일에 가서 다음과 같이 수정해 보겠습니다.

<a href="javascript:;" class="red">大碗干拌</a>

로그인 후 복사

효과는 위와 같고, 이미지를 붙여넣지 않을 테니, 위 메뉴의 텍스트를 파란색으로 하고 싶다면 어떻게 해야 할까요? 실제로 위와 같이 af.ui.css에서 수행할 수 있지만 이 구성 파일에서는 수정하지 않는 것이 좋습니다. index.html에 다음 코드를 추가할 수 있습니다.

#afui #af_actionsheet a{
    border-radius:0;
    -webkit-border-radius:0;
    color:black;
    /*background:white;*/
    border:none;
    text-shadow:none;
}

로그인 후 복사

효과는 다음과 같습니다.

위는 Xiaoqiang의 HTML5 모바일 개발 경로(39) - jqMobi 플러그인 json 형식 ActionSheet의 내용입니다. 관련 내용은 PHP 중국어 홈페이지(m.sbmmt.com)를 주목해주세요!