MUI 顶部选项卡-可左右拖动(div)

最新推荐文章于 2021-06-02 22:56:37 发布
最新推荐文章于 2021-06-02 22:56:37 发布
阅读量2.6w 收藏 2
点赞数 1
分类专栏： Hbuilder
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hunannanhu/article/details/50422005
版权
<!DOCTYPE html>
<html>
<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/mui.min.css">
<link rel="stylesheet" type="text/css" href="css/app.css" />
</head>
<body>
<style>
.mui-control-content {
background-color: white;
min-height: 215px;
}
.mui-control-content .mui-loading {
margin-top: 50px;
}
</style>
<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">顶部选项卡-可左右拖动(div)</h1>
</header>
<div class="mui-content">
<div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#item1mobile">
待办公文
</a>
<a class="mui-control-item" href="#item2mobile">
已办公文
</a>
<a class="mui-control-item" href="#item3mobile">
全部公文
</a>
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第一个选项卡子项-1
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-2
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-3
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-4
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-5
</li>
</ul>
</div>
</div>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<div id="scroll2" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-loading">
<div class="mui-spinner">
</div>
</div>
</div>
</div>


</div>
<div id="item3mobile" class="mui-slider-item mui-control-content">
<div id="scroll3" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-loading">
<div class="mui-spinner">
</div>
</div>
</div>
</div>
</div>
</div>

</div>

<!--为选项卡选择样式-->

