• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式：
    1:搜索微信号（888888）
    2:扫描左侧二维码
  • 登录 立即注册
    • 切换风格
    快捷导航
    福建二哥 › 门户 › 查看主题

    AmazeUI折叠式卡片布局，整合内容列表、表格组件实现

    发布者: 山止川行 | 发布时间: 2025-6-16 12:33| 查看数: 78| 评论数: 0|帖子模式

    折叠式卡片布局在PC版网站中可能不常见，但是在手机版，小屏幕的网页浏览会大发异彩。
    AmazeUI也提供了折叠式卡片布局，虽然官网上有例子，但是这种折叠式卡片布局，整合内容列表、表格组件还是需要一番功夫。
    比如如下图，利用AmazeUI的折叠式卡片布局，整合其提供的内容列表与表格组件。

    整个页面的代码如下：
    1. <!--使用HTML5开发-->
    2. <!doctype html>
    3. <html class="no-js">
    4. <html>
    5.     <head>
    6.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    7.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
    8.         <!--自动适应移动屏幕-->
    9.         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    10.         <!--优先使用webkit内核渲染-->
    11.         <meta name="renderer" content="webkit">
    12.         <!--不要被百度转码-->
    13.         <meta http-equiv="Cache-Control" content="no-siteapp"/>
    14.         <!--以下才是引入amazeui资源-->
    15.         <link rel="stylesheet" href="assets/css/amazeui.min.css">
    16.         <link rel="stylesheet" href="assets/css/app.css">
    17.         <!--引入js的时候要注意，必须先引入jQuery，再引入amazeui，因为这个框架是基于jQuery开发的-->
    18.         <script src="assets/js/jquery.min.js"></script>
    19.         <script src="assets/js/amazeui.min.js"></script>
    20.         <title>折叠式布局下的内容列表、表格</title>
    21.     </head>
    22.     <body>
    23.         <h1>折叠式卡片布局</h1>
    24.         <div data-am-widget="accordion" class="am-accordion am-accordion-gapped">
    25.             <!--这里是表示标题的背景颜色是灰色-->
    26.             <dl class="am-accordion-item am-active">
    27.                 <dt class="am-accordion-title">卡片1-文字</dt>
    28.                 <!--这里表示这个面板默认是打开状态-->
    29.                 <dd class="am-accordion-bd am-collapse am-in">
    30.                     <div class="am-accordion-content">
    31.                     <!--内容在这里写-->
    32.                     纯属文字
    33.                     </div>
    34.                 </dd>
    35.             </dl>
    36.             <dl class="am-accordion-item">
    37.                 <dt class="am-accordion-title">卡片2-内容列表</dt>
    38.                 <dd class="am-accordion-bd am-collapse">
    39.                     <!--如果这个折叠式布局里面用到的不是纯属的文件，必须加上一个margin-bottom:-20px削去底部的空白-->
    40.                     <!--用到内容列表的话，无须加class="am-accordion-content"属性-->
    41.                     <div style="margin-bottom:-20px">
    42.                         <div class="am-list-news-bd">
    43.                         <ul class="am-list">
    44.                             <li class=" am-list-item-dated">
    45.                                 <a href="##" class="am-list-item-hd">标题1</a>
    46.                                 <span class="am-list-date">2015-05-12</span>
    47.                             </li>
    48.                             <li class=" am-list-item-dated">
    49.                                 <a href="##" class="am-list-item-hd">超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长标题2</a>
    50.                                 <span class="am-list-date">2015-05-12</span>
    51.                             </li>
    52.                             <li class=" am-list-item-dated">
    53.                                 <a href="##" class="am-list-item-hd">标题3</a>
    54.                                 <span class="am-list-date">2015-05-12</span>
    55.                             </li>   
    56.                         </ul>
    57.                         </div>
    58.                     </div>
    59.                 </dd>
    60.             </dl>
    61.             <dl class="am-accordion-item">
    62.                 <dt class="am-accordion-title">卡片3-表格</dt>
    63.                 <dd class="am-accordion-bd am-collapse ">
    64.                     <!--am-table-bordered代表表格列与列之间有线划分，am-table-striped代表表格灰白相间-->
    65.                     <div class="am-accordion-content" style="margin-bottom:-20px">
    66.                         <table class="am-table am-table-radius am-table-striped">
    67.                             <thead>
    68.                                 <tr>
    69.                                     <!--这里与HTML一样，必须设置好每一行的表格宽度-->
    70.                                     <th width="33%">表头1</th>
    71.                                     <th width="33%">表头2</th>
    72.                                     <th>表头3</th>
    73.                                 </tr>
    74.                              </thead>
    75.                              <tbody>
    76.                                 <tr>
    77.                                     <td>内容1</td>
    78.                                     <td>超长超长超长内容2</td>
    79.                                     <td>内容3</td>
    80.                                 </tr>
    81.                                 <tr>
    82.                                     <td>内容1</td>
    83.                                     <td>超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长内容2</td>
    84.                                     <td>内容3</td>
    85.                                 </tr>
    86.                                 <tr>
    87.                                     <td>内容1</td>
    88.                                     <td>超长超长超长内容2</td>
    89.                                     <td>内容3</td>
    90.                                 </tr>
    91.                             </tbody>
    92.                         </table>
    93.                     </div>
    94.                 </dd>
    95.             </dl>
    96.         </div>
    97.     </body>
    98. </html>
    复制代码
    关键的地方，注释都有注释了。也提供了超长内容的处理方式。
    dl-dt-dd是HTML中原生态的列表布局，与ul-li这一组是一样地位，但是用得少，可能给人淡忘了。
    如果AmazeUI的折叠式卡片布局里面要整合组件，必须移除底部那20px的留白，否则很难看的。感觉这个组件专门为文字设置的，框架的原义不希望你整合东西。
    同时表格注意设置好第一行的各个宽度，以规定好各行。
    到此这篇关于AmazeUI折叠式卡片布局，整合内容列表、表格组件实现的文章就介绍到这了,更多相关AmazeUI折叠式卡片布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

    来源：https://www.jb51.net/html5/741610.html
    免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×

    最新评论

    新人须知

    常见问题

    维权申诉

    关注微博

    扫描微信

    关于合作

    通讯联系

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表