EasyUI를 통해 접이식 패널 효과를 빠르게 구축하는 방법

외부에서 EasyUI 플러그인을 소개한 후 div 태그에 easyui-accordion 클래스를 추가하여 접이식 패널 효과를 구현한 후

오늘 소개해드릴 내용은 jQuery easyui 플러그인을 통해 빠르게 생성하려면 패널을 접는 효과(아코디언 효과와 유사)를 생성합니다. 다음 기사에서는 이 효과를 얻는 방법을 자세히 소개하겠습니다

[추천 코스: #🎜 🎜 #jQuery easyui tutorial】

EasyUI

EasyUI는 jQuery, Angular., Vue 및 React는 현대적인 대화형 JavaScript 애플리케이션을 만드는 데 필요한 기능을 제공하는 사용자 인터페이스 플러그인 모음이며, 많은 코드를 작성하지 않고도 사용자 인터페이스를 정의할 수 있습니다. 간단하지만 매우 강력합니다. 또한 HTML5 웹 페이지의 전체 프레임워크를 지원하여 웹 개발에 많은 시간을 절약합니다. #(1) EasyUI 플러그인 다운로드

다운로드 주소: http ://www.jeasyui.net/download/jquery.html

# 🎜🎜#

(2) EasyUI 플러그인 파일을 외부적으로 소개

<link rel="stylesheet" type="text/css" href="./jquery-easyui-1.7.0/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./jquery-easyui-1.7.0/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script  type="text/javascript" src="./jquery-easyui-1.7.0/jquery.easyui.min.js"></script>

(3) 프로그램 작성

# 🎜🎜#태그를 통해 접이식 패널(아코디언)을 만들고 <에 'easyui-accordion' 클래스를 추가합니다. ;div> 효과를 추가하는 태그, 여기서 iconCls="icon-ok"는 작은 아이콘을 추가하는 것입니다

<div class="easyui-accordion" style="width:450px;height: 300px;">	
  <div title="面板1" iconCls="icon-ok"style="overflow:auto;padding:10px;">
              <h3 style="color:#0099FF;">PHP中文网</h3>
        <p>php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!
        可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台</p>
  </div>
  <div title="面板2" iconCls="icon-search" >
              <h3 style="color:#0099FF;">PHP中文网</h3>
        <p>php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!
        可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台</p>
  </div>
  <div title="面板3" iconCls="icon-reload" >
              <h3 style="color:#0099FF;">PHP中文网</h3>
        <p>php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!
        可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台</p>
  </div>
</div>

#🎜🎜 #Rendering:

#🎜 🎜# 위의 예에서 볼 수 있듯이 EasyUI 플러그인이 도입된 후에는 접이식 패널을 구현하기 위해 많은 코드를 작성할 필요가 없으며, 그 효과는 기본 HTML 마크업 언어만 작성하면 된다는 것입니다. 그러면 코드가 훨씬 간단해집니다 요약: 위 내용은 이 기사의 전체 내용입니다. 이 기사가 모든 사람에게 도움이 되기를 바랍니다. jQuery easyui 플러그인에 대해 어느 정도 이해하고 있습니다

위 내용은 EasyUI를 통해 접이식 패널 효과를 빠르게 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!