<h5 class="mui-content-padded">Color</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-primary" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" checked value="primary">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-positive" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" value="positive">
</div>
<div class="mui-input-row mui-radio">
<label><span class="mui-bg-negative" style="display:block;width:25px;height:25px;"></span>
</label>
<input name="radio1" type="radio" value="negative">
</div>
</form>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script>
mui.init({
swipeBack: false
});
(function($) {
$('.mui-scroll-wrapper').scroll({
indicators: true //是否显示滚动条

});

<!--根据选择获取各个面板-->

var html2 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第二个选项卡子项-1</li><li class="mui-table-view-cell">第二个选项卡子项-2</li><li class="mui-table-view-cell">第二个选项卡子项-3</li><li class="mui-table-view-cell">第二个选项卡子项-4</li><li class="mui-table-view-cell">第二个选项卡子项-5</li></ul>';
var html3 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第三个选项卡子项-1</li><li class="mui-table-view-cell">第三个选项卡子项-2</li><li class="mui-table-view-cell">第三个选项卡子项-3</li><li class="mui-table-view-cell">第三个选项卡子项-4</li><li class="mui-table-view-cell">第三个选项卡子项-5</li></ul>';
var item2 = document.getElementById('item2mobile');
var item3 = document.getElementById('item3mobile');
document.getElementById('slider').addEventListener('slide', function(e) {
if (e.detail.slideNumber === 1) {
if (item2.querySelector('.mui-loading')) {
setTimeout(function() {
item2.querySelector('.mui-scroll').innerHTML = html2;
}, 500);
}
} else if (e.detail.slideNumber === 2) {
if (item3.querySelector('.mui-loading')) {
setTimeout(function() {
item3.querySelector('.mui-scroll').innerHTML = html3;
}, 500);
}
}

});

<!--为选项卡选择样式-->

var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
$('.mui-input-group').on('change', 'input', function() {
if (this.checked) {
sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
//force repaint
sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
}
});
})(mui);
</script>
</body>
</html>
飞向Hadoop
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mui实现可以左右滑动的导航栏
Yanfengting的博客
02-16 3556
源码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-
html侧滑菜单mui,mui左右滑动菜单的实现---2018-7-13
weixin_35503004的博客
06-23 480
测试滑动入口滑动入口//在这里必须关闭返回键的执行，否则openWindow打开的页面将关闭，不显示出来，可以判断是否退出appmui.init({swipeBack: false,keyEventBind: {backbutton: false}});var self; //当前页面var menu; //菜单页面mui.plusReady(function() {var menu_style ...
MUI顶部选项卡的用法(tab-top-webview-main)详解
11-28
前  言  　MUI是一款最接近原生APP体验的高性能前端框架，它的比较重要的功能是：下拉刷新、侧滑导航、滑动触发操作菜单和顶部(底部)选项卡等 最近用MUI做手机app应用的时候，遇到的小bug。顺便研究了一下这个tab-top-webview-main，这里给大家分享一下。 1主页代码 <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,mi
MUI实现顶部可滑动选项卡
wangchaohpu的博客
12-10 1137
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>顶部可滑动选项卡</title> <scri.
mui选项卡切换+上拉刷新（div模式）
qq_41218239的博客
02-06 452
mui选项卡切换+上拉刷新（div模式）mui选项卡切换+上拉刷新（div模式）效果代码 mui选项卡切换+上拉刷新（div模式） 效果 . 代码 <%– Created by IntelliJ IDEA. User: Administrator Date: 2020/12/13 Time: 21:49 To change this template use File | Settings | File Templates. –%> <%@ page language=“java” co
在vue项目中用Mui做顶部滑动条的问题
weixin_43520916的博客
11-03 499
在vue项目用Mui做顶部滑动条的步骤： 1. 首先在Mui文件夹中找到 tab-top-webview-main.html 文件，拷贝需要的代码片段到项目中。 <div id="slider" class="mui-slider mui-fullscreen"> <div id="sliderSegmentedControl" class="mui-scroll-wra...
mui选项卡切换和下拉刷新加载数据列表代码.zip
07-11
这是一款基于mui框架制作的选项卡切换和下拉刷新加载数据列表代码，手机移动端选项卡切换插件，触屏滑动下拉刷新代码。 js代码 [removed][removed] [removed][removed] [removed][removed] [removed] mui....
HTML5标准类V1.50+mui底部选项卡演示-易语言
06-14
在“mui底部选项卡演示.e”文件中，可能是使用易语言编写的程序，用于演示MUI底部选项卡的使用方法和效果。易语言是一种中国本土的编程语言，旨在降低编程的难度，让不懂英文的用户也能进行编程。在这个项目中，...
mui上拉加载+选项卡+ajax
12-25
`mui`框架的选项卡组件允许开发者创建可切换的视图，每个视图对应一个独立的内容区域。`mui.tabs()`方法用于初始化选项卡，可以通过监听`'show'`事件来处理内容的动态加载或更新。 `ajax`（异步JavaScript和XML）是...
基于mui框架选项卡列表下拉滑动加载代码
12-14
基于mui框架制作移动端选项卡切换，触屏滑动下拉加载数据列表刷新代码。
滑动条（Slider），进度条（ProgressBar）运用
07-06
WPF开发过程中少不了有些界面加载等待，不能没有过度界面处理你不然显得软件如同卡死了一般，用户体验极度不好。这需要使用到各种样式的进度条过渡处理展示些细节提醒用户。有些参数的调整一味的使用文本框调整太生硬可以考虑使用滑动条，例如声音的调节等等。
mui 左右可滑动的表格
baidu_24743861的博客
10-24 1168
<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" id="title"></h1&...
android 九宫格轮播,MUI前端框架轮播图片+九宫格(左右滑动)
weixin_39556702的博客
06-02 649
MUI前端框架轮播图片+九宫格(左右滑动)1、需要文件mui.min.js、mui.min.css、fonts/mui.ttf2、创建index.html,代码如下测试content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> ...
MUI 滑动选项卡的mui-slider-progress-bar滑动位置错误问题
weixin_43525542的博客
04-13 401
MUI 滑动选项卡的mui-slider-progress-bar滑动位置错误问题 百度后官方也没有解决这个问题其实很简单,找到对应的css文件这边有 mui-col-xs-1-------mui-col-xs-12 的值可以通过修改百分比去修改位置错误的问题 ...
MUI div模式侧滑菜单（右），主页面不动，无切换展示功能
weixin_42547014的博客
06-05 540
<!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-mob
mui横向滑动菜单
tiankongxiao的博客
02-24 705
<style> .mui-bar a { color: #E02D26; } #topItem { background: white; border-bottom: 1px solid #EEEEEE; } .mui-slider .mui-segmented-control.mui-scroll-wrapper { height: 40px; } .mui-slider .mui-segmented-control .mui-control-item { line-height: 37px;
vue mui-scroll-wrapper 导航栏横向滑动
stayreal_OAOA
11-05 1243
import MintUI from 'mint-ui' Vue.use(MintUI) <template> <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" > ...
mui 底部选项卡-div模式 实现跳转页面
最新发布
04-23
可以通过给每个选项卡绑定点击事件，在点击事件中使用JavaScript实现页面的跳转。具体代码如下： HTML代码： ```html <div class="mui-bar mui-bar-tab"> <a class="mui-tab-item" id="homeTab"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首页</span> </a> <a class="mui-tab-item" id="messageTab"> <span class="mui-icon mui-icon-chatboxes"></span> <span class="mui-tab-label">消息</span> </a> <a class="mui-tab-item" id="settingTab"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">设置</span> </a> </div> ``` JavaScript代码： ```javascript // 获取选项卡元素 var homeTab = document.getElementById("homeTab"); var messageTab = document.getElementById("messageTab"); var settingTab = document.getElementById("settingTab"); // 绑定点击事件 homeTab.addEventListener("tap", function() { // 跳转到首页页面 mui.openWindow({ url: "home.html", id: "home" }); }); messageTab.addEventListener("tap", function() { // 跳转到消息页面 mui.openWindow({ url: "message.html", id: "message" }); }); settingTab.addEventListener("tap", function() { // 跳转到设置页面 mui.openWindow({ url: "setting.html", id: "setting" }); }); ``` 以上代码实现了底部选项卡的点击事件，当用户点击不同的选项卡时，会跳转到相应的页面。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值