WeUI框架--操作反馈

WeUI框架 顾兴福 •
文章标签: WeUI
35

这里主要介绍一下手机操作的反馈功能，ActionSheet(弹出式菜单)，Dialog(对话框)，Msg(提示页)，Toast(弹出式提示)，Picker(多列选择器)。

菜单

IOS菜单效果图： 

ios.PNG

Android菜单效果图： 

安卓.PNG

<div>
	<!--ios按钮-->
	<a href="javascript:;" class="weui-btn weui-btn_default" id="showIOSActionSheet">iOS ActionSheet</a>
	<!--安卓按钮-->
	<a href="javascript:;" class="weui-btn weui-btn_default" id="showAndroidActionSheet">Android ActionSheet</a>
</div>

<!--ios菜单-->
<div>
	<div class="weui-mask" id="iosMask" style="display: none"></div>
	<div class="weui-actionsheet" id="iosActionsheet">
		<div class="weui-actionsheet__title">
			<p class="weui-actionsheet__title-text">这是一个标题，可以为一行或者两行。</p>
		</div>
		<div class="weui-actionsheet__menu">
			<div class="weui-actionsheet__cell">示例菜单</div>
			<div class="weui-actionsheet__cell">示例菜单</div>
			<div class="weui-actionsheet__cell">示例菜单</div>
			<div class="weui-actionsheet__cell">示例菜单</div>
		</div>
		<div class="weui-actionsheet__action">
			<div class="weui-actionsheet__cell" id="iosActionsheetCancel">取消</div>
		</div>
	</div>
</div>
<!--安卓菜单-->
<div class="weui-skin_android" id="androidActionsheet" style="display: none">
	<div class="weui-mask"></div>
	<div class="weui-actionsheet">
		<div class="weui-actionsheet__menu">
			<div class="weui-actionsheet__cell">示例菜单</div>
			<div class="weui-actionsheet__cell">示例菜单</div>
			<div class="weui-actionsheet__cell">示例菜单</div>
		</div>
	</div>
</div>


/*--------------------弹出式菜单js代码------------------------*/
// ios
$(function() {
	var $iosActionsheet = $('#iosActionsheet');
	var $iosMask = $('#iosMask');

	function hideActionSheet() {
		$iosActionsheet.removeClass('weui-actionsheet_toggle');
		$iosMask.fadeOut(200);
	}

	$iosMask.on('click', hideActionSheet);
	$('#iosActionsheetCancel').on('click', hideActionSheet);
	$("#showIOSActionSheet").on("click", function() {
		$iosActionsheet.addClass('weui-actionsheet_toggle');
		$iosMask.fadeIn(200);
	});
});
// android
$(function() {
	var $androidActionSheet = $('#androidActionsheet');
	var $androidMask = $androidActionSheet.find('.weui-mask');

	$("#showAndroidActionSheet").on('click', function() {
		$androidActionSheet.fadeIn(200);
		$androidMask.on('click', function() {
			$androidActionSheet.fadeOut(200);
		});
	});
});

Dialog(对话框)

IOS dialog样式1：

ios1.PNG

IOS dialog样式2：

ios2.PNG

安卓 dialog样式1：

安卓1.PNG

安卓 dialog样式2：

安卓2.PNG

<!--按钮-->
<a href="javascript:;" class="weui-btn weui-btn_default" id="showIOSDialog1">iOS Dialog样式一</a>
<a href="javascript:;" class="weui-btn weui-btn_default" id="showIOSDialog2">iOS Dialog样式二</a>
<a href="javascript:;" class="weui-btn weui-btn_default" id="showAndroidDialog1">Android Dialog样式一</a>
<a href="javascript:;" class="weui-btn weui-btn_default" id="showAndroidDialog2">Android Dialog样式二</a>

<div id="dialogs">
<!--ios dialog1-->
	<div class="js_dialog" id="iosDialog1" style="display: none;">
		<div class="weui-mask"></div>
		<div class="weui-dialog">
			<div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
			<div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
			<div class="weui-dialog__ft">
				<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
				<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
			</div>
		</div>
	</div>
<!--ios dialog1-->
<!--ios dialog2-->
        <div class="js_dialog" id="iosDialog2" style="display: none;">
		<div class="weui-mask"></div>
		<div class="weui-dialog">
			<div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
			<div class="weui-dialog__ft">
				<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
			</div>
		</div>
	</div>
<!--ios dialog2-->
<!--安卓 dialog1-->
	<div class="js_dialog" id="androidDialog1" style="display: none;">
		<div class="weui-mask"></div>
		<div class="weui-dialog weui-skin_android">
			<div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
			<div class="weui-dialog__bd">
				弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
			</div>
			<div class="weui-dialog__ft">
				<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
				<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
			</div>
		</div>
	</div>
<!--安卓 dialog1-->
<!--安卓 dialog2-->
	<div class="js_dialog" id="androidDialog2" style="display: none;">
		<div class="weui-mask"></div>
		<div class="weui-dialog weui-skin_android">
			<div class="weui-dialog__bd">
				弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
			</div>
		        <div class="weui-dialog__ft">
			      <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
			      <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
			</div>
		</div>
	</div>
<!--安卓 dialog2-->
</div>

<!--js代码-->
var $iosDialog1 = $('#iosDialog1'),
$iosDialog2 = $('#iosDialog2'),
$androidDialog1 = $('#androidDialog1'),
$androidDialog2 = $('#androidDialog2');

$('#dialogs').on('click', '.weui-dialog__btn', function() {
	$(this).parents('.js_dialog').fadeOut(200);
});

$('#showIOSDialog1').on('click', function() {
	$iosDialog1.fadeIn(200);
});
$('#showIOSDialog2').on('click', function() {
	$iosDialog2.fadeIn(200);
});
$('#showAndroidDialog1').on('click', function() {
	$androidDialog1.fadeIn(200);
});
$('#showAndroidDialog2').on('click', function() {
	$androidDialog2.fadeIn(200);
});

Msg(提示页)

成功提示页：

1.PNG

失败提示页：

2.PNG

<!--按钮-->
<a href="#msg_success" class="weui-btn weui-btn_default">成功提示页</a>
<a href="#msg_warn" class="weui-btn weui-btn_default">失败提示页</a>
<!--成功提示页-->
<div id="msg_success">
	<div class="page">
		<div class="weui-msg">
			<div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
			<div class="weui-msg__text-area">
				<h2 class="weui-msg__title">操作成功</h2>
				<p class="weui-msg__desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现
					<a href="javascript:void(0);">文字链接</a>
				</p>
			</div>
			<div class="weui-msg__opr-area">
				<p class="weui-btn-area">
					<a href="javascript:history.back();" class="weui-btn weui-btn_primary">推荐操作</a>
					<a href="javascript:history.back();" class="weui-btn weui-btn_default">辅助操作</a>
				</p>
			</div>
		</div>
	</div>
</div>
<!--失败提示页-->
<div id="msg_warn">
	<div class="page">
		<div class="weui-msg">
			<div class="weui-msg__icon-area"><i class="weui-icon-warn weui-icon_msg"></i></div>
			<div class="weui-msg__text-area">
				<h2 class="weui-msg__title">操作失败</h2>
				<p class="weui-msg__desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现
					<a href="javascript:void(0);">文字链接</a>
				</p>
			</div>
			<div class="weui-msg__opr-area">
				<p class="weui-btn-area">
					<a href="javascript:history.back();" class="weui-btn weui-btn_primary">推荐操作</a>
					<a href="javascript:history.back();" class="weui-btn weui-btn_default">辅助操作</a>
				</p>
			</div>
		</div>
	</div>
</div>

Picker(多列选择器)

单列选择器：

1.PNG

日期选择器：

2.PNG

<!--按钮-->
<a href="javascript:;" class="weui-btn weui-btn_default" id="showPicker">单列选择器</a>
<a href="javascript:;" class="weui-btn weui-btn_default" id="showDatePicker">日期选择器</a>

/*-------js代码-----*/
$('#showPicker').on('click', function() {
	weui.picker([{
		label: '飞机票',
		value: 0
	}, {
		label: '火车票',
		value: 1
	}, {
		label: '的士票',
		value: 2
	}, {
		label: '公交票 (disabled)',
		disabled: true,
		value: 3
	}, {
		label: '其他',
		value: 4
	}]);
});
$('#showDatePicker').on('click', function() {
	weui.datePicker({
		start: 1990,
		end: new Date().getFullYear(),
		onChange: function(result) {
			console.log(result);
		},
		onConfirm: function(result) {
			console.log(result);
		}
	});
});

Toast(弹出式提示)

成功提示：

1.PNG

加载提示：

2.PNG

<!--按钮-->
<a href="javascript:;" class="weui-btn weui-btn_default" id="showToast">成功提示</a>
<a href="javascript:;" class="weui-btn weui-btn_default" id="showLoadingToast">加载中提示</a>
<!--成功 toast-->
<div id="toast" style="display: none;">
	<div class="weui-mask_transparent"></div>
	<div class="weui-toast">
		<i class="weui-icon-success-no-circle weui-icon_toast"></i>
		<p class="weui-toast__content">已完成</p>
	</div>
</div>

<!-- 加载 toast -->
<div id="loadingToast" style="display:none;">
	<div class="weui-mask_transparent"></div>
	<div class="weui-toast">
		<i class="weui-loading weui-icon_toast"></i>
		<p class="weui-toast__content">数据加载中</p>
	</div>
</div>
</div>

/*---------------弹出式提示js代码-------------------*/
// toast
$(function() {
	var $toast = $('#toast');
	$('#showToast').on('click', function() {
		if($toast.css('display') != 'none') return;

		$toast.fadeIn(100);
		setTimeout(function() {
			$toast.fadeOut(100);
		}, 2000);
	});
});

// loading
$(function() {
	var $loadingToast = $('#loadingToast');
	$('#showLoadingToast').on('click', function() {
		if($loadingToast.css('display') != 'none') return;

		$loadingToast.fadeIn(100);
		setTimeout(function() {
			$loadingToast.fadeOut(100);
		}, 2000);
	});
});

({{handupNumber}}) ({{favoriteNumber}})
还能输出{{restrictNumber}}个字符  

  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :