Heim > Web-Frontend > js-Tutorial > Hauptteil

So verwenden Sie Akkordeon in EasyUI

亚连
Freigeben: 2018-06-15 17:19:57
Original
2062 Leute haben es durchsucht

Jetzt werde ich Ihnen ein Anwendungsbeispiel für das jQuery EasyUI-Faltpanel-Akkordeon vorstellen. Es hat einen guten Referenzwert und ich hoffe, es wird für alle hilfreich sein.

1. Legen Sie class="easyui-accordion" für den Faltbereich p fest

2. Fügen Sie dem Bereich mehrere p hinzu, jedes p ist ein Bereich (jeder Bereich muss mit a festgelegt werden Titeleigentum).

3. Setzen Sie das Panel-Attribut fit auf true und passen Sie die Größe des übergeordneten Containers an

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>easyui-折叠面板accordion的使用</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">
    <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../css/default.css">
    <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></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;">面板一</p>
        <p data-options="title:&#39;系统菜单&#39;">面板二</p>
      </p>
    </p>
    <p data-options="region:&#39;center&#39;,title:&#39;中部区域&#39;"></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>
Nach dem Login kopieren

Das oben Gesagte habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird .

Verwandte Artikel:

So implementieren Sie das Dialogfeld zum zeitgesteuerten Ausblenden in jQuery

So implementieren Sie die DIV-Verzögerungszeit in JS/jQuery Disappear oder nach Sekunden anzeigen

Verwenden Sie native js, um eine dreistufige Verknüpfung von Provinzen und Gemeinden zu realisieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Akkordeon in EasyUI. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!