JSFiddle - React, Tailwind, and code Playground

by wen yongheng

HTML

<link rel="stylesheet" href="https://oggpmngp5.qnssl.com/mui/v3.4.0/mui.min.css">
<script src="https://oggpmngp5.qnssl.com/mui/v3.4.0/mui.min.js"></script>
<header id="header" class="mui-bar mui-bar-nav">
  <div class="mui-title">
     不透明导航栏
  </div>
  <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
</header>
<div class="mui-content">
			<p style="margin: 35px 15px;">这是nav bar（顶部导航栏）演示页面， 你可以在顶部导航中放置多种控件，点击如下单选框切换导航栏显示内容；
			</p>
			<h5 class="mui-content-padded">左侧显示内容</h5>
			<form class="mui-input-group">
				<div class="mui-input-row mui-radio">
					<label>不显示</label>
					<input name="style" type="radio" value="left-none">
				</div>
				<div class="mui-input-row mui-radio">
					<label>仅图标</label>
					<input name="style" type="radio" checked value="left-icon">
				</div>
				<div class="mui-input-row mui-radio">
					<label>图标加文字按钮</label>
					<input name="style" type="radio" value="left-btn">
				</div>
			</form>
			<h5 class="mui-content-padded" style="margin-top: 35px;">右侧显示内容</h5>
			<form class="mui-input-group" style="margin-bottom: 15px;">
				<div class="mui-input-row mui-radio">
					<label>不显示</label>
					<input name="style" type="radio" checked="" value="right-none">
				</div>
				<div class="mui-input-row mui-radio">
					<label>仅图标</label>
					<input name="style" type="radio" value="right-icon">
				</div>
				<div class="mui-input-row mui-radio">
					<label>文字按钮</label>
					<input name="style" type="radio" value="right-btn">
				</div>
			</form>
		</div>

JavaScript

mui.init({
				swipeBack:true //启用右滑关闭功能
			});
			var header = document.getElementById("header");
			 //左侧icon
			var lefticon = document.createElement('a');
			lefticon.className = 'mui-action-back mui-icon mui-icon-left-nav mui-pull-left';
			 //左侧图标+文字按钮
			var leftbtn = document.createElement('button');
			leftbtn.className = 'mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left';
			var span = document.createElement('span');
			span.className = 'mui-icon mui-icon-left-nav';
			leftbtn.appendChild(span);
			var text = document.createTextNode('首页');
			leftbtn.appendChild(text);
			 //右侧icon
			var righticon = document.createElement('a');
			righticon.className = 'mui-icon mui-icon-bars mui-pull-right';
			 //右侧文字按钮
			var rightbtn = document.createElement('button');
			rightbtn.className = 'mui-btn mui-btn-blue mui-btn-link mui-pull-right';
			rightbtn.innerText = '编辑';
			 //删除原先存在的节点
			function remove(selector) {
				var elem = header.querySelector(selector);
				if (elem) {
					header.removeChild(elem);
				}
			}
			mui('.mui-input-group').on('change', 'input', function() {
				if (this.checked) {
					switch (this.value) {
						case 'left-none':
							remove('.mui-pull-left')
							break;
						case 'left-icon':
							remove('.mui-pull-left');
							header.appendChild(lefticon);
							break;
						case 'left-btn':
							remove('.mui-pull-left');
							header.appendChild(leftbtn);
							break;
						case 'right-none':
							remove('.mui-pull-right');
							break;
						case 'right-icon':
							remove('.mui-pull-right')
							header.appendChild(righticon);
							break;
						case 'right-btn':
							remove('.mui-pull-right');
							header.appendChild(rightbtn);
							break;
					}
				}
			});