BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

AmazeUI折りたたみカードレイアウト、統合コンテンツリスト、テーブルコンポーネント実装

2022-01-11 10:21:43

折りたたみ式のカードレイアウトはPC版では一般的ではないかもしれませんが、モバイル版では小さな画面でのWebブラウジングが光ります。

その

AmazeUIでも、折りたたみ式のカードレイアウトを提供しています。公式サイトにも例がありますが、この折りたたみカードレイアウトは、コンテンツリストとテーブルコンポーネントを統合するための工夫が必要です。

例えば、以下の図では、AmazeUIの折りたたみ式カードレイアウトを使用して、AmazeUIが提供するコンテンツリストとテーブルコンポーネントを統合しています。

画像

ページ全体のコードは以下の通りです。 

<! -- Developing with HTML5 -->
<!doctype html>
<html class="no-js">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <! -- Auto-adapt to mobile screens -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <! -- Preferred rendering with webkit kernel -->
        <meta name="renderer" content="webkit">
        <! -- don't be transcoded by Baidu -- >
        <meta http-equiv="Cache-Control" content="no-siteapp"/>
        <! -- The following is what introduces the amazeui resource -- >
        <link rel="stylesheet" href="assets/css/amazeui.min.css">
        <link rel="stylesheet" href="assets/css/app.css">
        <! -- When introducing js, note that jQuery must be introduced first, then amazeui, because the framework is based on jQuery -- >
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/amazeui.min.js"></script>
        <title>Content list, table in collapsed layout</title>
    </head> 
    <body>
        <h1>Collapsed card layout</h1>
        <div data-am-widget="accordion" class="am-accordion am-accordion-gapped">
            <! -- here is to indicate that the background color of the title is gray -->
            <dl class="am-accordion-item am-active">
                <dt class="am-accordion-title">card1-text</dt>
                <! -- here indicates that this panel is open by default -- >
                <dd class="am-accordion-bd am-collapse am-in">
                    <div class="am-accordion-content">
                    <! --content is written here-->
                    Pure text
                    </div>
                </dd>
            </dl>
            <dl class="am-accordion-item">
                <dt class="am-accordion-title">Card 2-Content List</dt>
                <dd class="am-accordion-bd am-collapse">
                    <! -- If this collapse layout is used inside a file that is not pure, a margin-bottom:-20px must be added to trim off the bottom margin -- >
                    <! -- if the content list is used, no need to add class="am-accordion-content" attribute -->
                    <div style="margin-bottom:-20px">
                        <div class="am-list-news-bd">
                        <ul class="am-list">
                            <li class=" am-list-item-dated">
                                <a href="##" class="am-list-item-hd">title1</a>
                                <span class="am-list-date">2015-05-12</span>
                            </li>
                            <li class=" am-list-item-dated">
                                <a href="##" class="am-list-item-hd"> extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long extra-long title 2</a>
                                <span class="am-list-date">2015-05-12</span>
                            </li>
                            <li class=" am-list-item-dated">
                                <a href="##" class="am-list-item-hd">title3</a>
                                <span class="am-list-date">2015-05-12</span>
                            </li>   
                        </ul>
                        </div>
                    </div>
                </dd>
            </dl>
            <dl class="am-accordion-item">
                <dt class="am-accordion-title">Card 3-Form</dt>
                <dd class="am-accordion-bd am-collapse ">
                    <! --am-table-bordered for table with wired divisions between columns, am-table-striped for table grayed out -->
                    <div class="am-accordion-content" style="margin-bottom:-20px">
                        <table class="am-table am-table-radius am-table-striped">
                            <thead>
                                <tr>
                                    <! -- Here, as in HTML, you must set the width of the table for each row -- >
                                    <th width="33%">tablehead1</th>
                                    <th width="33%">Table Header 2</th>
                                    <th>Table Header 3</th>
                                </tr>
                             </thead>
                             <tbody>
                                <tr&g

Comments are annotated where critical. Handling of extra-long content is also provided. dl-dt-dd is the original list layout in HTML, and ul-li this group is the same status, but used less, may give people fade away. If AmazeUI's collapsed card layout has to integrate components inside, the 20px white space at the bottom must be removed, otherwise it's hard to see. It feels like the component is set up specifically for text, and the original meaning of the framework doesn't want you to integrate things. At the same time form attention to set the first line of each width to provide a good line. This article about AmazeUI folded card layout, integrated content list, table components to achieve the article is introduced to this, more related AmazeUI folded card layout content please search the home of the script of previous articles or continue to browse the following related articles, I hope you support the home of the script more in the future! 

{{コード

{{コード

{{コード

{{コード

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します