历史版本3 :JS实现按钮文字竖排显示 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
方法一:JS设置按钮换行或竖排显示编辑
设置以后效果:
设置按钮的初始化后事件
setTimeout(function(){
//id为fr-btn-按钮控件名称的大写
$("#fr-btn-SUBMIT0").html('第一行'+'<br>'+'第二行')
},100);
如果自定义按钮的控件名称为pb_c,那么这里应该写为:fr_btn_PB_C
后面的'第一行'+'<br>'+'第二行',是按钮中要显示的文本内容。
延伸阅读:按钮的自定义设置
以下方法来源于cherishdqy大神。
8.0用下面的代码:
setTimeout(function() {
//id为fr-btn-按钮控件名称的大写
$('div[id="fr-btn-SEARCH"]').attr('title','测试测绘师');
}, 1000);
9.0和10.0可使用下面的代码,可自定义提示样式:
setTimeout(function() {
var oldTitle = null;
//id为fr-btn-按钮控件名称的大写
$('div[id="fr-btn-FORMSUBMIT0"]').bind('mouseover mouseout mousemove', function(event) {
var left = event.pageX;
var top = event.pageY;
var ele = event.target;
var title = '提示提示提示提示';
var type = event.originalEvent.type;
if (type == 'mouseover') {
oldTitle = title;
ele.title = '';
if (title != null) {
var showEle = $('', {
text: title,
class: 'showTitleBox'
}).css({
position: 'absolute',
top: top + 20,
left: left,
border: '1px solid #767676',
borderRadius: '5px',
background: '#FFFFFF',
color:'#575757',
fontFamily:'黑体',
fontSize:'10px',
padding:'2px 2px 2px 2px'
})
showEle.appendTo('body');
}
} else if (type == 'mouseout') {
ele.title = oldTitle;
$('.showTitleBox').remove();
} else if (type == 'mousemove') {
$('.showTitleBox').css({
top: top + 10,
left: left
})
}
})
}, 1000);
方法二:图片设置编辑
设置后效果:
设置原理及步骤:
目前各个版本中均无法直接通过按钮控件中的“按钮名称”设置为竖排显示。
那么通过设置按钮控件的背景将我们所需要显示的内容以图片的形式进行设置即可。
1、设计按钮显示内容的图片
大小根据自己需要的按钮大小设置,背景、文字等可根据需求自行设置
2、保存图片
背景支持格式为:gif、jpg、png、bmp。
3、设置初始背景
选择按钮控件设置背景为自定义,并点开初始背景设置。
4、选择图片
选择编辑好的图片打开,然后点击确定,即设置完成。
延伸思路:编辑
按此方法我们可以设置更多不同的按钮功能,例如:文字换行、指向提示、点击效果等。