07HUI - 普通列表(hui-list)

简介: 07HUI - 普通列表(hui-list)

效果图

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>HUI 列表</title>
<link rel="stylesheet" type="text/css" href="../css/hui.css" />
</head>
<body>
<header class="hui-header">
    <div id="hui-back"></div>
    <h1>HUI - 列表</h1>
</header>
<div class="hui-wrap">
    <div class="hui-common-title" style="margin-top:15px;">
        <div class="hui-common-title-line"></div>
        <div class="hui-common-title-txt">普通文字列表</div>
        <div class="hui-common-title-line"></div>
    </div>
    <div class="hui-list" style="margin-top:22px;">
        <ul>
            <li>
                <a href="javascript:hui.toast('Hello Hcoder UI !');">
                    <div class="hui-list-text">普通文字列表</div>
                </a>
            </li>
            <li>
                <a href="javascript:hui.toast('Hello Hcoder UI !');">
                    <div class="hui-list-text">
                        <div class="hui-list-text-content">
                        文本很长并想保持右侧箭头的例子:HUI 更轻、更好的移动端UI框架!
                        </div>
                        <div class="hui-list-info">
                            查看 <span class="hui-icons hui-icons-right"></span>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <div class="hui-common-title" style="margin-top:28px;">
        <div class="hui-common-title-line"></div>
        <div class="hui-common-title-txt">带有图标的列表</div>
        <div class="hui-common-title-line"></div>
    </div>
    <div class="hui-list" style="margin-top:22px;">
        <a href="javascript:hui.toast('Hello Hcoder UI !');">
            <div class="hui-list-icons">
                <img src="../img/list/home.png" />
            </div>
            <div class="hui-list-text">
                主页
                <div class="hui-list-info">
                    查看 <span class="hui-icons hui-icons-right"></span>
                </div>
            </div>
        </a>
        <a href="javascript:hui.toast('Hello Hcoder UI !');">
            <div class="hui-list-icons">
                <img src="../img/list/sc.png" />
            </div>
            <div class="hui-list-text">
                收藏
            </div>
        </a>
    </div>
    <div class="hui-common-title" style="margin-top:28px;">
        <div class="hui-common-title-line"></div>
        <div class="hui-common-title-txt">组合列表</div>
        <div class="hui-common-title-line"></div>
    </div>
    <div class="hui-list" style="margin-top:22px;">
        <a href="javascript:hui.toast('Hello Hcoder UI !');" style="height:auto; height:80px; padding-bottom:8px;">
            <div class="hui-list-icons" style="width:110px; height:80px;">
                <img src="../img/list/home.png" style="width:66px; margin:0px; border-radius:50%;" />
            </div>
            <div class="hui-list-text" style="height:79px; line-height:79px;">
                Hcoder.net
                <div class="hui-list-info">
                    <span class="hui-icons hui-icons-right"></span>
                </div>
            </div>
        </a>
        <a href="javascript:hui.toast('Hello Hcoder UI !');">
            <div class="hui-list-text">
                账户余额 : 1000元 | 积分 : 2000
            </div>
        </a>
    </div>
</div>
<script src="../js/hui.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
目录
相关文章
|
1月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
7天前
|
索引 Python
List(列表)
List(列表)。
16 4
|
1月前
|
测试技术 开发者 Python
在 Python 中创建列表时,应该写 `[]` 还是 `list()`?
在 Python 中,创建列表有两种方法:使用方括号 `[]` 和调用 `list()` 函数。虽然两者都能创建空列表,但 `[]` 更简洁、高效。性能测试显示,`[]` 的创建速度比 `list()` 快约一倍。此外,`list()` 可以接受一个可迭代对象作为参数并将其转换为列表,而 `[]` 则需要逐一列举元素。综上,`[]` 适合创建空列表,`list()` 适合转换可迭代对象。
在 Python 中创建列表时,应该写 `[]` 还是 `list()`?
|
20天前
|
JavaScript 数据管理 虚拟化
ArkTS List组件基础:掌握列表渲染与动态数据管理
在HarmonyOS应用开发中,ArkTS的List组件是构建动态列表视图的核心。本文深入探讨了List组件的基础,包括数据展示、性能优化和用户交互,以及如何在实际开发中应用这些知识,提升开发效率和应用性能。通过定义数据源、渲染列表项和动态数据管理,结合虚拟化列表和条件渲染等技术,帮助开发者构建高效、响应式的用户界面。
155 2
|
30天前
|
NoSQL 关系型数据库 MySQL
Redis 列表(List)
10月更文挑战第16天
17 2
|
1月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
1月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
2月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
34 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
1月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
1月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)