Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Schritte zur Bedienung des jQuery EasyUI-Faltpanels im Akkordeon

Detaillierte Schritte zur Bedienung des jQuery EasyUI-Faltpanels im Akkordeon

php中世界最好的语言
php中世界最好的语言Original
2018-04-19 14:03:342254Durchsuche

Dieses Mal werde ich Ihnen die detaillierten Schritte von jQuery EasyUI zur Bedienung des Faltpanels vorstellen. Was sind die Vorsichtsmaßnahmen für die Bedienung des Faltpanels von jQuery? , lasst uns gemeinsam einen Blick darauf werfen.

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

fest 2. Fügen Sie mehrere p im Bereich hinzu, jedes p ist ein Panel (jedes Panel muss das Titel--Attribut festlegen).

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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie hier Weitere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung der jquery.picsign-Komponente

Detaillierte Erläuterung der Schritte zum Hinzufügen Zuweisungen zu untergeordneten Elementen mit jQuery

Das obige ist der detaillierte Inhalt vonDetaillierte Schritte zur Bedienung des jQuery EasyUI-Faltpanels im Akkordeon. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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