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

위 그림의 마지막 취소 버튼은 시스템 기본 취소 버튼입니다.

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 중국어 홈페이지(www.php.cn)를 참고해주세요!