Plugin jQuery for create tournament brackets
rounds = [
[
{
player1: {
name: "Player 1", //-- name of the player
winner: true, //-- add class winner to player container
ID: 1, //-- player ID
url: "http://custom_link.com" //-- action click to player
},
player2: {
name: "Player 2",
ID: 2
},
},
],
[
{
player1: { name: "Player 1", winner: true, ID: 1, url: "http://custom_link.com" },
},
]
];
$('selector').brackets({
rounds: rounds //-- JSON with matches of the each round
});
------------------------------------------
Result
------------------------------------------
-----------
| Player 1 |-------,
----------- -----------
| Player 1 |
----------- -----------
| Player 2 |-------'
-----------var titles = ['Ronda 1', 'Ronda 2', 'Ronda 3', 'Ronda 4', 'Ronda 5']; //-- example titles
//-- All colors can be hexadecimal or string name
$(".brackets").brackets({
titles: titles, //-- (Array) with titles for each round -- default: false -- if the value is true, then add titles automatically
rounds: rounds, //-- (Required) Array with matches ( JSON ) for each round
color_title: 'black', //-- (String) Color of the title text
border_color: '#00F', //-- (String) Border color of the line of brackets
color_player: 'black', //-- (String) Color of the player text (name)
bg_player: 'white', //-- (String) Background color of the player container
color_player_hover: 'white', //-- (String) Color of the player text (name) when mouse is hover
bg_player_hover: 'blue', //-- (String) Background color of the player container when mouse is hover
border_radius_player: '10px', //-- (String) Border radius of the player container
border_radius_lines: '10px', //-- (String) Border radius of the lines that join rounds
text_round: 'Battle No.', //-- (String) Text used instead of 'Round '
text_semifinal: 'Semifinal', //-- (String) Text used instead of 'Semifinal'
text_final: 'Final', //-- (String) Text used instead of 'Final'
text_champion: 'The bast', //-- (String) Text used instead of 'Champion'
});$(".brackets").brackets({
titles: false, //-- If the value is true, then add titles automatically
color_title: 'black',
border_color: 'black',
color_player: 'black',
bg_player: 'white',
color_player_hover: 'black',
bg_player_hover: 'white',
border_radius_player: '0px',
border_radius_lines: '0px'
text_round: 'Round ',
text_semifinal: 'Semifinal',
text_final: 'Final',
text_champion: 'Champion',
});