关注
分享
草巾冒小子
分享[前端技术主页] http://www.lzindex.com/
展开
-
mui栅格布局的两种方式（grid和list，宫格和列表）
文章目录mui栅格布局的两种方式（grid和list，宫格和列表）效果截图示下：代码示下：mui栅格布局的两种方式（grid和list，宫格和列表）效果截图示下：代码示下：<!DOCTYPE html><html><head><meta charset="utf-8"><title>Hello MUI</title><meta name="viewport" content="width=device原创 2021-10-31 22:48:45 · 1238 阅读 · 0 评论 -
MUI侧滑导航：页面组件（本地插件化）
MUI侧滑导航：页面组件（本地插件化）针对MUI框架须知：MUI框架内不支持<a>标签的点击跳转，所以需要修改部分代码，如下述代码中的代码块：// 实现MUI框架内的超链接点击跳转mui('body').on('tap','a',function(){document.location.href=this.href;});参考下图所示的动画演示效果图：插件源码：<!DOCTYPE html><html> <head>原创 2021-10-31 22:44:12 · 503 阅读 · 0 评论 -
vue全局变量的 定义与任意调用
vue全局变量的 定义与任意调用在main.js文件中定义全局变量的代码，举例示下：原创 2020-11-18 00:43:31 · 511 阅读 · 0 评论 -
mui案例：导航栏 颜色渐变
代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-原创 2020-07-02 12:11:45 · 884 阅读 · 0 评论 -
导航栏-滚动渐变 - 封装版
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobi原创 2020-07-02 12:07:12 · 586 阅读 · 0 评论 -
mui拓展：flex布局：如何设置x轴横向隐藏，而又往左排列优先
flex布局：如何设置x轴横向隐藏<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=...原创 2020-05-31 22:27:17 · 2944 阅读 · 0 评论 -
mui 图片预览（自定义）功能 - 案例篇
mui 图片预览（自定义）功能 - 案例篇实现目标：点击图片，弹出层遮盖，并放大显示刚才点击的图片；图片对应的标题，也一并显示。效果截图：重要提示Tips：使用前，务必设置图片的alt属性与<p class="horname">重要新闻01</p>的名称一样，即可。也可自行二次开发修改。重要代码 · html如下： <!--重要新闻--> <div id="item_ygry" class="hzjt-container2 m原创 2020-05-31 22:15:57 · 1397 阅读 · 0 评论 -
mui 组件：“div下拉导航”【scroll固定位置】- 案例篇
（含代码、效果图）侧滑导航：“div下拉导航”截图如下：重要代码 · 如下：//下拉菜单定位：动态锁定window.onscroll = function(){ let scrollHeight = document.documentElement.scrollTop; // 滚动条的滚动行程 console.log(scrollHeight); document.getEl...原创 2020-05-12 22:43:26 · 1579 阅读 · 0 评论 -
mui框架mui-active高亮当前栏目 - 代码说明
mui框架mui-active高亮当前栏目 - 代码说明使用mui框架开发，有没有遇到这种问题：首先，网站的公共导航中，有几个栏目在另一个页面中是tabs选项卡的不同选项，那么，如何通过点击导航中指定的栏目，并在进入下一个tabs页面之后，自动.mui-active当前栏目呢？上图中，点击“行业资讯” 进入下图所示页面，并高亮所选的栏目：下面，一起看一下，我是如何通过代码实现的...原创 2020-04-03 13:55:35 · 1645 阅读 · 0 评论 -
mui组件（a标签href）点击不跳转 - 解决篇
文章目录mui组件（a标签href）点击不跳转 - 解决篇mui相关组件 · 截图说明项目案例 · 截图示下：解决办法：1. 部分js代码（主要代码如下）mui组件（a标签href）点击不跳转 - 解决篇mui相关组件 · 截图说明mui组件：“div模式下拉菜单” （如下图 · 左）mui组件：“侧滑导航” （如下图 · 右）项目案例 · 截图示下：mui框架本...原创 2020-04-03 11:15:58 · 2537 阅读 · 0 评论 -
mui 实现<a>锚点定位 (demo演示)【建议：仅作为参考】
mui 实现<a>锚点定位（演示） - 【仅作为参考】更改了js部分的源码class类名，可对比官方代码，匹配学习。重要说明：代码仅适用于单页面，不支持与侧滑导航组件一起使用！效果 · 截图：代码示下：<!DOCTYPE html><html> <head> <meta charset="utf-8">...原创 2019-12-31 11:24:04 · 1554 阅读 · 1 评论 -
mui组件 a 锚点定位（Demo案例演示）- 代码篇
页面滚动后，选项卡固定在顶部，这时候点击选项卡内的任一个，都对自动定位并滚动到对应的位置，就像锚点定位一样。图文解说：页面尚未滚动（图1）页面滚动到恰当位置，tabtn区域 被定位固定在指定位置（图2）点击图2中的其他tabtn，页面滚动到指定的位置（图3）临时参考阅读：mui 锚点切换 绕开a标签MUI-scroll滚动，重新定位滚动位置MUI Scroll插...原创 2019-12-31 11:22:34 · 1337 阅读 · 0 评论 -
mui 框架：a标签无法跳转 - 解决篇
MUI框架导致a标签失效无法点击？mui框架之a标签无法跳转的问题？关于mui中ul列表需要点击多次生效的问题？https://www.cnblogs.com/mengfei001/p/6811475.htmlhttps://blog.csdn.net/wugezi/article/details/88368794...原创 2019-12-26 11:20:21 · 1174 阅读 · 0 评论 -
MUI（侧滑导航）组件使用 - 踩坑篇
https://blog.csdn.net/qq_34129814/article/details/79015150【推荐】https://www.cnblogs.com/crazycode2/p/9521818.html【不推荐】http://bbs.aircheng.com/read-40635【强烈推荐 · CSS】https://www.chromestatus.com/featu...原创 2019-12-19 11:14:19 · 1084 阅读 · 0 评论 -
MUI弹框组件：高阶用法 - 点击即可toggle
效果图截图如下：html代码如下：<!--抵用券--><ul class="mui-table-view bills-content"> <li class="mui-table-view-cell mui-media"> <div class="mui-media-body mui-row"> <div class...原创 2019-05-31 17:14:54 · 2695 阅读 · 1 评论 -
MUI组件：弹出层组件 - 案例篇
全部代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1...原创 2019-05-27 23:18:36 · 10941 阅读 · 0 评论 -
MUI 列表组件：文字居左中右（排版） - 代码篇
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...原创 2019-05-27 23:16:42 · 5145 阅读 · 0 评论 -
MUI 宫格组件（grid）怎么取消mui-active背景色？（优先级设置问题）- 踩坑篇
MUI 宫格组件（grid）怎么取消mui-active背景色？（优先级设置问题）对比 · 截图如下：踩坑总结 · 点击取消效果 · 举例：优先级: background > background-color对比如下：/*无效代码*/.mui-grid-view.mui-grid-9 .mui-table-view-cell.mui-active{backgroun...原创 2019-05-27 23:21:44 · 1501 阅读 · 0 评论 -
MUI框架：移动端底部固定mui-bar-tab布局 - 案例篇
移动端布局：自定义MUI底部tabs选项卡（nav组件 · 底部固定mui-bar-tab） · 案例演示效果图html代码实例 · 如下：<!doctype html><html> <head> <meta charset="UTF-8"> <title>自定义MUI底部tabs选项卡</title>...原创 2019-05-14 14:29:09 · 8541 阅读 · 0 评论 -
MUI框架：栅格系统 + grid宫格布局 - 案例篇
MUI框架 · 自定义宫格布局 · 应用案例：通过使用MUI框架的 栅格系统 + grid宫格布局 ，覆盖源码样式，以达到完美的页面效果。效果图：点击动画效果不再演示，具体效果参考源码效果！全部实例代码：<!doctype html><html> <head> <meta charset="UTF-8"> <...原创 2019-05-13 16:40:12 · 8602 阅读 · 1 评论 -
MUI框架 · 异步请求：mui.get()、mui.ajax()、mui.post() 技术罗列
MUI自己的一套异步请求的语法：mui.get()、mui.ajax()、mui.post() 技术罗列官网地址：ajax官方转载 · 如下：mui框架基于htm5plus的XMLHttpRequest，封装了常用的Ajax函数，支持GET、POST请求方式，支持返回json、xml、html、text、script数据类型；本着极简的设计原则，mui提供了mui.ajax方法，并...转载 2019-05-13 10:30:59 · 6306 阅读 · 0 评论 -
MUI 地址选择器 - picker使用
MUI 地址选择器 - picker使用 很多安卓原生的地址选择器中，选择器基本是实时滚动的。 就像腾讯QQ应用的地址选择器一样！效果截图如下：代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="vie...原创 2018-09-07 16:38:52 · 4046 阅读 · 1 评论 -
MUI 图片上传、预览、删除重选等等实现
MUI 图片上传、预览、删除重选等等实现 本地项目路径： C:\Users\Administrator\Desktop\超实用的javascript代码\10.5 - MUI 轮播\login\setting.html效果截图如下选择前：选择后：主要html代码：&amp;amp;lt;div id=&amp;quot;feedback&amp;quot; class=&amp;quot;mui-pa原创 2018-08-28 16:00:05 · 6228 阅读 · 8 评论 -
MUI 对话框设置
mui对话框设置 对话框有很多种，形式也多种多样，综合起来，其间也无太多差异，无非就是样式和调用的问题。官方效果： 自定义效果： 具体代码设置，请参考文件：内部在线报名系统，课程详情页html 代码如下： <a id="buyNow" class="btn2" href="#popover">立即购买</a> <...原创 2018-08-28 15:27:36 · 1502 阅读 · 0 评论 -
MUI 图标显示不出来 - 分析篇
MUI 内置小图标 无法正常显示，错显示为小矩形bug截图：原因及解决办法：mui.css/mui.min.css中关于字体文件.ttf引路路径设置有误，修改相对路径即可；.ttf文件有缺损，可能是获取该字体文件.ttf文件的过程中，造成.ttf文件缺损，重新下载该字体文件即可； 以上就是关于“ MUI 内置小图标 不显示 ” 的全部内容。...原创 2018-08-28 15:08:35 · 4670 阅读 · 2 评论 -
MUI 如何更改单选框样式
自定义修改 MUI 单选框的默认样式效果图，对比示下：以上图效果为例：修改前代码：[参考mui.min.css ]修改后代码如下：.mui-radio input[type=radio]:checked:before {content: '\e442';} 按照mui字体文件中的图标，css覆盖对应字体文件的代码，就可以了。 如果是自定义的小图片...原创 2018-08-28 15:00:09 · 4624 阅读 · 0 评论 -
MUI - 自动轮播图 实现
轮播图的设置，可手动，也可自动轮播。全凭代码一句话。截图示下：下面直接上代码，请参考。代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="wi原创 2018-08-28 14:50:22 · 13213 阅读 · 3 评论 -
MUI入门小白到大师 - 讲解
因项目的保密性，文章仅作为经验类总结，暂不配图和具体代码演示。望理解。MUI作为前端流行框架之一，其ui色系搭配，非常润眼，加之各种组件的交互效果，节省了很大一部分开发时间和精力，是前端开发webapp移动web端开发的不二首选。其次还有出色的快速搭建技术：结合Hbulider编辑器和热键启动，能快速搭建不一样的UI视觉框架，原生APP一样的交互式体验。使用起来，也是极其的方便。...原创 2018-08-28 14:38:38 · 1173 阅读 · 0 评论 -
js点击复制文本 - 案例篇
文章目录js点击复制文本 ：代码+效果图效果图 · 示下：html 代码如下：注意代码：附：[javascript监听键盘事件 - 如表单enter回车提交](https://blog.csdn.net/qq_35393869/article/details/79854995)js点击复制文本 ：代码+效果图效果图 · 示下：html 代码如下：<!doctype html>...原创 2019-09-30 11:51:49 · 1140 阅读 · 0 评论 -
MUI 上滑加载（没有更多数据）页面回弹 - 效果
CSDN产品公告：APP新增大厂在线刷题功能、博主排名规则更新、MD编辑器优化<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width...原创 2019-09-30 11:52:11 · 1361 阅读 · 0 评论