META-INF.resources.asset.ajaxjs-ui.js.widgets.page.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.
/**
* 页面常见组件
*/
// 全屏幕加载指示器
// 推荐一款loading图标的网站，https://icons8.com/ preloaders/
Vue.component('aj-page-fullscreen-loading-indicator', {
template : '',
beforeCreate : function () {
document.onreadystatechange = function () {
if(document.readyState === "complete") {
aj(".aj-fullscreen-loading").classList.add('fadeOut');
}
}
}
});
// 分享
Vue.component('aj-page-share', {
template :
'',
computed : {
title : function() {
return encodeURIComponent(document.title);
},
url : function() {
return document.location.href;
}
}
});
// 字体大小
Vue.component('aj-adjust-font-size', {
props : {
articleTarget : { // 正文所在的位置，通过 CSS Selector 定位
type: String,
required: false,
default : 'article p'
}
},
template :
'\
字体大小\
\
\
\
\
\
',
methods : {
onClk : function(e) {
var el = e.target, target = el.innerHTML;
if(el.tagName != 'LABEL')
el = el.up('label');
if(el.innerHTML.indexOf('大') != -1) {
this.setFontSize('12pt');
}else if(el.innerHTML.indexOf('中') != -1) {
this.setFontSize('10.5pt');
}else if(el.innerHTML.indexOf('小') != -1) {
this.setFontSize('9pt');
}
},
setFontSize : function (fontSize) {
aj(this.$props.articleTarget, function(p){
p.style.fontSize = fontSize;
});
}
}
});
// 页面按钮
Vue.component('aj-misc-function', {
props : {
articleTarget : { // 要打印的区域
type: String,
required: false,
default : 'article'
}
},
template :
'',
methods : {
// 打印页面
printContent : function () {
var printHTML = "\
\
\
\
- {{item.name}}
\
\
\
\
\
',
props: {
isVertical : Boolean, // 是否垂直方向的布局，默认 false,
initItems : Array
},
data : function() {
return {
selected : 0,
items : this.initItems || [
{name : '杜甫：望岳', content : '岱宗夫如何，齊魯青未了。
\
造化鐘神秀，陰陽割昏曉。
\
蕩胸生層云，決眥入歸鳥，
\
會當凌絕頂，一覽眾山小。'
},
{name : '资质证照', content : '之所以如此，端在于中国传统中存在着发达的契约。予谓不信，可看看早年由福建师范大学内部印行的两册本《明清福建经济契约文书选集》，中国社会科学出版社出版的《自贡盐业契约档案选集》，花山文艺出版社出版的共二十册的《徽州千年契约文书》;再看看近些年由安徽师范大学出版社出版的十卷本的《千年徽州契约文书集萃》，广西师范大学出版社出版的四辑共四十册《徽州文书》、三辑共三十册的《清水江文书》，民族出版社出版的多卷本《贵州清水江流域明清契约文书》，凤凰出版社出版的《敦煌契约文书辑校》，天津古籍出版社出版的《清代宁波契约文书辑校》，浙江大学出版社出版的《清代浙东契约文书辑选》……不难发现，中国传统契约文书的整理出版，完全可称为如雨后春笋般在迅速成长!'},
{name : '资质证照', content : '笔者出于个人兴趣，在关注这些已经整理出版的、卷帙浩繁的契约文献的同时，也游走各地，或亲自搜集各类契约文书，或到一些地方档案馆查看其业已编辑成册、内部印行的传统契约文书，如在台湾宜兰、高雄，山东青岛、威海，贵州锦屏、从江等地档案机构或民间都见到过相关契约文献。记忆尤深的一次，是我和几位学生共游山东浮来山。在一处值班室里，居然发现有人以清代契约文本粘糊墙壁!足见只要我们稍加留意，在这个文明发展历经数千年的国度，不时可以发现一些令人称心的古代契约文献。'}
]
};
},
methods : {
changeTab : function(index) {
this.selected = index;
}
}
});
// 回到顶部
Vue.component('aj-back-top', {
template :
'回到顶部',
methods : {
go : function() {
// var b = 0;//作为标志位，判断滚动事件的触发原因，是定时器触发还是其它人为操作
// UserEvent2.onWinResizeFree(function(e) {
// if (b != 1) clearInterval(timer);
// b = 2;
// }, 'scroll');
this.$timerId && window.clearInterval(this.$timerId);
var top = speed = 0;
this.$timerId = window.setInterval(function() {
top = document.documentElement.scrollTop || document.body.scrollTop;
speed = Math.floor((0 - top) / 8);
if (top === 0)
clearInterval(this.$timerId);
else
document.documentElement.scrollTop = document.body.scrollTop = top + speed;
// b = 1;
}.bind(this), 30);
}
}
});
// 进度条
Vue.component('aj-process-line', {
template :
'\
\
\
{{index + 1}}{{item}}
\
\
\
',
props : {
items : {
type: Array,
default : function() {
return ['Step 1', 'Step 2', 'Step 3'];
}
}
},
data : function() {
return {
current : 0
}
},
methods: {
go : function(i) {
this.current = i;
},
perv: function() {
var perv = this.current - 1;
if (perv < 0)
perv = this.items.length - 1;
this.go(perv);
},
next: function() {
var next = this.current + 1;
if (this.items.length == next)
next = 0; // 循环
this.go(next);
}
}
});
// 悬浮显示大图。工厂方法
aj.imageEnlarger = function() {
var vue = new Vue({
el : document.body.appendChild(document.createElement('div')),
template:
'\
\
![]()
\
',
data : {
imgUrl: null
},
mounted: function(){// 不能用 onmousemove 直接绑定事件
document.addEventListener('mousemove', this.move.bind(this), false);
},
methods: {
move: function(e) {
if(this.imgUrl) {
var el = this.$el.$('div');
el.style.top = (e.pageY + 20)+ 'px';
el.style.left = (e.pageX - el.clientWidth) + 'px';
}
}
}
});
aj.imageEnlarger.singleInstance = vue; // 单例
return vue;
}
