🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Brackets.js is a simple lightweight jQuery plugin used to draw single elimination tournament brackets on your web page.

Tournament-Bracket

Documentation

jQuery Brackets

Plugin jQuery for create tournament brackets

Simple usage:

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 |-------'  ----------- 

Advance usage:

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         }); 

Default values:

$(".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' }); 

Author


You May Also Like