变脸式应用 - 常用组件

最新推荐文章于 2025-01-13 14:07:59 发布

原创最新推荐文章于 2025-01-13 14:07:59 发布 · 476 阅读

0 ·

CC 4.0 BY-SA版权

筋斗云专栏收录该内容

35 篇文章

订阅专栏

常用组件

筋斗云框架有一些使用mui前缀的CSS类，包括：

mui-container H5应用容器，一般在HTML的body对象上设置。
mui-page 逻辑页，由框架自动设置
mui-btn 按钮，如果再叠加primary类，则表示显示为缺省按钮。
mui-dialog 对话框
mui-menu 菜单
mui-navbar 导航栏

注意：筋斗云框架不是UI组件库，它只提供极为有限的一些组件，更丰富的UI组件请使用weui库或其它第三方组件库。

如果想调整框架中组件的显示样式，一般在app.css文件中设置。

导航栏及图标

[任务]

为H5应用底部导航栏上每项加上图标，且点中与未点中显示的图标不一样。
将小图标拼合成大图优化图标资源加载。

导航栏用CSS类”mui-navbar”标识。

导航栏

这是订单列表页中的例子，用导航栏和几个列表构建一个多栏页面，
当点击一项时，框架会自动为该项添加CSS类”active”，并只显示”mui-linkto”属性指向的组件。
被指向的组件仅限于当前逻辑页面：

    <div class="mui-navbar">
        <a mui-linkto="#lst1">待服务</a>
        <a mui-linkto="#lst2">已完成</a>
    </div>

整个H5应用有一个底部导航，用id=”footer”标识，放置在H5应用的主html文件中，如：

<div id="footer">
    <a href="#home" mui-opt="ani:'none'">
        <span>首页</span>
    </a>
    <a href="#orders" mui-opt="ani:'none'">
        <span>订单</span>
    </a>
    <a href="#me" mui-opt="ani:'none'">
        <span>我</span>
    </a>
</div>

底部导航可自动显示或隐藏，如果当前页面是在导航项中的，导航栏就会自动显示。
上面mui-opt属性用来指定显示页面的参数（参考MUI.showPage的参数），”ani:’none’”表示不显示动画切页效果。

如果要给导航中的每项加图片，可以用CSS类icon:

<a href="#home" mui-opt="ani:'none'">
    <i class="icon icon-home"></i>
    <span>首页</span>
</a>

定义一个CSS类icon-home为它指定图标即可。
由于点击一项时会自动给该项加上active类，所以要想控制当前选中项或未选中项显示不同的图片，可以设置：

.icon-home {
    background-image: url(icon/24/home.png);
}
.active .icon-home {
    background-image: url(icon/24/home-active.png);
}

这些图标一般建议放在server/icon目录下，并最终在发布时优化拼合成一张大图，称为制作“精灵图”（sprite）。

对图标的CSS设置一般写在icon.css中，然后使用jdcloud-sprite工具生成拼合后的大图以及icon.out.css在H5应用中使用。
查看index.html可知它实际引用的是优化后的icon.out.css文件，icon.css只是作为源文件，用于生成icon.out.css。

在开发时，建议先把图标的CSS定义分别在icon.css与icon.out.css中各写一份。
待准备做优化时，只需在一台可制作精灵图的电脑上一次性生成icon.out.css比较方便。

图标优化方法（制作精灵图）

先安装imagemagick软件，确认在命令行中可以运行convert等命令。
安装好php 5.4或更高版本，然后在项目的tool目录下，运行命令：

php jdcloud-sprite.php ../server/icon.css -2x -group -sprite icon/icon@2x.png

查看server/icon.out.css文件是否已更新？在server/icon目录下是否生成了拼合后的大图？

命令中参数-2x表示源图标都是2x图标，即显示为24x24大小的图标，其实际尺寸是48x48。
在手机上一般使用2x图标，否则会看出有些模糊。
参数-group表示按图标宽度分组拼合图片，这样效率更高些，也可以去掉这个参数。

其实在文件tool/Makefile中已经包含了这个命令，确保开发环境有make工具，
就可以在git-bash中直接运行下面命令来优化图标：

./make-sprite.sh