1
Je veux le type de support ci-dessous Jquery en utilisant la bibliothèque Jquery Support, Ce que je dois faire?Deux faces Tournoi Support
A
Répondre
1
J'ai essayé ce code
<!DOCTYPE html>
<html>
<head>
<title>Tournament Bracket Generator</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="assets/jquery.bracket.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/jquery.bracket.min.css" />
<script type="text/javascript">
$(function() {
var demos = ['save', 'save1', 'final']
$.each(demos, function (i, d) {
var demo = $('div#' + d)
$('<div class="demo"></div>').appendTo(demo)
})
})
</script>
</head>
<body>
<div id="main">
<div id="save" style="display: inline-block;">
</div>
<div id="final" style="display: inline-block;">
</div>
<div id="save1" style="display: inline-block;float: right">
</div>
</div>
<script type="text/javascript">
var finalData = {
teams: [
[
{name: "Team 6", flag: 'in'},
{name: "Team 27", flag: 'in'}
],
],
results: [[[1, 0]]]
}
var saveData1 = {
teams: [
[
{name: "Team 6", flag: 'in'},
{name: "Team 27", flag: 'in'}
],
[
{name: "Team 7", flag: 'in'},
{name: "Team 26", flag: 'in'}
],
[
{name: "Team 8", flag: 'in'},
{name: "Team 25", flag: 'in'}
],
[
{name: "Team 9", flag: 'in'},
{name: "Team 24", flag: 'in'}
],
[
{name: "Team 10", flag: 'in'},
{name: "Team 23", flag: 'in'}
],
[
{name: "Team 11", flag: 'in'},
{name: "Team 22", flag: 'in'}
],
[
{name: "Team 12", flag: 'in'},
{name: "Team 21", flag: 'in'}
],
[
{name: "Team 5", flag: 'in'},
{name: "Team 28", flag: 'in'}
],
],
results: [[[1, 0], [1, 0], [1, 0], [1, 0], [1, 0], [1, 0], [1, 0], [1, 0]], [[1, 0], [1, 0], [1, 0], [1, 0]], [[1, 0], [1, 0]], [[1, 0, 'Final']]],
}
var saveData = {
"teams": [
[
{name: "Team1", flag: 'in'},
"BYE"
],
[
{name: "Team 13", flag: 'in'},
{name: "Team 20", flag: 'in'}
],
[
{name: "Team 14", flag: 'in'},
{name: "Team 19", flag: 'in'}
],
[
{name: "Team 2", flag: 'in'},
"BYE"
],
[
{name: "Team 3", flag: 'in'},
"BYE"
],
[
{name: "Team 15", flag: 'in'},
{name: "Team 18", flag: 'in'}
],
[
{name: "Team 16", flag: 'in'},
{name: "Team 17", flag: 'in'}
],
[
{name: "Team 4", flag: 'in'},
"BYE"
],
],
results: [[[1, 0], [1, 0], [1, 0], [1, 0], [1, 0], [1, 0], [1, 0], [1, 0]], [[1, 0], [1, 0], [1, 0], [1, 0]], [[1, 0], [1, 0]], [[0, 1]]],
};
/* Called whenever bracket is modified
*
* data: changed bracket object in format given to init
* userData: optional data given when bracket is created.
*/
function saveFn(data, userData) {
var json = jQuery.toJSON(data)
$('#saveOutput').text(JSON.stringify(data, null, 2))
/* You probably want to do something like this
jQuery.ajax("rest/"+userData, {contentType: 'application/json',
dataType: 'json',
type: 'post',
data: json})
*/
}
/*for flag*/
/* Edit function is called when team label is clicked */
function edit_fn(container, data, doneCb) {
var input = $('<input type="text">')
input.val(data ? data.flag + ':' + data.name : '')
container.html(input)
input.focus()
input.blur(function() {
var inputValue = input.val()
if (inputValue.length === 0) {
doneCb(null); // Drop the team and replace with BYE
} else {
var flagAndName = inputValue.split(':') // Expects correct input
doneCb({flag: flagAndName[0], name: flagAndName[1]})
}
})
}
/* Render function is called for each team label when data is changed, data
* contains the data object given in init and belonging to this slot.
*
* 'state' is one of the following strings:
* - empty-bye: No data or score and there won't team advancing to this place
* - empty-tbd: No data or score yet. A team will advance here later
* - entry-no-score: Data available, but no score given yet
* - entry-default-win: Data available, score will never be given as opponent is BYE
* - entry-complete: Data and score available
*/
function render_fn(container, data, score, state) {
switch (state) {
case "empty-bye":
container.append("No team")
return;
case "empty-tbd":
container.append("Upcoming")
return;
case "entry-no-score":
case "entry-default-win":
case "entry-complete":
container.append('<img src="assets/images/' + data.flag + '.png" /> ').append(data.name)
return;
}
}
$(function() {
$('div#save .demo').bracket({
teamWidth: 80,
scoreWidth: 20,
matchMargin: 10,
roundMargin: 30,
centerConnectors: true,
init: saveData,
save: function() {}, /* without save() labels are disabled */
decorator: {edit: edit_fn,
render: render_fn}})
})
$(function() {
$('div#save1 .demo').bracket({
dir: 'rl',
teamWidth: 80,
scoreWidth: 20,
matchMargin: 10,
roundMargin: 30,
centerConnectors: true,
init: saveData1,
save: function() {}, /* without save() labels are disabled */
decorator: {edit: edit_fn,
render: render_fn}})
})
$(function() {
$('div#final .demo').bracket({
dir: 'rl',
teamWidth: 80,
scoreWidth: 20,
matchMargin: 10,
roundMargin: 0,
centerConnectors: true,
init: finalData,
save: function() {}, /* without save() labels are disabled */
decorator: {edit: edit_fn,
render: render_fn}})
})
</script>
</body>
</html>
et je me suis sortie suivante: 
Conseiller cet http://www.aropupu.fi/bracket/ il a beaucoup de Exemples – PraveenKumar
support de téléchargement –
j'ai essayé et faire la démo mais je n'ai pas joué match final. J'ai fait un tournoi de gauche à droite et de droite à gauche mais j'ai échoué quand j'ai joué le dernier match. –