Print Page - Timeline text alignment

Title: Timeline text alignment
Post by: jega on February 19, 2025, 05:12:36 AM

Hi.

Have tested timeline and thought about it in sports

To add:

contentPosition : [before/after] - if before, content is right aligned and when after, it's left aligned

Take a look at the imagefile attached

<body>
   <div class="easyui-panel" style="padding:10px">
   <div class="easyui-timeline" data-options="data:data,formatter:myFormatter"></div>
   </div>

<script type="text/javascript">

   $(document).ready(function(){

   })

   var data = [
      {content:'Goal',contentPosition:'before',time:'10:30',playerName:'Player #1',info:''},
      {content:'Penalty',contentPosition:'after',time:'12:00',playerName:'Player #2',info:'Yellow Card'},
      {content:'Goal',contentPosition:'before',time:'14:30',playerName:'Player #3',info:''},
      {content:'Goal',contentPosition:'after',time:'16:30',playerName:'Player #4',info:''}
   ]

   function myFormatter(row){
       var textContent = '<div>'+row.time+' - '+row.content+'</div>'
       textContent += '<div style="font-size:12px;opacity:0.5">'+row.playerName+'</div>'
       textContent += '<div style="font-size:12px;opacity:0.5">'+row.info+'</div>'
   return textContent;
   }

</script>

</body>

Title: Re: Timeline
Post by: jega on March 23, 2025, 03:32:56 AM

@jarry

Any solution ??

Title: Re: Timeline
Post by: jarry on March 25, 2025, 12:38:25 AM

The 'align' property is available now. Please look at this example.

https://www.jeasyui.com/demo/main/index.php?plugin=TimeLine&theme=material-teal&dir=ltr&pitem=Alternate&sort=asc

Title: Re: Timeline
Post by: jega on March 29, 2025, 04:53:42 PM

Thanks.

Just what i needed.

Title: Re: Timeline text alignment
Post by: jega on March 31, 2025, 12:30:40 AM

Hi Jarry

Have now tested it.

Well, i can see your demo sample makes an timeline with first node to the right and 2. nd node on the left side and so on. This sample i can't run on my server, it makes all nodes on the right side.

If i look at your sample, i can't see how you tell it which node should be on left and right side. What i want is, that i can choose where it should be.

As in my sample. A property contentPosition before or after

var data = [
{content:'Goal',contentPosition:'before',time:'10:30',playerName:'Player #1',info:''},
{content:'Penalty',contentPosition:'after',time:'12:00',playerName:'Player #2',info:'Yellow Card'},
{content:'Goal',contentPosition:'before',time:'14:30',playerName:'Player #3',info:''},
{content:'Goal',contentPosition:'after',time:'16:30',playerName:'Player #4',info:''}
]

And when i choose before, the node text should be right aligned and when after, it must be left aligned, og

Title: Re: Timeline text alignment
Post by: jarry on April 09, 2025, 08:50:08 PM

There are some solutions to display the alternate items.

1. Use the 'labelFormatter' and 'formatter' functions.

Code:

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>TimeLine - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>

<body>
	<div class="easyui-panel" style="padding:10px;">
		<div id="tt"></div>
	</div>
	<script>
		var data = [
			{ content: 'Goal', contentPosition: 'before', time: '10:30', playerName: 'Player #1', info: '' },
			{ content: 'Penalty', contentPosition: 'after', time: '12:00', playerName: 'Player #2', info: 'Yellow Card' },
			{ content: 'Goal', contentPosition: 'before', time: '14:30', playerName: 'Player #3', info: '' },
			{ content: 'Goal', contentPosition: 'after', time: '16:30', playerName: 'Player #4', info: '' }
		]
		$(function () {
			const formatContent = (row) => {
				return `
					<div>
						<div style="font-size:14px;font-weight:bold">${row.time} - ${row.content}</div>
						<div style="font-size:12px;color:#666">${row.playerName}</div>
						<div style="font-size:12px;color:#666">${row.info}</div>
					</div>
				`
			}
			$('#tt').timeline({
				data: data,
				formatter: (row) => {
					if (row.contentPosition == 'after') {
						return formatContent(row)
					} else {
						return '<div style="height:45px"></div>';
					}
				},
				labelFormatter: (row) => {
					if (row.contentPosition == 'before') {
						return formatContent(row)
					} else {
						return '';
					}
				}
			})
		})
	</script>
</body>

</html>

2. Set the 'align' property value to 'alternateReverse'.

Code:

const formatContent = (row) => {
	return `
		<div>
			<div style="font-size:14px;font-weight:bold">${row.time} - ${row.content}</div>
			<div style="font-size:12px;color:#666">${row.playerName}</div>
			<div style="font-size:12px;color:#666">${row.info}</div>
		</div>
	`
}
$('#tt').timeline({
	data: data,
	align: 'alternateReverse',
	formatter: formatContent
})

3. Custom the 'itemPosition' function to set the item position to 'left' or 'right'.

Code:

const formatContent = (row) => {
	return `
		<div>
			<div style="font-size:14px;font-weight:bold">${row.time} - ${row.content}</div>
			<div style="font-size:12px;color:#666">${row.playerName}</div>
			<div style="font-size:12px;color:#666">${row.info}</div>
		</div>
	`
}
$('#tt').timeline({
	data: data,
	align: 'alternate',
	formatter: formatContent,
	itemPosition: (row,index) => {
		return row.contentPosition=='after' ? 'left' : 'right';
	}
})

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: jega on February 19, 2025, 05:12:36 AM