最近为某政府部门做一个微信版的投诉页面,做的时候发现了很多"坑"要比普通的页面要难一些,要想一些技巧避开限制才行。话费两天时间才将下面的页面搞定,本着共享的精神将其分享给大家,如有些的有误的地方,请多多指教。
基本需求如下图所示:
需要引用的包文件入下所示:
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<link rel="stylesheet" href="assets/css/app.css">
<script src="assets/js/jquery.min.js"></script>
<script src="dist/lrz.all.bundle.js"></script>
<script src="assets/js/amazeui.js"></script>
<script src="assets/js/app.js"></script>
其中:
Amaze UI的版本为 v2.4.2
官方地址为:
http://amazeui.org/
jQuery的版本为 v2.1.4
lrz.all.bundle.js 为
localResizeIMG-4.9.35 是一个图像压缩工具,并转化为Base64请查阅上一篇博文地址为:
内容一:
能放大预览图片并在微信下能使用
(不起用微信自带的图片预览)的核心代码为:
<ul data-am-widget="gallery" class="am-gallery am-avg-sm-2 am-gallery-imgbordered" data-am-gallery="{pureview:{weChatImagePreview: false}}"
>
<li>
<div class="am-gallery-item">
<img src="img/2016072243244_small.jpeg"
alt="东长安街" data-rel="img/2016072243244_big.jpeg"/>
<h3 class="am-gallery-title"></h3>
</div>
</li>
</ul>
说明:
如果在微信中打开时不想调用微信的图片查看器,可以通过以下选项关闭:
data-am-gallery
=
"{pureview:{weChatImagePreview: false}}"
具有图片懒加载功能
data-rel
=
"img/2016072243244_big.jpeg"可节省流量
内容二和内容三:Amaze UI
自带的验证。这里我个人觉得扩展性不是特别的好,每次修改都要动源码,比如说自定义验证的时候,
想写一些自定义的提示信息,结果看源码后发现无扩展,需要直接修改源代码。
并且API的内容提供的很粗,不是特别的详细,影响了开发效率。
示例程序中
http://amazeui.org/javascript/validator 通过设置
validity.valid = false; 标记验证是否通过;
validity.rangeUnderflow = true; 显示错误信息。
来判断是否通过验证。
下面是验证的核心代码:<input id="qt" type="checkbox" name="cbx" value="9" data-am-ucheck> 其它
<label for="doc-vld-sync">其他理由:</label>
<input type="text" class="js-sync-validate" id="doc-vld-sync" placeholder="当点选其它的时候需填写理由"/>
自定义验证的需求是:当勾选其它的时候”其它理由“必须填写。
$('#doc-vld-msg').validator({
onValid: function(validity) {
$(validity.field).closest('.am-form-group').find('.am-alert').hide();
},
onInValid: function(validity) {
var $field = $(validity.field);
var $group = $field.closest('.am-form-group');
var $alert = $group.find('.am-alert');
// 使用自定义的提示信息 或 插件内置的提示信息
var msg = $field.data('validationMessage') || this.getValidationMessage(validity);
if (!$alert.length) {
$alert = $('<div class="am-alert am-alert-danger"></div>').hide().
appendTo($group);
}
$alert.html(msg).show();
},
validate: function(validity) {//自定义验证必须要放到validate中处理
//自定义函数处理
var v = $(validity.field).val();
//用于判断如果当前对象是类.js-sync-validate的时候执行
if ($(validity.field).is('.js-sync-validate')) {
if($('#qt').is(':checked')&&v.length==0){
validity . valid = false ;return validity;
}else{
validity.valid = true;
validity.typeMismatch=true;
return validity;
}
}
}
});
内容四:上传文件
我在这里面给它加了一个CSS边框,让其美观了一下。
JS
var img = new Image();
img.width = 500;
img.height =500;
img.className='image';
CSS验证例
<style type="text/css">
.image {
padding: 10px;
border: 1px solid #000;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
background: #fff;
filter: progid: DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
</style>
内容五:防止二次提交
html
<button type="button" class="am-btn am-btn-primary btn-loading-example"
data-am-loading="{spinner: 'circle-o-notch', loadingText: '提交中...'}">投诉</button>
js
$('.btn-loading-example').click(function () {
var $btn = $(this)
$btn.button('loading');
setTimeout(function(){
$btn.button('reset');
$('form').submit();
}, 1000);
});
这里需要注意的是似乎不能直接用submit提交,必须要用click事件,然后再调用submit 方可加载。
源码提供下载:
http://download.csdn.net/detail/ltllml44/9587063