Добавьте метку в Match Container в Jquery плагин скобки - PullRequest
Новая
       62

Добавьте метку в Match Container в Jquery плагин скобки

0 голосов
/ 24 марта 2020

Я использую плагин Jquery Bracket , и мне было интересно, как я могу добавить метку в контейнер Match, чтобы я мог отображать дату / время для каждого матча на графике?

Например, если бы я добавил дополнительное поле «время» для каждой команды, можно ли было бы отобразить его на уровне матча? Я на самом деле хотел бы добавить «время» для каждого матча, но не уверен, как это сделать. 

/* Custom data objects passed as teams */
var customData = {
  teams: [
    [{
      name: "Team 1",
      flag: 'fi',
      time: "2020/01/30"
    }, null],
    [{
      name: "Team 3",
      flag: 'se',
      time: "2020/01/30"
    }, {
      name: "Team 4",
      flag: 'us',
      time: "2020/02/01"
    }]
  ],
  results: []
}

/* 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]
      })
    }
  })
}

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="site/png/' + data.flag + '.png" /> ').append(data.name)
      return;
  }
}

$(function() {
  $('div#customHandlers .demo').bracket({
    init: customData,
    save: function() {},
    /* without save() labels are disabled */
    decorator: {
      edit: edit_fn,
      render: render_fn
    }
  })
})
...