WeChat의 공유 버튼 메뉴와 같이 액션 시트는 이제 모바일 클라이언트에서 매우 일반적입니다. 아래에서는 다음과 같이 jqMobi를 사용하여 액션 시트를 구현합니다.
먼저 위 버튼을 마우스 오른쪽 버튼으로 클릭하고 요소 검사를 선택합니다(저는 Chrome 브라우저를 사용하고 있으며 먼저 F12를 누릅니다)


1 | <a class = "button" onclick= "showCustomHtmlSheet()" >Show Custom Html Sheet</a>
|
로그인 후 복사
그런 다음 Ctrl + F를 눌러 showCustomHtmlSheet() 메서드를 찾습니다.
코드는 다음과 같이 게시됩니다.

1 2 3 | function showCustomHtmlSheet() {
$( "#afui" ).actionsheet('<a >Back</a><a onclick= "alert(\'hi\');" >Show Alert 3</a><a onclick= "alert(\'goodbye\');" >Show Alert 4</a>');
}
|
로그인 후 복사
위 그림의 마지막 취소 버튼은 시스템 기본 취소 버튼입니다.
Ctrl + F를 눌러 플러그인을 찾으시면 다음 줄을 보실 수 있습니다
1 | <link rel= "stylesheet" type= "text/css" href= "plugins/css/af.actionsheet.css" >
|
로그인 후 복사
자, 우리 프로젝트에서 위의 효과를 달성해 보겠습니다.
먼저 af.actionsheet.css 파일을 소개합니다
위의 코드를 콘텐츠

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <meta charset= "utf-8" >
<title>jqMobi</title>
<link href= "css/af.ui.css" rel= "stylesheet" type= "text/css" >
<link href= "css/icons.css" rel= "stylesheet" type= "text/css" >
<link rel= "stylesheet" type= "text/css" href= "plugins/css/af.actionsheet.css" >
<script src= "appframework.js" type= "text/javascript" ></script>
<script src= "ui/appframework.ui.js" type= "text/javascript" ></script>
<p id= "afui" >
</p><p id= "header" >
<!-- any additional HTML you want can go here -->
<a onclick= "$.ui.toggleSideMenu();" class = "button" >Toggle Side Menu</a>
</p>
<p id= "content" >
<!-- this is where your panels will go -->
</p><p id= "main" title= "Welcome" class = "panel" selected= "true" >
<a class = "button" onclick= "showCustomHtmlSheet()" >Show Custom Html Sheet</a>
</p>
<p id= "about" title= "About" class = "panel" data-nav= "second_nav" >
<!-- by setting data-nav the "second_nav" will be shown on this panel -->
</p>
<p></p>
<p id= "navbar" >
<a target= "#welcome" class = "icon home" >Home</a>
</p>
<p></p>
<script>
function showCustomHtmlSheet() {
$( "#afui" ).actionsheet('<a >Back</a><a onclick= "alert(\'hi\');" >Show Alert 3</a><a onclick= "alert(\'goodbye\');" >Show Alert 4</a>');
}
</script>
|
로그인 후 복사
에 입력하면 실행 결과는 다음과 같습니다.
위 내용은 Xiaoqiang의 HTML5 모바일 개발 로드(38) - jqMobi 플러그인 ActionSheet 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요! 