MUI list(列表)

最新推荐文章于 2022-04-25 10:14:35 发布
最新推荐文章于 2022-04-25 10:14:35 发布
阅读量1.9k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40861561/article/details/105217272
版权

1.普通列表

列表是常用的UI控件，mui封装的列表组件比较简单，只需要在ul节点上添加.mui-table-view类、在li节点上添加.mui-table-view-cell类即可，如下为示例代码

<ul class="mui-table-view">
    <li class="mui-table-view-cell">学习MUI</li>
    <li class="mui-table-view-cell">学习MUI</li>
    <li class="mui-table-view-cell">学习MUI</li>
</ul>

2.自定义列表高亮颜色

点击列表，对应列表项显示灰色高亮，若想自定义高亮颜色，只需要重写.mui-table-view-cell.mui-active即可，如下：

/*点击变蓝色高亮*/
.mui-table-view-cell.mui-active{
    background-color: #0062CC;
}

3.右侧添加导航箭头

若右侧需要增加导航箭头，变成导航链接，则只需在li节点下增加a子节点，并为该a节点增加.mui-navigate-right类即可，如下：

<ul class="mui-table-view">
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">学习MUI</a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">学习MUI</a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">学习MUI</a>
    </li>
</ul>

4.右侧添加数字角标等控件

mui支持将数字角标、按钮、开关等控件放在列表中；mui默认将数字角标放在列表右侧显示，代码如下：

<ul class="mui-table-view">
    <li class="mui-table-view-cell">学习MUI
        <span class="mui-badge mui-badge-primary">11</span>
    </li>
    <li class="mui-table-view-cell">学习MUI
        <span class="mui-badge mui-badge-success">22</span>
    </li>
    <li class="mui-table-view-cell">学习MUI
        <span class="mui-badge">33</span>
    </li>
</ul>

media list（图文列表）

图文列表继承自列表组件，主要添加了.mui-media、.mui-media-object、.mui-media-body、.mui-pull-left/right几个类，如下为示例代码

<ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media">
                 <a href="javascript:;">
        <img  class="mui-media-object mui-pull-left"  src="img/1.jpg"/> 
        <div class="mui-media-body">
            学习
            <p class="mui-ellipsis">学习MUI</p>
        </div>
        </a>
        </li>
        <li class="mui-table-view-cell mui-media">          
                 <a href="javascript:;">
        <img  class="mui-media-object mui-pull-right"  src="img/1.jpg"/>    
        <div class="mui-media-body">
            学习
            <p class="mui-ellipsis">学习MUI</p>
        </div>
        </a>
        </li>
        </ul>

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>MUI list(列表)</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
        <style>
            .mui-table-view-cell.mui-active{
                background-color: #0062CC;
        </style>
    </head>
    <body>
          <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">MUI list(列表)</h1>
    </header>
   
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">学习MUI</li>
            <li class="mui-table-view-cell">学习MUI</li>
            <li class="mui-table-view-cell">学习MUI</li>
        </ul>

        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">学习MUI</a></li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">学习MUI</a></li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">学习MUI</a></li>
        </ul>

            <ul class="mui-table-view">
            <li class="mui-table-view-cell">学习MUI
            <span class="mui-badge mui-badge-primary">
            11  
            </span>
            <li class="mui-table-view-cell">学习MUI
            <span class="mui-badge mui-badge-primary">
            22
            </span>
            <li class="mui-table-view-cell">学习MUI
            <span class="mui-badge mui-badge-primary">
            33  
            </span> 
        </ul>

        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media">
                 <a href="javascript:;">
        <img  class="mui-media-object mui-pull-left"  src="img/1.jpg"/> 
        <div class="mui-media-body">
            学习
            <p class="mui-ellipsis">学习MUI</p>
        </div>
        </a>
        </li>
        <li class="mui-table-view-cell mui-media">          
                 <a href="javascript:;">
        <img  class="mui-media-object mui-pull-right"  src="img/1.jpg"/>    
        <div class="mui-media-body">
            学习
            <p class="mui-ellipsis">学习MUI</p>
        </div>
        </a>
        </li>
        </ul>

        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init(); 
        </script>
    </body>

</html>
秋城落叶
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
MUI-LIST列表的基本使用
知他人之所知，晓他人之不晓。
11-05 3万+
列表是常用的UI控件，mui封装的列表组件比较简单，只需要在ul节点上添加.mui-table-view类、在li节点上添加.mui-table-view-cell类即可，如下为示例代码 class="mui-table-view"> class="mui-table-view-cell">Item 1 class="mui-table-view-cell">Item 2 cl
mui ---- 搜索列表自定义
11-03
1，直接添加引用indexed-list.js和indexed-list.css； 2，修改indexed-list.js的self.el.bar.offsetHeight - 40为 self.el.bar.offsetHeight - self.el.search.offsetHeight 此处的作用是防止你将搜索框去掉，导致的右侧导航不协调 3，修改group && group.length == 1为group 此处是因为你添加的热门等字符串长度大于1而不能触发定位函数 4，禁止self.bindSearchEvent(); 此处是由于我的页面不需要搜索，所以讲搜索的触发事件禁止 5，添加你要添加的模块同时在模块的外层div加上data-group="xxxx"你导航处的名字 特别注意此处在utf-8的编码下可以是汉字，但是建议不要采取汉字 最后上边说的这几个地方在我的demo中都已修改好，你可以下载直接使用。 特别说明：如果你的页面需要哪个搜索框，只用放开第四步禁止的代码就好，然后将输入框加入进来，依然可以执行！
MUI .mui-table-view-cell事件绑定
Lucy_csdn的博客
05-04 6276
    最近使用MUI进行开发，遇到了一些坑。这里分享处理方法，希望能帮小伙伴们解决遇到类似的问题。    需求：            1.点击立即使用跳转至优惠券对应的产品列表。            2.点击更多查看适用的产品名称。            这里我使用的是MUI封装好的控件：&lt;ul class="mui-table-view"&gt;&lt;li&gt;mui-table...
Mui-列表/table-view
weixin_44438307的博客
06-23 35
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1...
mui及索引列表indexedList,mui.picker.有索引列表具体教程
05-30
好用的mui索引列表插件，我的博客中有详细教程，博客地址： https://blog.csdn.net/lianzhang861/article/details/80505799
MUI 列表组件：文字居左中右（排版） - 代码篇
草巾冒小子的博客
05-27 5096
MUI 列表组件：文字居 - 代码篇 .mui-text-left类，控制list；列表的文字居中排布问题。 代码如下： <ul class="mui-table-view mui-table-view-radio font-pay mui-text-left" style="margin-top: 0;"> <li class="mui-table-view-cell p...
Mui列表单选mui-radio使用方法
WarGames_dc的博客
04-21 2579
Mui列表单选mui-radio使用方法
九.MUI - list（列表/图文列表）
梅某某
04-16 7543
1、普通列表 列表是常用的UI控件，mui封装的列表组件比较简单，只需要在ul节点上添加.mui-table-view类、在li节点上添加.mui-table-view-cell类即可，如下为示例代码 class="mui-table-view"> class="mui-table-view-cell">Item 1 class="mui-table-view-cel
HTML5+规范API-系统通讯录获取功能
记录和分享属于我的“IT”时光
04-25 1749
HTML5+规范API-系统通讯录获取功能
MUI-list（列表），普通列表、带箭头列表、带数字角标列表、带图文列表
LzzMandy的博客
12-17 5513
本文主要介绍list(列表)的几种展现形式：普通列表、带箭头列表、带数字角标列表、带图文列表 效果图如下： 1、普通列表：只需要在ul节点上添加.mui-table-view类、在li节点上添加.mui-table-view-cell类即可 2、带箭头列表：若右侧需要增加导航箭头，变成导航链接，则只需在li节点下增加a子节点，并为该a节点增加.mui-navigate-right类即可 ...
mui mui-table-view mui-table-view-cell 随笔
戮筱沫博客
08-05 6655
mui-table-view mui-table-view-cell  设置选中状态： var items = document.getElementById("items"); mui(".mui-table-view").on('tap', '.mui-table-view-cell', function(e) { var lastActiveItem = items.querySele...
MUI列表条目点击事件代码
03-04
本项目是MUI列表条目点击事件的示例代码，目的是让大家了解MUI的点击事件该怎么写。
mui github官方组件包
01-14
包中包括mui文档中所有的案例和文档中没有...mui-indexedList教程：https://blog.csdn.net/lianzhang861/article/details/80505799 mui侧滑菜单删除教程：https://blog.csdn.net/lianzhang861/article/details/86481699
react-todoList-Mui
04-01
在Netlify上部署的站点： Create React App入门该项目是通过引导的。可用脚本在项目目录中，可以运行：npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。...
UPS、蓄电池、空开、电缆配置计算方法.pptx
04-27
5G通信行业、网络优化、通信工程建设资料
node-v7.4.0.tar.xz
最新发布
04-27
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
Unity mesh减面工具 Mesh Simplify 1.12
04-27
Unity mesh减面工具 Mesh Simplify 1.12
基于Springboot+Vue酒店客房入住管理系统-毕业源码案例设计.zip
04-27
网络技术和计算机技术发展至今，已经拥有了深厚的理论基础，并在现实中进行了充分运用，尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代，所以对于信息的宣传和管理就很关键。系统化是必要的，设计网上系统不仅会节约人力和管理成本，还会安全保存庞大的数据量，对于信息的维护和检索也不需要花费很多时间，非常的便利。 网上系统是在MySQL中建立数据表保存信息，运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时，也能及时通过数据输入的有效性规则检测出错误数据，让数据的录入达到准确性的目的，进而提升数据的可靠性，让系统数据的错误率降至最低。 关键词：vue；MySQL；SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
JAVA扫雷游戏程序+源码
04-27
扫雷游戏是一款经典的计算机游戏，它的目标是在一个方格矩阵中找出所有隐藏的地雷。玩家需要通过点击方格来揭示其内容，如果方格中有地雷，则游戏结束；如果没有地雷，则会显示周围8个方格中地雷的数量。玩家需要根据这些信息来判断哪些方格是安全的，并继续点击其他方格。 在JAVA扫雷游戏程序中，我们使用了一个二维数组来表示游戏的方格矩阵。每个方格可以包含以下三种状态之一：未被揭示、有地雷或安全。我们还使用了一些辅助变量来跟踪游戏中的状态，例如已揭示的方格数量和剩余的地雷数量。 当玩家点击一个方格时，程序会检查该方格是否已经被揭示。如果是，则不做任何操作；否则，程序会揭示该方格的内容，并根据其是否包含地雷来更新游戏状态。如果方格中有地雷，则游戏结束；否则，程序会递归地揭示周围的方格，直到遇到已经揭示的方格为止。 为了提高游戏的可玩性，我们可以添加一些额外的功能，例如计时器、难度级别选择和自定义方格大小等。此外，我们还可以使用图形用户界面（GUI）来美化游戏界面，使其更加友好和易于操作。
mui-switch
12-07
mui-switch是一个基于MUI框架的开关组件，可以通过js控制开关状态。在HTML中，可以使用mui-switch类来创建开关。例如，下面的代码创建了一个默认的蓝色开关： ```html <div class="mui-switch mui-switch-blue"> <div class="mui-switch-handle"></div> </div> ``` 其中，mui-switch-blue类指定了开关的颜色为蓝色。开关的状态可以通过添加data-on和data-off属性来指定开和关的文本。例如： ```html <div class="mui-switch mui-switch-blue" data-on="开" data-off="关"> <div class="mui-switch-handle"></div> </div> ``` 在JavaScript中，可以使用以下代码来控制开关的状态： ```javascript var switchElem = document.querySelector('.mui-switch'); switchElem.classList.toggle('mui-active'); ``` 这将切换开关的状态。如果开关当前处于关闭状态，则打开它，反之亦然。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值