META-INF.resources.asset.ajaxjs-ui.js.widgets.form.js Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of ajaxjs-web Show documentation
Show all versions of ajaxjs-web Show documentation
AJAXJS Web aims to full-stack, not only the server-side framework, but also integrates the front-end library. It's written in HTML5 + Java, a successor to the JVM platform, efficient, secure, stable, cross-platform and many other advantages, but it abandoned the traditional enterprise architecture brought about by the large and bloated, emphasizing the lightweight, and fast, very suitable for the Internet fast application.
/**
* 表單控件
*/
// 图片验证码
Vue.component('aj-page-captcha', {
props : {
imgSrc : {
type: String, // 生成图片验证码地址
required: false,
},
fieldName : { // 提交的字段名
type: String,
required: false,
default : 'captcha'
}
},
template :
'\
\
![]( "点击刷新图片")
\
\
',
methods : {
onClk : function(e) {
var img = e.target;
img.src = img.src.replace(/\?\d+$/, '') + '?' + new Date().valueOf();
}
}
});
// 日期选择器
Vue.component('aj-form-calendar', {
data: function() {
return {
year : 2017,
month : 2,
day : 1
};
},
props : {
},
template :
'',
// 2012-07-08
// firefox中解析 new Date('2012/12-23') 不兼容，提示invalid date 无效的日期
// Chrome下可以直接将其格式化成日期格式，且时分秒默认为零
// var arr = date.split('-'), now = new Date(arr[0], arr[1] - 1, arr[2], " ", " ", " ");
mounted : function () {
aj.apply(this, this.getDate('now'));
this.render();
},
methods : {
// 画日历
render : function () {
var el = this.$el;
var arr = this.getDateArr();// 用来保存日期列表
this.days = [];// 清空原来的日期对象列表
var frag = document.createDocumentFragment();// 插入日期
while (arr.length) {
var row = document.createElement("tr"); // 每个星期插入一个 tr
for (var i = 1; i <= 7; i++) { // 每个星期有7天
var cell = document.createElement("td");
if (arr.length) {
var d = arr.shift();
if (d) {
cell.innerHTML = d;
cell.className = 'day day_' + this.year + '-' + this.month + '-' + d;
cell.title = this.year + '-' + this.month + '-' + d;
this.days[d] = cell;
var on = new Date(this.year, this.month - 1, d);
// 判断是否今日
if (this.isSameDay(on, this.date)) {
cell.classList.add('onToday');
this.onToday && this.onToday(cell);
}
// 判断是否选择日期
this.selectDay && this.onSelectDay && this.isSameDay(on, this.selectDay) && this.onSelectDay(cell);
}
}
row.appendChild(cell);
}
frag.appendChild(row);
}
// 先清空内容再插入(ie的table不能用innerHTML)
// while (el.hasChildNodes())
// el.removeChild(el.firstChild);
var tbody = el.$("table tbody");
tbody.innerHTML = '';
tbody.appendChild(frag);
// el.querySelector(".idCalendarPre").onclick = this.PreMonth.bind(this);
// el.querySelector(".idCalendarNext").onclick = this.NextMonth.bind(this);
// el.querySelector(".idCalendarNow").onclick = this.NowMonth.bind(this);
this.onFinish && this.onFinish();
},
setYear : function(type) {
this.year = this.getDate(type).year;
},
nextYear : function() {
},
getDate: function (dateType) {
var now = new Date(), date, nowYear = now.getFullYear(), nowMonth = now.getMonth() + 1;
switch (dateType) {
case 'now':// 当前月
date = now;
break;
case 'preMonth':// 上一月
date = new Date(nowYear, nowMonth - 2, 1);
break;
case 'nextMonth':// 下一月
date = new Date(nowYear, nowMonth, 1);
break;
case 'preYear':// 上一年
date = new Date(nowYear - 1, nowMonth - 1, 1);
break;
case 'nextYear':// 下一年
date = new Date(nowYear + 1, nowMonth - 1, 1);
break;
}
return {
date : date,
year : date.getFullYear(),
month : date.getMonth() + 1,
};
},
getDateArr: function () {
var arr = [];
// 用当月第一天在一周中的日期值作为 当月离第一天的天数
for (var i = 1, firstDay = new Date(this.year, this.month - 1, 1).getDay(); i <= firstDay; i++)
arr.push(0);
// 用当月最后一天在一个月中的日期值作为当月的天数
for (var i = 1, monthDay = new Date(this.year, this.month, 0).getDate(); i <= monthDay; i++)
arr.push(i);
return arr;
},
pickDay : function(e) {
var el = e.target, date = el.title;
this.$emit('pick-date', date);
return date;
},
/**
* 判断是否同一日
*/
isSameDay: function (d1, d2) {
return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());
}
}
});
//帶有 input 輸入框的
Vue.component('aj-form-calendar-input', {
data : function(){
return {
date : this.fieldValue
}
},
props : {
fieldName : { // 表单 name，字段名
type: String,
required: true
},
fieldValue : {
type: String,// 表单值，可选的
required: false
},
positionFixed : Boolean // 是否采用固定定位
},
template :
'\
\
\
包含有
Vue.component('aj-form-html-editor', {
template : '',
props : {
fieldName : { // 表单 name，字段名
type: String,
required: true
},
content : { // 内容
type: String,
required: false
},
basePath : { // iframe 的 /gi, ''); // Style tags
html = html.replace(//gi, ''); // Script tags
html = html.replace(//gi, ''); // HTML comments
return html;
},
// 切換 HTML 編輯 or 可視化編輯
setMode : function () {
if (this.mode == 'iframe') {
this.iframeEl.classList.add('hide');
this.sourceEditor.classList.remove('hide');
this.sourceEditor.value = this.iframeBody.innerHTML;
this.mode = 'text';
this.grayImg(true);
} else {
this.iframeEl.classList.remove('hide');
this.sourceEditor.classList.add('hide');
this.iframeBody.innerHTML = this.sourceEditor.value;
this.mode = 'iframe';
this.grayImg(false);
}
},
// 使图片灰色
grayImg: function (isGray) {
this.toolbarEl.$('span', function(item) {
if(item.className.indexOf('switchMode') != -1) {
item.style.color = isGray ? 'red' : '';
} else {
item.style.filter = isGray ? 'grayscale(100%)' : '';
}
});
},
onFontfamilyChoserClk : function(e) {
var el = e.target;
this.format('fontname', el.innerHTML);
// 如何解决点击之后马上隐藏面板？由于 js（单击事件） 没有控制 CSS 的 :hover 伪类的方法，故所以必须使用以下技巧：
var menuPanel = el.parentNode;
menuPanel.style.display = 'none';
setTimeout(function() {
menuPanel.style.display = '';
}, 300);
},
onFontsizeChoserClk : function(e) {
var el = e.target;
for(var els = e.currentTarget.children, i = 0, j = els.length; i < j; i++)
if(el == els[i]) break;
this.format('fontsize', i);
},
onFontColorPicker: function(e) {
var color = e.target.title;
this.format('foreColor', color);
},
onFontBgColorPicker: function(e) {
var color = e.target.title;
this.format('backColor', color);
},
createColorPickerHTML : function() {
// 定义变量
var cl = ['00', '33', '66', '99', 'CC', 'FF'], a, b, c, d, e, f, i, j, k, T;
// 创建head
var h = '颜色选择\
';// 创建body [6 x 6的色盘]
for (var i = 0; i < 6; ++i) {
h += '';
for (var j = 0, a = cl[i]; j < 6; ++j) {
h += '';
for (var k = 0, c = cl[j]; k < 6; ++k) {
b = cl[k];
e = k == 5 && i != 2 && i != 5 ? ';border-right:none;' : '';
f = j == 5 && i < 3 ? ';border-bottom:none' : '';
d = '#' + a + b + c;
T = document.all ? ' ' : '';
h += '' + T + ' ';
}
h += ' ';
}
h += '
';
}
h += '
';
return h;
}
}
});