Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

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'
    text_round:     'Round ',
    text_semifinal: 'Semifinal',
    text_final:     'Final',
    text_champion:  'Champion',
});

Author

About

Plugin jQuery for create tournament brackets

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages