MUI框架里的mui-input-row里的label改为button

最新推荐文章于 2024-05-13 13:38:23 发布

杨一隅

最新推荐文章于 2024-05-13 13:38:23 发布

阅读量7.1k

点赞数 2

分类专栏：实习

本文链接： https://blog.csdn.net/weixin_42235809/article/details/81090497

版权

实习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一周的日子基本就是个小透明啦，前两天一直在看mui框架。前端的框架真的很多，一时也记不住那么多样式。典型的就是记住了这个结构

mui框架挺好上手的，用于移动端App，样式也很好看，能够快速的构建出UI界面。Hbuilder编辑器编写也很快。

公司的小姐姐这两天就让我们p了几个图，其中一个input和button问题，想跟大家分享一下。

mui框架自带的例子中，一般都是label在前，input在后写死了。如果想要在input输入框后面插入一个查询按钮，通常大家写完会是下面这个样子：

这时候就需要我们自己写style样式，覆盖mui.min.css里的样式即可，在<head>标签里加入如下：

这时候input输入框和按钮处于同一行，如下所示：

这时候还没结束，这是带清除按钮的输入框，当自己输入文字时，意外发现清除按钮并没有跟随着输入框的位置改变，出现以下错位：

所以我们要为清除按钮也添加相应的样式：

ok，大功告成！

晚安

杨一隅

关注关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
MUI框架里的mui-input-row里的label改为button

第一周的日子基本就是个小透明啦，前两天一直在看mui框架。前端的框架真的很多，一时也记不住那么多样式。典型的就是记住了这个结构mui框架挺好上手的，用于移动端App，样式也很好看，能够快速的构建出UI界面。Hbuilder编辑器编写也很快。公司的小姐姐这两天就让我们p了几个图，其中一个input和button问题，想跟大家分享一下。mui框架自带的例子中，一般都是label...
复制链接

扫一扫

专栏目录

移动全屏代码

09-18

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>分享</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" href="css/jquery.fullPage.css"> <link rel="stylesheet" href="css/mystyle.css"> <link rel="stylesheet" href="css/mui.min.css"> <link rel="stylesheet" href="css/app.css"> <style> .section1 { background: url(image/bjt.jpg) 50%; height: 100%; width: 100%; background-position: center 0; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; -webkit-background-size: cover; /*兼容Webkit内核浏览器如Chrome和Safari */ -o-background-size: cover; /*兼容Opera */ zoom: 1; } .section2 { } </style>  <script src="js/mui.min.js"></script>  <script> $(function() { $('#dowebok').fullpage(); }); </script> </head> <body> <div id="dowebok"> <div class="section section1"></div> <div class="section section2" style="background: ;"> <div class="mui-content"> <div class="mui-content-padded" style="margin: 5px;"> <h5>填写收货地址：</h5> <form class="mui-input-group"> <div class="mui-input-row"> <label>姓名</label> <input type="text" placeholder="填写姓名"> </div> <div class="mui-input-row"> <label>电话</label> <input type="text" class="mui-input-clear" placeholder="填写电话"> </div> <div class="mui-input-row"> <label>收货地址</label> <input type="text" class="mui-input-speech mui-input-clear" placeholder="详细地址"> </div>  <ul class="mui-table-view"> <li class="mui-table-view-cell mui-radio mui-left"> <input name="radio" type="radio" class="mui-radio">Item 5 </li> <li class="mui-table-view-cell mui-radio mui-left"> <input name="radio" type="radio">Item 6 </li> </ul>  <div class="mui-button-row"> <button type="button" class="mui-btn mui-btn-primary" onclick="return false;">确认</button> <button type="button" class="mui-btn mui-btn-danger" onclick="return false;">取消</button> </div> </form> </div> </div> </div> </div> </body> <script> mui.init({ swipeBack:true //启用右滑关闭功能 }); //语音识别完成事件 document.getElementById("search").addEventListener('recognized', function(e) { console.log(e.detail.value); }); </script> <script type="text/javascript"> $(document).ready(function() { $("#background-image").fullscreenBackground(); }); </script>  <script> mui.init({ swipeBack:true //启用右滑关闭功能 }); //圆角列表开关处理 document.getElementById("M_Toggle").addEventListener('toggle',function (e) { var isActive = e.detail.isActive; var table = document.querySelector('.mui-table-view'); var card = document.querySelector('.mui-card'); if (isActive) { card.appendChild(table); card.style.display = ''; } else { var content = document.querySelector('.mui-content'); content.insertBefore(table, card); card.style.display = 'none'; } }); </script> </html>