EasyUI에서 ABS 사용에 대해 자세히 설명하세요.

亚连
풀어 주다: 2018-06-15 16:46:35
원래의
2116명이 탐색했습니다.

아래에서는 jQuery EasyUI 탭 패널 탭을 사용하는 예를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

1. 탭 패널 영역 p에 class="easyui-tabs"를 설정합니다.

2. 탭 패널 영역에 여러 p를 추가합니다. 각 p는 탭입니다(각 패널은 제목을 설정해야 함)

3, 패널 설정 true에 맞추고 상위 컨테이너의 크기에 맞게 조정합니다

4. 탭 닫기 가능을 true로 설정하고 닫기 버튼을 추가합니다

5. 하이퍼링크를 클릭한 후 새 탭을 추가합니다

Syntax: Page Object.easyui 플러그 -in (메서드 이름, 매개변수);

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>easyui-选项卡面板tabs的使用</title>
 <!-- 导入jquery核心类库 -->
 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
 <!-- 导入easyui类库 -->
 <link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="../css/default.css" rel="external nofollow" >
 <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
 <script type="text/javascript">
  //页面加载后执行
  $(function(){
  //对链接绑定点击事件
  $("#nwtxxb").click(function(){
   //添加一个新的选项卡
   $("#mytabs").tabs(&#39;add&#39;,{
   title:&#39;CSDN博客&#39;,
   content:&#39;学IT,你我他学习吧&#39;
   });
  });
  });
 </script>
 </head>
 <body class="easyui-layout">
 <p data-options="region:&#39;north&#39;,title:&#39;你我他学习吧-学习Java的好博客!&#39;" style="height:100px"></p>
 <p data-options="region:&#39;west&#39;,title:&#39;菜单导航&#39;" style="width:200px">
  <!--折叠面板-->
  <p class="easyui-accordion" data-options="fit:true">
  <p data-options="title:&#39;基础菜单&#39;">
   <a href="javascript:void(0)" rel="external nofollow" id="nwtxxb">你我他学习吧</a>
  </p>
  <p data-options="title:&#39;系统菜单&#39;">你我他学习吧</p>
  </p>
 </p>
 <p data-options="region:&#39;center&#39;,title:&#39;中部区域&#39;">
  <!--选项卡面板-->
  <p id="mytabs" class="easyui-tabs" data-options="fit:true">
  <p data-options="title:&#39;CSDN博客&#39;,closable:true">学Java后台编程,就来你我他学习吧!</p>
  <p data-options="title:&#39;博客园&#39;,closable:true">学前端开发,就来你我他学习吧!</p>
  </p>
 </p>
 <p data-options="region:&#39;east&#39;,title:&#39;东部区域&#39;" style="width:100px"></p>
 <p data-options="region:&#39;south&#39;,title:&#39;南部区域&#39;" style="height:100px"></p>
 </body>
</html>
로그인 후 복사

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되기를 바랍니다.

관련 기사:

vue2.0 구성 요소에서 값 전달 및 통신을 구현하는 방법

webpack 4.0.0-beta.0 버전의 새로운 기능(자세한 튜토리얼)

SpringMVC를 사용하여 vue cross 문제 해결 -도메인 요청

Vue 구성 요소 및 Route의 수명 주기(상세 튜토리얼)

Vue2.0에서 사용자 권한 제어 구현

vue.js를 통해 WeChat 결제 구현

위 내용은 EasyUI에서 ABS 사용에 대해 자세히 설명하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