当前博客:[WebUI系列]13.图标列表的实现

211 次浏览

博客作者:【汨酴】

个性签名:增强知识,努力学习

1.几天未更新了,确实是最近事务繁多.

2.接着上一节,我们今天先看效果,除了页面,两种消息提示都是火山端实现的

3.知其然,还需知其所以然,接下来我们就看怎么实现.我觉得WebUI的精髓就是html写漂亮的界面,逻辑由火山实现,相辅相成,相得益彰.顺便说说html界面的好处,你不用纠结P图,制造图标,交互效果友好.

  a.界面是一个软件的门面:不要被下面的内容吓到,这些几乎都是layui页面元素,稍微看下官网即会

//页面
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.8/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .layui-elip {
            cursor: pointer;
        }

        .layuimini-qiuck-module {
            text-align: center;
            margin-top: 10px
        }

        .layuimini-qiuck-module:hover {
            cursor: pointer;
            background-color: #eee;
            border-radius: 5px;
        }

        .layuimini-qiuck-module a i {
            display: inline-block;
            width: 100%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 45px;
        }

        .layuimini-qiuck-module a cite {
            position: relative;
            top: 2px;
            display: block;
            color: rgb(78, 76, 76);
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-size: 14px;
        }

        .layui-col-xs3>span:nth-child(1) {
            font-weight: 24px;
            color: #1aa094;
        }

        .layui-panel {
            padding: 10px;
        }

        .panel {
            width: 100%;
            background-color: #2F3F53;
            color: #eee;
            border: 1px solid transparent;
            border-radius: 5px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
            text-align: center;
            padding: 15px 0px;
        }

        .panel:hover {
            cursor: pointer;
            color: hotpink;
        }
    </style>
</head>

<body>
    <div class="layuimini-container">
        <div class="layuimini-main">
            <div class="layui-row layui-col-space15">
                <!-- 外观一 -->
                <div class="layui-col-md12">
                    <div class="layui-panel">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-xs3">
                                <div id="record" class="panel">
                                    <h2>利快云</h2>
                                    <small>Admission record</small>
                                </div>
                            </div>
                            <div class="layui-col-xs3">
                                <div id="course" class="panel">
                                    <h2>WebUI系列</h2>
                                    <small>Course records</small>
                                </div>
                            </div>
                            <div class="layui-col-xs3">
                                <div id="approval" class="panel">
                                    <h2>博客讲解</h2>
                                    <small>Operation approval</small>
                                </div>
                            </div>
                            <div class="layui-col-xs3">
                                <div id="ecg" class="panel">
                                    <h2>汨涂改造</h2>
                                    <small>ECG report</small>
                                </div>
                            </div>
                            <div class="layui-col-xs3">
                                <div id="image" class="panel">
                                    <h2>持续更新</h2>
                                    <small>Imaging examination</small>
                                </div>
                            </div>
                            <div class="layui-col-xs3">
                                <div id="lis" class="panel">
                                    <h2>倾情奉献</h2>
                                    <small>Clinical examination</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 外观二 -->
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header"><i class="layui-icon layui-icon-app" style="color: #5FB878;"></i>
                            快捷入口
                        </div>
                        <div class="layui-card-body">
                            <div class="welcome-module">
                                <div class="layui-row layui-col-space10 layuimini-qiuck">
                                    <div onclick="access('客服助手')" class="layui-col-xs3 layuimini-qiuck-module"
                                        title="rapid">
                                        <a>
                                            <i class="layui-icon layui-icon-service" style="color: #01AAED;"></i>
                                            <cite>客服助手</cite>
                                        </a>
                                    </div>
                                    <div onclick="access('知识汇集')" class="layui-col-xs3 layuimini-qiuck-module"
                                        title="blood">
                                        <a>
                                            <i class="layui-icon layui-icon-water" style="color: red;"></i>
                                            <cite>知识汇集</cite>
                                        </a>
                                    </div>
                                    <div onclick="access('打印输出')" class="layui-col-xs3 layuimini-qiuck-module"
                                        title="fee">
                                        <a>
                                            <i class="layui-icon layui-icon-print" style="color: #009688;"></i>
                                            <cite>打印输出</cite>
                                        </a>
                                    </div>
                                    <div onclick="access('互联网')" class="layui-col-xs3 layuimini-qiuck-module"
                                        title="OA">
                                        <a>
                                            <i class="layui-icon layui-icon-website" style="color: #e00fb3;"></i>
                                            <cite>互联网</cite>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
Markup

b.提供用于交互的js:仔细查看,本次采用了两种交互方式--一种是页面内如:onclick="access('互联网')";一种是js内如:$(".panel").click(...)

<script src="../lib/layui-v2.6.8/layui.js" charset="utf-8"></script>
    <script>
        layui.use(['layer'], function () {
            var layer = layui.layer,
                $ = layui.jquery;

            $(".panel").click(function () {
                action($(this).children("h2").text());
            })
        });
    </script>
JavaScript

c.火山接收

本次我们绑定了两个函数,写法如下:

函数执行:

细心的你似乎发现了"layui信息框",对,这是我们自己封装的layer.msg()

就是这个效果,不要以为是在html实现的,如此知道混合开发的些许强大了吧

4.好了,本节到此结束.顺便说一句,貌似大家对Web开发热情不高,或许稍显麻烦,或许你还没体会到其中的便捷吧,期待下次再见.

Generic placeholder image
手可摘星辰 Time: 2021-10-18 10:42:34

不是不感兴趣;是没有基础啊老哥!!有没有办法让小白能快速学会

Generic placeholder image
汨酴 Time: 2021-10-18 14:31:28

html基础知识还是必备的,其次能逐步使用layui,再者能剖析基于layui的框架.跟着博客走,相信之后能恍然大悟,其实webui开发并不难.博客的内容在后续积累到一定程度后会发到源码区,到时对照再过一遍,应该就会了.


[WebUI系列]13.图标列表的实现