MUI元素

示例

	var r = '';
	r += '<div class="mui-input-row"><div><label class="mui-h4">';
	r += '项目名称';
	r += '</label></div><div><input type="text" placeholder="';
	r += '请输入';
	r += '" /></div></div>';
	
	r += '<div class="mui-input-row mui-select">';
	r += '<label>下拉框</label>';
	r += '<select>';
	r += '<option value="1">项目A</option>';
	r += '<option value="2">项目B</option>';
	r += '</select> ';
	r += '</div>';

	r += '<div class="mui-input-row mui-radio">';
	r += '<label>是</label>';
	r += '<input name="style" type="radio" checked value="" class="rds">';
	r += '</div>';	
	r += '<div class="mui-input-row mui-radio">';
	r += '<label>不是</label>';
	r += '<input name="style" type="radio" value="inverted" class="rds">';
	r += '</div>';

	r += '<div class="mui-input-row"><label class="mui-h4">';
	r += '以下多选';
	r += '</label></div>';
	r += '<div class="mui-input-row mui-checkbox mui-left" style="margin: 20px 5px;height:auto;">';
	r += '<label>选项A</label>';
	r += '<input name="checkbox1" value="1" type="checkbox" class="rds">';
	r += '</div>';	
	r += '<div class="mui-input-row mui-checkbox mui-left" style="margin: 20px 5px;">';
	r += '<label>选项B</label>';
	r += '<input name="checkbox1" value="2" type="checkbox" class="rds">';
	r += '</div>';


日期时间

<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
(function($) {
    
    
	$.init();
	var btns = $('.btn');
	btns.each(function(i, btn) {
    
    
		btn.addEventListener('tap', function() {
    
    
			var _self = this;
			if(_self.picker) {
    
    _self.picker.show(function (rs) {
    
    _self.value = rs.text;_self.picker.dispose();_self.picker = null;});} 
			else {
    
    
				var optionsJson = this.getAttribute('data-options') || '{}';
				var options = JSON.parse(optionsJson);
				_self.picker = new $.DtPicker(options);
				_self.picker.show(function(rs) {
    
    _self.value = rs.text;_self.picker.dispose();_self.picker = null;});
			}
		}, false);
	});
})(mui);
r += '<div class="mui-input-row"><div><label class="mui-h4">';
r += '日期';
r += '</label></div><div><input type="text" data-options="{}" class="btn" placeholder="';
r += '日期';
r += '" /></div></div>';

富文本

r += '<div class="mui-input-row"><div><label class="mui-h4">';
r += '现场使用的便携式气体探测仪序列号';
r += '</label></div>';
r += '</div>';
r += '<div class="mui-input-row" style="margin: 20px 5px;">';
r += '<textarea style="width: 100%; height: 250px;" rows="8" id="question" class="mui-input-clear question" placeholder="';
r += '请输入...';
r += '"></textarea><p></p>';
r += '</div>';
r += '</div>';

猜你喜欢

转载自blog.csdn.net/mylearnbox/article/details/114062250
MUI