初始化
This commit is contained in:
liut
@@ -0,0 +1,443 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pay {
|
||||
width: 700px;
|
||||
background: #ccc;
|
||||
border: 1px solid #e5e5e5;
|
||||
border-radius: 4px;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
p{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.am-radio img {
|
||||
box-sizing: border-box;
|
||||
vertical-align: middle;
|
||||
height: 50px;
|
||||
padding: 10px;
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.tr_rechnum {
|
||||
color: #333333;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
box-sizing: border-box;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.rechnum {
|
||||
color: #ec5a5b;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tr_recharge {
|
||||
max-width: 700px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tr_rechtext {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: #27b0d6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.te_retit {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.te_retit img {
|
||||
float: left;
|
||||
margin-top: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.tr_rechtext p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tr_rechbox {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
}
|
||||
|
||||
.tr_rechhead {
|
||||
width: 94%;
|
||||
background: rgba(39, 176, 214, .15);
|
||||
padding: 20px;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-bottom: 40px
|
||||
}
|
||||
|
||||
.tr_rechhead>img {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 50%;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.tr_rechhead>p {
|
||||
line-height: 46px;
|
||||
float: left;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tr_rechhead p a {
|
||||
color: rgb(39, 176, 214);
|
||||
}
|
||||
|
||||
.tr_rechheadcion {
|
||||
float: right;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tr_rechheadcion img {
|
||||
width: 20px;
|
||||
float: left;
|
||||
margin-top: 13px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.tr_rechheadcion span {
|
||||
color: #565656;
|
||||
line-height: 46px;
|
||||
}
|
||||
|
||||
.tr_rechli ul li {
|
||||
float: left;
|
||||
border: 1px solid #d7d7d7;
|
||||
color: #555;
|
||||
font-size: 18px;
|
||||
padding: 15px 30px;
|
||||
margin-right: 30px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tr_rechli>span {
|
||||
color: rgb(39, 176, 214);
|
||||
}
|
||||
|
||||
.tr_rechcho {
|
||||
margin-bottom: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tr_rechcho img {
|
||||
height: 50px;
|
||||
padding: 10px;
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.tr_rechcho label {
|
||||
display: inline-block;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.tr_rechli {
|
||||
display: inline-block;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.tr_rechcho>span {
|
||||
color: #666;
|
||||
float: left;
|
||||
line-height: 50px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.tr_rechnum {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.tr_rechnum>span {
|
||||
line-height: 40px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.rechnum {
|
||||
color: #ec5a5b;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.tr_rechoth {
|
||||
display: none;
|
||||
height: 50px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.tr_rechoth>span {
|
||||
float: left;
|
||||
line-height: 50px;
|
||||
color: #666;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.tr_pay {
|
||||
cursor: pointer;
|
||||
padding: 12px 30px;
|
||||
background: #27b0d6;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.tr_pay:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tr_paybox {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.tr_paybox span {
|
||||
margin-left: 10px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
select.ui-choose {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul.ui-choose {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
border: 1px solid transparent;
|
||||
font: 100 16px/30px 'microsoft yahei';
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
vertical-align: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
ul.ui-choose:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
ul.ui-choose>li {
|
||||
width: 96px;
|
||||
height: 50px;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
line-height: 48px;
|
||||
color: #999;
|
||||
background: #fff;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
margin-right: 30px;
|
||||
text-align: center;
|
||||
border: 2px solid #CCCCCC;
|
||||
}
|
||||
|
||||
ul.ui-choose>li:hover {
|
||||
z-index: 4;
|
||||
border-color: #27b0d6;
|
||||
color: #27b0d6;
|
||||
}
|
||||
|
||||
ul.ui-choose>li.selected {
|
||||
z-index: 3;
|
||||
border-color: #27b0d6;
|
||||
color: #27b0d6;
|
||||
background: transparent url("../images/success1.png") no-repeat right bottom;
|
||||
}
|
||||
|
||||
ul.ui-choose>li.disabled {
|
||||
z-index: 2;
|
||||
background-color: #f2f2f2;
|
||||
color: #aaa;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
ul.ui-choose>li.disabled:hover {
|
||||
border-color: #aaa;
|
||||
}
|
||||
|
||||
ul.ui-choose>li.selected.disabled {
|
||||
z-index: 2;
|
||||
background-color: #8FC7FF;
|
||||
color: #fff;
|
||||
cursor: not-allowed;
|
||||
border-color: #8FC7FF;
|
||||
}
|
||||
|
||||
ul.choose-type-right>li.selected {
|
||||
color: #0080ff;
|
||||
background: transparent url("./icon-selected.png") no-repeat right bottom;
|
||||
}
|
||||
|
||||
ul.ui-choose.choose-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
ul.ui-choose.choose-flex>li {
|
||||
flex: 1;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.tr_prompt {
|
||||
padding: 4px 10px;
|
||||
background: rgba(0, 0, 0, .3);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tr_rechoth p {
|
||||
display: inline-block;
|
||||
margin-left: 30px;
|
||||
color: #27b0d6;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.am-checkbox+.am-checkbox,
|
||||
.am-radio+.am-radio {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.am-radio .am-icon-unchecked,
|
||||
.am-radio .am-icon-checked {
|
||||
top: 13px;
|
||||
}
|
||||
|
||||
.am-radio {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.am-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.am-form input[type=number] {
|
||||
width: 100px;
|
||||
background: #fff;
|
||||
border: 2px solid #CCCCCC;
|
||||
font-size: 16px;
|
||||
height: 48px;
|
||||
border-radius: 4px;
|
||||
float: left;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.am-ucheck-checkbox:checked+.am-ucheck-icons,
|
||||
.am-ucheck-radio:checked+.am-ucheck-icons {
|
||||
color: #27b0d6;
|
||||
}
|
||||
|
||||
.am-form input[type=number]:focus {
|
||||
border-color: #27b0d6;
|
||||
}
|
||||
|
||||
.am-form-group label {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tr_rechli label{
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.am-radio-inline {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.am-radio-inline input {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.am-radio-inline input[type=radio] {
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.am-form-group .am-alert {
|
||||
float: left;
|
||||
width: auto;
|
||||
margin: auto;
|
||||
border-radius: 4px;
|
||||
line-height: 48px;
|
||||
padding: 0;
|
||||
color: #ec5a5b;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.am-form-error .am-radio-inline,
|
||||
.am-form-error label {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.am-form-success .am-radio-inline,
|
||||
.am-form-success label {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.am-field-valid {
|
||||
border-color: #ccc !important;
|
||||
}
|
||||
|
||||
.tr_rechcho label {
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.am-form-success [class*=icon-] {
|
||||
color: #27b0d6;
|
||||
}
|
||||
|
||||
.am-form-error [class*=icon-] {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.am-form-group>label>span {
|
||||
color: #999;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 255 B |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Vendored
+1
File diff suppressed because one or more lines are too long
@@ -0,0 +1,300 @@
|
||||
/**
|
||||
* ui-choose通用选择插件
|
||||
* 基于jQuery
|
||||
*/
|
||||
; + function($) {
|
||||
"use strict";
|
||||
// 默认实例化配置
|
||||
var defaults = {
|
||||
itemWidth: null,
|
||||
skin: '',
|
||||
multi: false,
|
||||
active: 'selected',
|
||||
full: false, //choose的宽度，默认为null将自动获取choose的宽度；
|
||||
colNum: null, // 每行显示的个数
|
||||
dataKey: 'ui-choose', //实例化后的data键值，方便后续通过data('ui-choose')取出；
|
||||
change: null, //choose值改变时的回调；
|
||||
click: null //choose元素点击时的回调，diabled时不发生。
|
||||
};
|
||||
/**
|
||||
* ui-choose插件
|
||||
*/
|
||||
$.fn.ui_choose = function(options) {
|
||||
var _this = $(this),
|
||||
_num = _this.length;
|
||||
// 当要实例的对象只有一个时，直接实例化返回对象；
|
||||
if (_num === 1) {
|
||||
return new UI_choose(_this, options);
|
||||
};
|
||||
// 当要实例的对象有多个时，循环实例化，不返回对象；
|
||||
if (_num > 1) {
|
||||
_this.each(function(index, el) {
|
||||
new UI_choose($(el), options);
|
||||
})
|
||||
}
|
||||
// 当元素个数为0时，不执行实例化。
|
||||
};
|
||||
|
||||
/**
|
||||
* UI_choose对象
|
||||
* @param {[jQuery]} el [jQuery选择后的对象，此处传入的为单个元素]
|
||||
* @param {[object]} opt [设置的参数]
|
||||
*/
|
||||
function UI_choose(el, opt) {
|
||||
this.el = el;
|
||||
this._tag = this.el.prop('tagName').toLowerCase();
|
||||
this._opt = $.extend({}, defaults, opt);
|
||||
|
||||
return this._init();
|
||||
}
|
||||
|
||||
// UI_choose 原型链扩展。
|
||||
UI_choose.prototype = {
|
||||
|
||||
// init初始化;
|
||||
_init: function() {
|
||||
var _data = this.el.data(this._opt.dataKey);
|
||||
// 如果已经实例化了，则直接返回
|
||||
if (_data)
|
||||
return _data;
|
||||
else
|
||||
this.el.data(this._opt.dataKey, this);
|
||||
|
||||
// 设置是否多选
|
||||
if (this._tag == 'select') {
|
||||
this.multi = this.el.prop('multiple');
|
||||
} else {
|
||||
this.multi = this.el.attr('multiple') ? !!this.el.attr('multiple') : this._opt.multi;
|
||||
}
|
||||
|
||||
// 根据不同的标签进行不同的元素组建
|
||||
var _setFunc = this['_setHtml_' + this._tag];
|
||||
if (_setFunc) {
|
||||
_setFunc.call(this);
|
||||
}
|
||||
if (this._opt.full) {
|
||||
this._wrap.addClass('choose-flex');
|
||||
}
|
||||
this._wrap.addClass(this._opt.skin);
|
||||
if (this.multi && !this._opt.skin)
|
||||
this._wrap.addClass('choose-type-right');
|
||||
this._bindEvent(); // 绑定事件
|
||||
},
|
||||
|
||||
// 组建并获取相关的dom元素-ul;
|
||||
_setHtml_ul: function() {
|
||||
this._wrap = this.el;
|
||||
this._items = this.el.children('li');
|
||||
if (this._opt.itemWidth) {
|
||||
this._items.css('width', this._opt.itemWidth);
|
||||
}
|
||||
},
|
||||
|
||||
// 组建并获取相关的dom元素-select;
|
||||
_setHtml_select: function() {
|
||||
var _ohtml = '<ul class="ui-choose">';
|
||||
this.el.find('option').each(function(index, el) {
|
||||
var _this = $(el),
|
||||
_text = _this.text(),
|
||||
_value = _this.prop('value'),
|
||||
_selected = _this.prop('selected') ? 'selected' : '',
|
||||
_disabled = _this.prop('disabled') ? ' disabled' : '';
|
||||
_ohtml += '<li title="' + _text + '" data-value="' + _value + '" class="' + _selected + _disabled + '">' + _text + '</li> ';
|
||||
});
|
||||
_ohtml += '</ul>';
|
||||
this.el.after(_ohtml);
|
||||
|
||||
this._wrap = this.el.next('ul.ui-choose');
|
||||
this._items = this._wrap.children('li');
|
||||
if (this._opt.itemWidth) {
|
||||
this._items.css('width', this._opt.itemWidth);
|
||||
}
|
||||
this.el.hide();
|
||||
},
|
||||
|
||||
// 绑定事件；
|
||||
_bindEvent: function() {
|
||||
var _this = this;
|
||||
_this._wrap.on('click', 'li', function() {
|
||||
var _self = $(this);
|
||||
if (_self.hasClass('disabled'))
|
||||
return;
|
||||
|
||||
if (!_this.multi) { // single select
|
||||
var _val = _self.attr('data-value') || _self.index();
|
||||
_this.val(_val);
|
||||
_this._triggerClick(_val, _self);
|
||||
} else { // multiple
|
||||
_self.toggleClass(_this._opt.active);
|
||||
var _val = [];
|
||||
_this._items.each(function(index, el) {
|
||||
var _el = $(this);
|
||||
if (_el.hasClass(_this._opt.active)) {
|
||||
var _valOrIndex = _this._tag == 'select' ? _el.attr('data-value') : _el.index();
|
||||
_val.push(_valOrIndex);
|
||||
}
|
||||
});
|
||||
_this.val(_val);
|
||||
_this._triggerClick(_val, _self);
|
||||
}
|
||||
});
|
||||
return _this;
|
||||
},
|
||||
|
||||
// change 触发；value：值 ；item：选中的option；
|
||||
_triggerChange: function(value, item) {
|
||||
item = item || this._wrap;
|
||||
this.change(value, item);
|
||||
if (typeof this._opt.change == 'function')
|
||||
this._opt.change.call(this, value, item);
|
||||
},
|
||||
|
||||
// click 触发；value：值 ；item：选中的option；
|
||||
_triggerClick: function(value, item) {
|
||||
this.click(value, item);
|
||||
if (typeof this._opt.click == 'function')
|
||||
this._opt.click.call(this, value, item);
|
||||
},
|
||||
|
||||
// 获取或设置值:select
|
||||
_val_select: function(value) {
|
||||
// getValue
|
||||
if (arguments.length === 0) {
|
||||
return this.el.val();
|
||||
}
|
||||
// setValue
|
||||
var _oValue = this.el.val();
|
||||
if (!this.multi) { // single select
|
||||
var _selectedItem = this._wrap.children('li[data-value="' + value + '"]');
|
||||
if (!_selectedItem.length)
|
||||
return this;
|
||||
this.el.val(value);
|
||||
_selectedItem.addClass(this._opt.active).siblings('li').removeClass(this._opt.active);
|
||||
if (value !== _oValue) {
|
||||
this._triggerChange(value);
|
||||
}
|
||||
} else { // multiple select
|
||||
if (value == null || value == '' || value == []) {
|
||||
this.el.val(null);
|
||||
this._items.removeClass(this._opt.active);
|
||||
} else {
|
||||
value = typeof value == 'object' ? value : [value];
|
||||
this.el.val(value);
|
||||
this._items.removeClass(this._opt.active);
|
||||
for (var i in value) {
|
||||
var _v = value[i];
|
||||
this._wrap.children('li[data-value="' + _v + '"]').addClass(this._opt.active);
|
||||
}
|
||||
}
|
||||
if (value !== _oValue) {
|
||||
this._triggerChange(value);
|
||||
}
|
||||
}
|
||||
// multiple
|
||||
return this;
|
||||
},
|
||||
|
||||
// 获取或设置值:ul
|
||||
_val_ul: function(index) {
|
||||
// getValue
|
||||
if (arguments.length === 0) {
|
||||
var _oActive = this._wrap.children('li.' + this._opt.active);
|
||||
if (!this.multi) { // single select
|
||||
return _oActive.index() == -1 ? null : _oActive.index();
|
||||
} else { // single select
|
||||
if (_oActive.length == 0) {
|
||||
return null;
|
||||
}
|
||||
var _this = this,
|
||||
_val = [];
|
||||
_oActive.each(function(index, el) {
|
||||
var _el = $(el);
|
||||
if (_el.hasClass(_this._opt.active)) {
|
||||
_val.push(_el.index());
|
||||
}
|
||||
});
|
||||
return _val;
|
||||
}
|
||||
}
|
||||
// setValue
|
||||
var _oIndex = this._val_ul();
|
||||
if (!this.multi) { // single select
|
||||
var _selectedItem = this._wrap.children('li').eq(index);
|
||||
if (!_selectedItem.length)
|
||||
return this;
|
||||
_selectedItem.addClass(this._opt.active).siblings('li').removeClass(this._opt.active);
|
||||
if (index !== _oIndex) {
|
||||
this._triggerChange(index, _selectedItem);
|
||||
}
|
||||
} else { // multiple select
|
||||
if (index == null || index == '' || index == []) {
|
||||
this._items.removeClass(this._opt.active);
|
||||
} else {
|
||||
index = typeof index == 'object' ? index : [index];
|
||||
this._items.removeClass(this._opt.active);
|
||||
for (var i in index) {
|
||||
var _no = index[i];
|
||||
this._wrap.children('li').eq(_no).addClass(this._opt.active);
|
||||
}
|
||||
}
|
||||
if (index !== _oIndex) {
|
||||
this._triggerChange(index);
|
||||
}
|
||||
}
|
||||
// multiple
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
// 获取或设置值
|
||||
val: function() {
|
||||
return this['_val_' + this._tag].apply(this, arguments);
|
||||
// ul
|
||||
/*var _oIndex = this._wrap.children('li.' + this._opt.active).index();
|
||||
if (arguments.length === 0) {
|
||||
return _oIndex == -1 ? null : _oIndex;
|
||||
}
|
||||
var _nItem = this._items.eq(valueOrIndex);
|
||||
if (this._tag == 'select') {
|
||||
_nItem = this._wrap.find('li[data-value="' + valueOrIndex + '"]');
|
||||
this.el.val(valueOrIndex);
|
||||
}
|
||||
|
||||
if (valueOrIndex === null) {
|
||||
if (this.val() !== valueOrIndex)
|
||||
this._triggerChange(valueOrIndex);
|
||||
this._items.removeClass(this._opt.active);
|
||||
return;
|
||||
}
|
||||
// if (valueOrIndex < this._items.length && _nItem.length > 0) {
|
||||
if (this.multi) {
|
||||
_nItem.toggleClass(this._opt.active);
|
||||
} else {
|
||||
_nItem.addClass(this._opt.active).siblings('li').removeClass(this._opt.active);
|
||||
}
|
||||
if (this._tag == 'select') {
|
||||
_oIndex = _oValue;
|
||||
}
|
||||
_oIndex != valueOrIndex ? this._triggerChange(valueOrIndex, _nItem) : null;
|
||||
// }*/
|
||||
},
|
||||
|
||||
// 值改变事件；
|
||||
change: function(value, item) {},
|
||||
|
||||
// 点击事件；
|
||||
click: function(value, item) {},
|
||||
|
||||
// 隐藏
|
||||
hide: function() {
|
||||
this._wrap.hide();
|
||||
return this;
|
||||
},
|
||||
|
||||
// 显示
|
||||
show: function() {
|
||||
this._wrap.show();
|
||||
return this;
|
||||
}
|
||||
};
|
||||
}(jQuery);
|
||||
Reference in New Issue
Block a user