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:

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

Code:

EasyUI Forum

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