jQWidgets es un marco de JavaScript para crear aplicaciones basadas en web para PC y dispositivos móviles. Es un marco muy potente, optimizado, independiente de la plataforma y ampliamente compatible. El widget jqxScheduler se usa para mostrar un conjunto de citas en días, semanas, meses, día de la línea de tiempo, semana de la línea de tiempo y vistas de mes de la línea de tiempo.
La propiedad touchRowsHeight se usa para establecer o devolver la altura de las filas en el jqxScheduler que se muestra en el dispositivo táctil. Es de tipo número y su valor por defecto es 37.
Sintaxis:
-
Establezca la propiedad touchRowsHeight.
$("Selector").jqxScheduler({ touchRowsHeight: 40 });
-
Devuelve la propiedad touchRowsHeight.
var touchRowsHeight = $('Selector').jqxScheduler('touchRowsHeight');
Archivos vinculados: descargue jQWidgets desde el enlace dado. En el archivo HTML, busque los archivos de script en la carpeta descargada.
<link rel=”hoja de estilo” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min .js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscheduler.js ”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscheduler.api.js”></script>
Ejemplo: El siguiente ejemplo ilustra la propiedad jqxScheduler touchRowsHeight en jQWidgets.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"> </script> <script type="text/javascript" src="jqwidgets/jqx-all.js"> </script> <script type="text/javascript" src="jqwidgets/jqxscheduler.js"> </script> <script type="text/javascript" src="jqwidgets/jqxscheduler.api.js"> </script> </head> <body> <center> <h1 style="color:green"> GeeksforGeeks </h1> <h3>jQWidgets jqxScheduler touchRowsHeight property </h3> <div id="jqxs"></div> <div> <input type="button" id="jqxBtn" style="margin-top: 25px" value="Click here" /> </div> <br> <div id="log"></div> </center> <script type="text/javascript"> $(document).ready(function () { var onlineClasses = new Array(); var day1 = { i: "1", Topic: "C functions", schedule: 'room_no. 1', begin: new Date(2021, 09, 13, 11), final: new Date(2021, 09, 13, 12) } var day2 = { i: "2", Topic: "C++", schedule: 'room_no. 2', begin: new Date(2021, 09, 14, 11), final: new Date(2021, 09, 14, 12) } var day3 = { i: "3", Topic: "Java", schedule: 'room_no. 3', begin: new Date(2021, 09, 15, 10), final: new Date(2021, 09, 15, 14) } var day4 = { i: "4", Topic: "Scala library functions", schedule: 'room_no. 1', begin: new Date(2021, 09, 16, 11), final: new Date(2021, 09, 16, 13) } var day5 = { i: "5", Topic: "Test", schedule: 'room_no. 3', begin: new Date(2021, 09, 17, 10), final: new Date(2021, 09, 17, 12) } onlineClasses.push(day1, day2, day3, day4, day5); var src = { dataType: "array", localData: onlineClasses, id: 'i' }; $("#jqxs").jqxScheduler({ source: new $.jqx.dataAdapter(src), width: "400px", height: "350px", date: new $.jqx.date(2021, 10, 13), touchRowsHeight: 27, views: [ 'weekView' ], resources: { colorScheme: "scheme10", dataField: "schedule", source: new $.jqx.dataAdapter(src) }, appointmentDataFields: { id: "i", subject: "Topic", from: "begin", to: "final", resourceId: 'schedule', }, }); $("#jqxBtn").jqxButton({ width: "140px", height: "30px", }); $('#jqxs').jqxScheduler('ensureAppointmentVisible', '1'); $("#jqxBtn").on("click", function () { var trh = $('#jqxs').jqxScheduler('touchRowsHeight'); $('#log').text("Rows height on touch device: " + trh); }); }); </script> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por nidhi1352singh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA