jQuery 모바일 패널

jQuery Mobile의 패널은 화면 왼쪽에서 오른쪽으로 스와이프합니다.

지정된 ID를 가진 <div> 요소에 data-role="panel" 속성을 추가하여 패널을 만듭니다.

패널 콘텐츠를 표시하려면 <div>에 HTML 태그를 추가하세요.

<div data-role="panel" id="myPanel">
  <h2>面板标题..</h2>
  <p>文本内容..</p>
</div>

참고: 패널 태그는 헤더, 콘텐츠, 하단으로 구성된 페이지 앞이나 뒤에 배치되어야 합니다.

패널에 액세스하려면 패널<div> ID에 대한 링크를 만들어야 합니다. 링크를 클릭하여 패널을 엽니다.

<a href="#myPanel" class="ui-btn ui-btn-inline">打开面板</a>

간단한 패널 인스턴스

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="panel" id="myPanel"> 
    <h2>面板头部</h2>
    <p>你可以通过点击面板外部区域或按下 Esc 键或滑动来关闭面板。</p>
  </div> 

  <div data-role="header">
    <h1>页面头部</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>点击下面按钮打开面板。</p>
    <a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">打开面板</a>
  </div>

  <div data-role="footer">
    <h1>页面底部</h1>
  </div> 
</div> 

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

패널 닫기

패널 외부를 클릭하거나 Esc 키를 누르거나 슬라이딩하여 패널을 닫을 수 있습니다. 데이터-* 속성을 사용하여 슬라이딩 및 클릭을 비활성화 할 수 있습니다 패널 패널 영역 외부를 클릭하여 닫을 수 있는지 여부.

사용해 보세요 data-swipe-close | false스와이프로 닫을 수 있는지 지정하세요. 사용해 보세요Instance온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요패널 표시다음을 사용하여 패널의 표시 모드를 제어할 수 있습니다. data-display 속성:

true

버튼을 사용하여 패널을 닫을 수 있습니다. 패널의 <div>에 data-rel="close" 속성을 추가하기만 하면 됩니다. 성능상의 이유로 페이지 ID를 가리키는 링크를 닫으려면 키의 href 속성이 필요합니다.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="panel" id="myPanel"> 
    <h2>面板头部</h2>
    <p>你可以使用按下 Esc 键、点击面板外部区域、通过滑动或点击下面按钮来关闭面板：</p>
    <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">关闭面板</a>
  </div> 

  <div data-role="header">
    <h1>页面头部</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>点击下面按钮打开面板。</p>
    <a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">打开面板</a>
  </div>

  <div data-role="footer">
    <h1>页面底部</h1>
  </div> 
</div> 

</body>
</html>

인스턴스 실행»

속성 값

Description

data-display="overlay"
콘텐츠에 패널 표시

data-display="push"

는 " 패널과 페이지를 동시에 밀어냅니다.

data-display="reveal"기본값, 페이지를 슬라이드처럼 화면 밖으로 밀어내고 패널을 표시합니다

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="panel" id="overlayPanel" data-display="overlay"> 
    <h2>覆盖面板</h2>
    <p>你可以使用按下 Esc 键、点击面板外部区域、通过滑动或点击下面按钮来关闭面板：</p>
    <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">关闭面板</a>
  </div> 
  <div data-role="panel" id="revealPanel" data-display="reveal"> 
    <h2>滑出面板</h2>
    <p>你可以使用按下 Esc 键、点击面板外部区域、通过滑动或点击下面按钮来关闭面板：</p>
    <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">关闭面板</a>
  </div> 
   <div data-role="panel" id="pushPanel" data-display="push"> 
    <h2>推动面板</h2>
    <p>你可以使用按下 Esc 键、点击面板外部区域、通过滑动或点击下面按钮来关闭面板：</p>
    <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">关闭面板</a>
  </div> 

  <div data-role="header">
    <h1>页面头部</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>点击以下按钮查看面板的不同展示方式。</p>
    <a href="#overlayPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">覆盖面板</a>
     <a href="#revealPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">滑出面板</a>
      <a href="#pushPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">推动面板</a>
  </div>

  <div data-role="footer">
    <h1>页面底部</h1>
  </div> 
</div> 

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

패널 위치 지정

기본적으로 패널은 왼쪽에 표시됩니다. 화면. 패널이 화면 오른쪽에 나타나도록 하려면 data-position="right" 속성을 지정하면 됩니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="panel" id="myPanel" data-position="right"> 
    <h2>面板头部</h2>
    <p>你可以使用按下 Esc 键、点击面板外部区域、通过滑动或点击下面按钮来关闭面板:</p>
    <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">关闭面板</a>
  </div> 

  <div data-role="header">
    <h1>页面头部</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>打开下面按钮显示面板</p>
    <a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">打开面板</a>
  </div>

  <div data-role="footer">
    <h1>页面底部</h1>
  </div> 
</div>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

페이지 스크롤에 따라 패널의 내용이 스크롤되도록 지정할 수 있습니다. 기본적으로 패널은 페이지와 함께 스크롤됩니다(그러나 패널의 내용은 페이지 상단에 유지됩니다). 패널 내용을 수정하고 페이지 스크롤 시 스크롤하지 않아야 하는 경우 패널에 data-position-fixed="true" 속성을 추가할 수 있습니다:

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="panel" id="myPanelDefault"> 
    <h2>面板头部</h2>
    <p>你可以使用按下 Esc 键、点击面板外部区域、通过滑动或点击下面按钮来关闭面板:</p>
    <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">关闭面板</a>
  </div> 

  <div data-role="panel" id="myPanelFixed" data-position-fixed="true"> 
    <h2>Panel Header</h2>
    <p>你可以使用按下 Esc 键、点击面板外部区域、通过滑动或点击下面按钮来关闭面板:</p>
    <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">关闭面板</a>
  </div> 

  <div data-role="header">
    <h1>页面头部</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>点击两个按钮并滚动查看效果。</p>
    <a href="#myPanelDefault" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">打开默认面板</a>
    <a href="#myPanelFixed" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">打开面板使用 data-position-fixed="true"</a>

    <p><b>提示:</b>要查看 data-position-fixed="true" 属性的效果，如果未出现滚动条可以重置窗口大小。</p>
  
    <p>用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。用于滚动的文本。。。。</p><br>
  </div>

  <div data-role="footer">
    <h1>页面底部</h1>
  </div> 
</div>  

</body>
</html>

Run Instance»

"인스턴스 실행" 버튼을 클릭하세요. 온라인 예시 보기

← jQuery 모바일 네비게이션 바

jQuery Mobile 축소 가능 블록 →

제출하다