礼物选取页面

css/form.css

+/**
+ * 1、对于验证码这种格式的表单，不管在横的还是竖的表单中,一般都在同一行
+ */
+.zform-fieldset{
+	margin-bottom: 10px;
+}
+.zform-control{
+	margin-bottom: 15px;
+}
+.control-verifycode  img{
+	max-width: 100%;
+}
+.zform input[type="number"]:focus, 
+.zform input[type="search"]:focus,
+.zform input[type="text"]:focus,
+.zform input[type="password"]:focus,
+.zform input[type="datetime"]:focus,
+.zform input[type="datetime-local"]:focus,
+.zform input[type="date"]:focus, 
+.zform input[type="month"]:focus,
+.zform input[type="time"]:focus,
+.zform input[type="week"]:focus,
+.zform input[type="email"]:focus,
+.zform input[type="url"]:focus,
+.zform input[type="tel"]:focus,
+.zform input[type="color"]:focus,
+.zform select:focus,
+.zform textarea:focus{
+	outline: 0px none;
+}
+
+.zform input:disabled,.zform select:disabled{
+	border-color:#eee;
+}
+.zform input[type="checkbox"]:checked:disabled,.zform input[type="radio"]:checked:disabled{
+	background-color:#18b4ed
+}
+/**
+ * 表单字段
+ */
+.field-text{
+	display:inline-block;
+	width: 100%;
+  	height: 44px;
+  	padding: 6px 5px;
+  	line-height: 1.42857143;
+  	background-color: #fff;
+  	background-image: none;
+  	border: 1px solid #ccc;
+  	box-sizing:border-box;
+	-webkit-box-sizing:border-box; /* Safari */
+}
+.field-area{
+	width: 100%;
+	padding: 5px;
+	vertical-align: top;
+	background-color: #fff;
+  	background-image: none;
+  	border: 1px solid #ccc;
+  	box-sizing:border-box;
+	-webkit-box-sizing:border-box; /* Safari */
+}
+.field-select{
+	-webkit-appearance: none !important;
+  	-webkit-border-radius: 0;
+  	border-radius: 0;
+	border: 1px solid #CCC;
+	padding: 0 5px;
+	height: 44px;
+	line-height: 44px;
+	width: 100%;
+	color:#666;
+	box-sizing:border-box;
+	-webkit-box-sizing:border-box; /* Safari */
+	background: #ffffff url('../images/select_arrow.png') no-repeat 100% center;
+}
+.field-check,.field-radio{
+	-webkit-appearance: none;
+    width: 20px;
+    height:20px;
+   
+    border:1px solid #ccc;
+    text-align: center;
+    vertical-align: middle;
+    outline: 0;
+    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .125);
+          box-shadow: inset 0 1px 3px rgba(0, 0, 0, .125);
+}
+.field-check{
+	 border-radius: 4px;
+}
+.field-radio{
+	border-radius:100%;
+}
+.field-check:checked,.field-radio:checked{
+    border: 0;
+    background:#18b4ed;
+    color: #fff;
+}
+.field-check:checked:before{
+	color:#fff;
+    content: "\e60a";
+    font-size:22px;
+    line-height: 20px;
+    vertical-align:top;
+}
+.field-radio:checked:before{
+	content: "\e609";
+	font-size: 18px;
+    line-height: 20px;
+	vertical-align:top;
+}
+
+
+/**
+ * icon内嵌型(左边或者是右边)
+ */
+.zform-control-icon{
+	position: relative;
+}
+.zform-control-icon .control-icon i{
+	font-size: 28px;
+	line-height: 44px;
+}
+.zform-control-icon.zform-control-left .control-icon{
+	position: absolute;
+	height: 100%;
+	left:5px;
+	color: #999;
+}
+.zform-control-icon.zform-control-left .control-field .field-text{
+	padding-left: 40px
+}
+
+.zform-control-icon.zform-control-right .control-icon{
+	position: absolute;
+	height: 100%;
+	right:5px;
+	color: #999;
+}
+.zform-control-icon.zform-control-right .control-field .field-text{
+	padding-right: 40px
+}
+
+
+
+
+/**
+ * 验证码
+ */
+.zform-control-verifycode{
+	position: relative;
+}
+.zform-control-verifycode .control-field{
+	padding-right: 90px;
+}
+.zform-control-verifycode .control-verifycode{
+	position: absolute;
+	right: 0;
+	top:0;
+	width: 80px;
+}
+/**
+ * 单选框和复选框
+ */
+.zform-control-radiocheck{
+		margin-bottom: 12px
+}
+.zform-control-radiocheck .control-label{
+		line-height:20px !important;
+}
+.zform-control-radiocheck .control-field .field-radio,
+.zform-control-radiocheck .control-field .field-check{
+	margin-right: 5px;
+}
+.zform-control-radiocheck .control-field label{
+	display: inline-block;
+	margin-right: 15px;
+	line-height: 20px;
+	margin-bottom: 5px;
+}
+/**
+ * 垂直类型
+ */
+.zform-vertical .zform-control .control-label{
+	padding: 10px 0 8px;
+	display: block;
+}
+/**
+ * 水平类型
+ */
+.zform-horizontal .zform-control{
+	position: relative;
+}
+.zform-horizontal .zform-control .control-label{
+	line-height: 44px;
+	position: absolute;
+	left:0;
+	top:0;
+	min-width: 70px;
+	text-align: right;
+}
+.zform-horizontal .zform-control .control-label-area{
+	line-height:normal;
+}
+.zform-horizontal .zform-control .control-field{
+	padding-left: 70px;
+}
+/**
+ * group类型
+ */
+.zform-group .zform-control{
+	position: relative;
+	margin-bottom:0;
+	border-left:1px solid #ccc;
+	border-right:1px solid #ccc;
+	border-bottom:1px solid #ccc;
+	background: #fff;
+}
+.zform-group .zform-control:after{
+	content:"";
+    display:table;
+    clear:both;
+}
+.zform-group .zform-control:first-child{
+	border-top:1px solid #ccc;
+}
+.zform-group .zform-control .control-label{
+	line-height: 44px;
+	float: left;
+	padding:0 10px;
+}
+.zform-group .zform-control .control-field{
+	float: left;
+}
+.zform-group .zform-control .field-text{
+	border:none;
+}
+.zform-group.zform-radius .zform-control:first-child{
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+}
+.zform-group.zform-radius .zform-control:last-child{
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+}
+
+
+
+
+
+.zform-borderbottom .zform-control{
+	border-top:none !important;
+	border-left:none !important;
+	border-right:none !important;
+}
+.zform-borderbottom .zform-control .control-field{
+	float: none;
+}
+/**
+ * 圆角处理
+ */
+.zform-radius .field-text,
+.zform-radius .field-area,
+.zform-radius .field-select{
+	border-radius: 4px;
+}
+
+/**
+ * -webkit-user-select:禁止选中复制;
+ * touch-action：移除特定元素或整个文档的触发延迟
+ */
+ .zbtn {
+  display: inline-block;
+  padding: 6px 12px;
+  margin-bottom: 0;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 1.42857143;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  -ms-touch-action: manipulation;
+      touch-action: manipulation;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  background-image: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
+/**
+ * 注意button的状态：选中active focus blur
+ * 
+ * .zbtn:focus 给有foucs的html标签是用
+ * :focus 有<button>,<input>,<select>
+ * 它们在focus的时候会添加.focus class
+ * 它们在data-parter的情况下会添加active
+ * 正常元素都会有：:active,ie7不支持这个属性
+ */
+
+.zbtn.active
+ {
+  outline: thin dotted;
+  outline: 0px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+.zbtn:active,
+.zbtn.active {
+  background-image: none;
+  outline: 0;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+}
+/**
+ * zbtn[disabled] 是表单选择器 拥有选择 disabled="disabled" 类型
+ * 
+ * fieldset[disabled] .zbtn 考虑删除
+ */
+.zbtn.disabled{
+  pointer-events: none;
+  cursor: not-allowed;
+  filter: alpha(opacity=65);
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  opacity: .65;
+}
+/**
+ *按钮的大小
+ */
+.zbtn-full{
+  display: block;
+  width: 100%;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+.zbtn-lg{
+  padding: 9px 16px;
+  font-size: 18px;
+  line-height: 1.3333333;
+  border-radius: 0px;
+}
+
+[data-roler="button"] > .zbtn input[type="radio"],
+[data-roler="button"] > .zbtn input[type="radio"],
+[data-roler="button"] > .zbtn input[type="checkbox"],
+[data-roler="button"] > .zbtn input[type="checkbox"] {
+  position: absolute;
+  clip: rect(0, 0, 0, 0);
+  pointer-events: none;
+}
+/**
+ *默认按钮
+ */
+
+
+/**
+ *主按钮
+*/
+.zbtn-primary{
+  color: #fff;
+  background-color: #337ab7;
+  border-color: #2e6da4;
+}
+.zbtn-primary:not(label):hover,
+.zbtn-primary.active{
+  color: #fff;
+  background-color: #286090;
+  border-color: #204d74;
+}
+.zbtn-primary.active{
+  background-image: none;
+}
+.zbtn-primary.disabled,
+.zbtn-primary.disabled.active{
+  background-color: #337ab7;
+  border-color: #2e6da4;
+}
+/**
+ * buttonset button->checkbox button->raido
+ * @type {[type]}
+ */
+.zbtn-group:after{
+    content:"";
+    display:table;
+    clear:both
+}
+.zbtn-group > .zbtn{
+  position: relative;
+  border-radius: 0px;
+  float: left;
+  border:none;
+}
+.zbtn-group > .zbtn:first-child:not(:last-child){
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+.zbtn-group > .zbtn:last-child:not(:first-child){
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+
+
+
+
+
+
+
+
+

css/validate.css

+.field-invalid{border-color:#a94442}.field-invalidmsg{color:#a94442}.field-validmsg{color:#3c763d}.field-tooltipWrap{position:absolute;left:0;top:0;width:100%;z-index:19891014}.field-tooltipInner{pointer-events:none;display:table;position:fixed;left:0;top:0;width:100%;height:100%}.field-tooltip{display:table-cell;vertical-align:middle;text-align:center}.field-tooltip .field-invalidmsg,.field-tooltip .field-validmsg{color:#fff}.field-tooltip .zvalid-resultformat{display:inline-block;position:relative;background-color:rgba(0,0,0,.8);color:#fff;padding:10px 15px;font-size:14px;border-radius:6px;box-shadow:0 0 8px rgba(0,0,0,.1);pointer-events:auto;animation-name:fieldTipBounceIn;-webkit-animation-name:fieldTipBounceIn;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.18s;animation-duration:.18s}@-webkit-keyframes fieldTipBounceIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
\ No newline at end of file

js/jquery-mvalidate.js

+/*! 
+版本:1.0.0;
+作者:散崖;
+邮箱:948061564@qq.com;
+博客地址:http://wnworld.com/;*/
+!function(a){"function"==typeof define&&define.amd?define(["jquery"],function(b){a(b)}):"function"==typeof define&&define.cmd?define(["jquery"],function(b,c,d){a(b("jquery"))}):a(jQuery)}(function(a){var b=['input:not([type]),input[type="color"],input[type="date"],input[type="datetime"],input[type="datetime-local"],input[type="email"],input[type="file"],input[type="hidden"],input[type="month"],input[type="number"],input[type="password"],input[type="range"],input[type="search"],input[type="tel"],input[type="text"],input[type="time"],input[type="url"],input[type="week"],textarea',"select",'input[type="checkbox"],input[type="radio"]'],c=b.join(","),d={},e=function(a,b,c){if("radio"==a.prop("type")||"checkbox"==a.prop("type")){var d=c.$form.find('[name="'+a.prop("name")+'"]');d.filter(":checked").length>0?d.removeClass("field-invalid"):d.addClass("field-invalid")}else b.required&&b.pattern&&b.conditional?a.removeClass("field-invalid"):a.addClass("field-invalid")},f=function(){function b(b){if(!c){var d=a('<div class="field-tooltipWrap"><div class="field-tooltipInner"><div class="field-tooltip fieldTipBounceIn">'+b+"</div></div></div>");d.appendTo(a("body")),c=!0,setTimeout(function(){d.remove(),c=!1},1500)}}var c=null;return{show:b}}(),g=function(c,g){var h,i=a(this),j={required:!0,conditional:!0,pattern:!0},k=a.fn.mvalidate.errorTipFormat,l=a.trim(i.val())||"",m=i.attr("data-validate"),n=void 0!=m?d[m]:{},o=i.attr("data-required"),p=i.attr("data-pattern")||("regexp"==a.type(n.pattern)?n.pattern:/(?:)/),q=i.attr("data-conditional")||n.conditional,r=i.attr("data-descriptions")||n.descriptions,s=i.attr("data-describedby")||n.describedby;r=a.isPlainObject(r)?r:g.descriptions[r]||{},o=""==o||(o||!!n.required),"regexp"!=a.type(p)&&(p=RegExp(p)),o&&(i.is(b[0]+","+b[1])?!l.length>0&&(j.required=!1):i.is(b[2])&&(i.is("[name]")?0==g.$form.find('[name="'+i.prop("name")+'"]:checked').length&&(j.required=!1):j.required=field.is(":checked"))),i.is(b[0])&&(p.test(l)||(o?j.pattern=!1:l.length>0&&(j.pattern=!1))),"undefined"!=q&&(a.isFunction(q)?j.conditional=!!q.call(i,l,g):g.conditional.hasOwnProperty(q)&&!g.conditional[q].call(i,l,g)&&(j.conditional=!1)),h=k(r.valid),j.required?j.pattern?j.conditional||(h=k(r.conditional)):h=k(r.pattern):h=k(r.required);var t=a('[id="'+s+'"]');return t.length>0&&2==g.type&&("keyup"!=c.type&&"change"!=c.type||t.children().length&&a.trim(t.text()))&&(t.html(h||""),e(i,j,g)),"function"==typeof n.each&&n.each.call(i,c,j,g),g.eachField.call(i,c,j,g),j.required&&j.pattern&&j.conditional?("function"==typeof n.valid&&n.valid.call(i,c,j,g),g.eachValidField.call(i,c,j,g)):(!g.firstInvalid&&g.firstInvalidFocus&&(g.firstInvalid=!0,i.focus()),1==g.type&&f.show(h),"function"==typeof n.invalid&&n.invalid.call(i,c,j,g),g.eachInvalidField.call(i,c,j,g)),j};a.extend(a,{mvalidateExtend:function(b){return a.extend(d,b)},mvalidateTip:function(b){var c=a.fn.mvalidate.errorTipFormat(b);f.show(c)}}),a.fn.mvalidate=function(d){var e,f={type:1,validateInSubmit:!0,sendForm:!0,onKeyup:!1,onChange:!0,firstInvalidFocus:!0,conditional:{},descriptions:{},eachField:a.noop,eachValidField:a.noop,eachInvalidField:a.noop,valid:a.noop,invalid:a.noop,namespace:"mvalidate"},h=a.extend(!0,f,d),i=h.namespace;return h.type=Number(h.type),h.firstInvalid=!1,e=1!=h.type,this.mvalidateDestroy().each(function(d){var f,j=a(this);j.is("form")&&(h.$form=j,j.data(name,{options:h}),f=j.find(c),e&&h.onKeyup&&f.filter(b[0]).each(function(){a(this).on("keyup."+i,function(a){g.call(this,a,h)})}),e&&h.onChange&&f.each(function(){a(this).is(b[1]+","+b[2])&&a(this).on("change."+i,function(a){g.call(this,a,h)})}),h.validateInSubmit&&j.on("submit."+i,function(b){var c=!0;h.firstInvalid=!1,f.each(function(){var a=g.call(this,b,h);a.pattern&&a.conditional&&a.required||(c=!1)}),c?(h.sendForm||b.preventDefault(),a.isFunction(h.valid)&&h.valid.call(j,b,h)):(b.preventDefault(),b.stopImmediatePropagation(),a.isFunction(h.invalid)&&h.invalid.call(j,b,h))}))})},a.fn.mvalidateDestroy=function(){var b,d=a(this),e=d.data(name);return d.is("form")&&a.isPlainObject(e)&&"string"==typeof e.options.nameSpace&&(b=d.removeData(name).find(c),b.off("."+e.options.nameSpace)),d},a.fn.mvalidate.errorTipFormat=function(a){return'<div class="zvalid-resultformat">'+a+"</div>"}});
\ No newline at end of file

js/zepto-mvalidate.js

+/*! 
+版本:1.0.0;
+作者:散崖;
+邮箱:948061564@qq.com;
+博客地址:http://wnworld.com/;*/
+!function(a){"function"==typeof define&&define.amd?define(["Zepto"],function(b){a(b)}):"function"==typeof define&&define.cmd?define(["Zepto"],function(b,c,d){a(b("Zepto"))}):a(Zepto)}(function(a){var b=['input:not([type]),input[type="color"],input[type="date"],input[type="datetime"],input[type="datetime-local"],input[type="email"],input[type="file"],input[type="hidden"],input[type="month"],input[type="number"],input[type="password"],input[type="range"],input[type="search"],input[type="tel"],input[type="text"],input[type="time"],input[type="url"],input[type="week"],textarea',"select",'input[type="checkbox"],input[type="radio"]'],c=b.join(","),d={},e=function(a,b,c){if("radio"==a.prop("type")||"checkbox"==a.prop("type")){var d=c.$form.find('[name="'+a.prop("name")+'"]');d.filter(":checked").length>0?d.removeClass("field-invalid"):d.addClass("field-invalid")}else b.required&&b.pattern&&b.conditional?a.removeClass("field-invalid"):a.addClass("field-invalid")},f=function(){function b(b){if(!c){var d=a('<div class="field-tooltipWrap"><div class="field-tooltipInner"><div class="field-tooltip fieldTipBounceIn">'+b+"</div></div></div>");d.appendTo(a("body")),c=!0,setTimeout(function(){d.remove(),c=!1},1500)}}var c=null;return{show:b}}(),g=function(c,g){var h,i=a(this),j={required:!0,conditional:!0,pattern:!0},k=a.fn.mvalidate.errorTipFormat,l=a.trim(i.val())||"",m=i.attr("data-validate"),n=void 0!=m?d[m]:{},o=i.attr("data-required"),p=i.attr("data-pattern")||("regexp"==a.type(n.pattern)?n.pattern:/(?:)/),q=i.attr("data-conditional")||n.conditional,r=i.attr("data-descriptions")||n.descriptions,s=i.attr("data-describedby")||n.describedby;r=a.isPlainObject(r)?r:g.descriptions[r]||{},o=""==o||(o||!!n.required),"regexp"!=a.type(p)&&(p=RegExp(p)),o&&(i.is(b[0]+","+b[1])?!l.length>0&&(j.required=!1):i.is(b[2])&&(i.is("[name]")?0==g.$form.find('[name="'+i.prop("name")+'"]:checked').length&&(j.required=!1):j.required=field.is(":checked"))),i.is(b[0])&&(p.test(l)||(o?j.pattern=!1:l.length>0&&(j.pattern=!1))),"undefined"!=q&&(a.isFunction(q)?j.conditional=!!q.call(i,l,g):g.conditional.hasOwnProperty(q)&&!g.conditional[q].call(i,l,g)&&(j.conditional=!1)),h=k(r.valid),j.required?j.pattern?j.conditional||(h=k(r.conditional)):h=k(r.pattern):h=k(r.required);var t=a('[id="'+s+'"]');return t.length>0&&2==g.type&&("keyup"!=c.type&&"change"!=c.type||t.children().length&&a.trim(t.text()))&&(t.html(h||""),e(i,j,g)),"function"==typeof n.each&&n.each.call(i,c,j,g),g.eachField.call(i,c,j,g),j.required&&j.pattern&&j.conditional?("function"==typeof n.valid&&n.valid.call(i,c,j,g),g.eachValidField.call(i,c,j,g)):(!g.firstInvalid&&g.firstInvalidFocus&&(g.firstInvalid=!0,i.focus()),1==g.type&&f.show(h),"function"==typeof n.invalid&&n.invalid.call(i,c,j,g),g.eachInvalidField.call(i,c,j,g)),j};a.extend(a,{mvalidateExtend:function(b){return a.extend(d,b)}}),a.fn.mvalidate=function(d){var e,f={type:1,validateInSubmit:!0,sendForm:!0,onKeyup:!1,onChange:!0,firstInvalidFocus:!0,conditional:{},descriptions:{},eachField:a.noop,eachValidField:a.noop,eachInvalidField:a.noop,valid:a.noop,invalid:a.noop,namespace:"mvalidate"},h=a.extend(!0,f,d),i=h.namespace;return h.type=Number(h.type),h.firstInvalid=!1,e=1!=h.type,this.mvalidateDestroy().each(function(d){var f,j=a(this);j.is("form")&&(h.$form=j,j.data(name,{options:h}),f=j.find(c),e&&h.onKeyup&&f.filter(b[0]).each(function(){a(this).on("keyup."+i,function(a){g.call(this,a,h)})}),e&&h.onChange&&f.each(function(){a(this).is(b[1]+","+b[2])&&a(this).on("change."+i,function(a){g.call(this,a,h)})}),h.validateInSubmit&&j.on("submit."+i,function(b){var c=!0;h.firstInvalid=!1,f.each(function(){var a=g.call(this,b,h);a.pattern&&a.conditional&&a.required||(c=!1)}),c?(h.sendForm||b.preventDefault(),a.isFunction(h.valid)&&h.valid.call(j,b,h)):(b.preventDefault(),b.stopImmediatePropagation(),a.isFunction(h.invalid)&&h.invalid.call(j,b,h))}))})},a.fn.mvalidateDestroy=function(){var b,d=a(this),e=d.data(name);return d.is("form")&&a.isPlainObject(e)&&"string"==typeof e.options.namespace&&(b=d.removeData(name).find(c),b.off("."+e.options.namespace)),d},a.fn.mvalidate.errorTipFormat=function(a){return'<div class="zvalid-resultformat">'+a+"</div>"}});
\ No newline at end of file