针对您的问题,我准备了以下完整攻略,希望能够帮到您:
jQWidgets jqxScheduler touchRowsHeight属性详解
一、什么是touchRowsHeight
属性?
在jQWidgets jqxScheduler中,touchRowsHeight
属性是指触摸设备上移动到行时所设置的行高,默认值为35。使用此属性可自定义行高度以适应您的应用程序。
二、如何使用touchRowsHeight
属性?
在使用touchRowsHeight
属性之前,您需要在项目中引用jQWidgets相关的js和css文件。然后,您可以根据您的需要进行以下操作:
1. 在初始化jqxScheduler之前,设置touchRowsHeight
属性的值为40px。
$(document).ready(function () {
// 定义样式
$("<style type='text/css'>.jqx-grid-cell-text-align-right{ text-align: right;}</style>").appendTo(document.head);
$("<style type='text/css'>.jqx-right-align{ text-align: right;}</style>").appendTo(document.head);
// 初始化jqxScheduler
var appointments = new Array();
//...省略内容...
$('#scheduler').jqxScheduler({
//...省略内容...
touchRowsHeight: 40
});
});
2. 在运行时调用jqxScheduler的touchRowsHeight
方法修改行高。
$("#scheduler").jqxScheduler('touchRowsHeight', 60);
三、两条使用示例
下面我们来看两个使用touchRowsHeight
属性的示例:
示例1:在初始化jqxScheduler之前设置touchRowsHeight
属性,行高为40px。
$(document).ready(function () {
// 定义样式
$("<style type='text/css'>.jqx-grid-cell-text-align-right{ text-align: right;}</style>").appendTo(document.head);
$("<style type='text/css'>.jqx-right-align{ text-align: right;}</style>").appendTo(document.head);
// 初始化jqxScheduler
var appointments = new Array();
//...省略内容...
$('#scheduler').jqxScheduler({
date: new $.jqx.date(2017, 12, 1),
width: '100%',
height: 600,
//...省略内容...
touchRowsHeight: 40
});
});
示例2:在运行时通过调用touchRowsHeight
方法修改行高,行高为60px。
$(document).ready(function () {
// 定义样式
$("<style type='text/css'>.jqx-grid-cell-text-align-right{ text-align: right;}</style>").appendTo(document.head);
$("<style type='text/css'>.jqx-right-align{ text-align: right;}</style>").appendTo(document.head);
// 初始化jqxScheduler
var appointments = new Array();
//...省略内容...
$('#scheduler').jqxScheduler({
date: new $.jqx.date(2017, 12, 1),
width: '100%',
height: 600,
//...省略内容...
touchRowsHeight: 40
});
// 修改行高
$("#scheduler").jqxScheduler('touchRowsHeight', 60);
});
以上就是touchRowsHeight
属性的详细攻略,希望对您有所帮助。