个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我想要使用 Jquery Bracket 库的以下类型的 Jquery bracket，我必须做什么？
最佳答案
我试过这段代码
<!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>
我得到了以下输出: 
关于javascript - 双面锦标赛支架，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45668336/
27
4
0
我使用 spring 4.2 并休息，我想使用分页。 Spring 支架 Controller 如何使用分页？ @RequestMapping(value = "/members/{memberId}
我有一个 recyclerview，它获取数据作为领域结果，然后将其显示为 recyclerview 项目。我的想法是，当用户单击某个项目时，会弹出一个底页并显示详细信息。 有没有一种方法可以在 on
当结果是 array/list 时，我无法让 spring 序列化响应。因此，当我从 RestController 调用 clients 时，它确实返回 [{},{},{}]，而不是真实对象，所有其他
我定义了下一个单元测试来测试用于上传文件的 Controller : public class PhenotypeControllerTest extends BaseControllerTest{
首先我编写了简单的 spring REST Controller @RequestMapping(value = "/id", method = RequestMethod.GET) pub
在 SQLite 版本 3.7.12.1(控制台)中，此查询不起作用: (SELECT * FROM A UNION SELECT * FROM B) EXCEPT (SELECT * FROM A
我想发送带有redirectUri 和查询参数的302 响应。我能够填充位置，但不确定如何将值作为查询参数包含在内以响应 Controller 。 我尝试向正文添加值，但我想在查询参数中发送它们。 p
我正在尝试使用 viewHolder 制作一个 recyclerView 适配器。在该 recyclerView 中，我需要使用浮点值，并且我不知道如何将 viewHolder 与浮点一起使用。我尝试
我正在尝试使用 requestMapping 注释来调用 servlet。我有一个在服务器上运行的 index.html 页面。但是当我尝试通过键入来调用 servlet 时 http://local
我正在使用 Spring Rest Controller 来实现我的 Web api，我想将 Controller 之间的常用方法放在一个地方，以便可以在我的所有 Controller 中使用。 如果
有没有一种方法可以生成没有 View 的Rails支架，必须有一种更好的方法来生成支架并删除 View 和 View 规范。 最佳答案 您可以使用rails g resource Foo bar:te
在我的 Controller 中，我有一个创建实体的方法 import javax.validation.Valid; ... @RestController public class Control
在我的 Controller 中，我有一个创建实体的方法 import javax.validation.Valid; ... @RestController public class Control
我正在运行 Espresso 测试以单击 RecyclerView 的元素。 onView(withId(R.id.recyclerList)).perform(RecyclerViewActi
我编写了一个使用 package:flutter/material.dart 的 Flutter 应用程序。在 iOS 模拟器上运行应用程序如下所示。如您所见，一行中的组件之间没有填充，并且组件到达顶
我是DART的新手。花了很多年做OO(PDC)Prolog。我对HTML5和CSS3有初学者的了解。 我已经开始研究聚合物纸元素和(采样器支架)。我在左侧的菜单中有(纸张项)，每个项目都打开一个不同的
任何人都可以为我提供一个代码示例来为使用 HTTPS 保护的 Controller 编写集成测试吗？使用 HTTP，我可以编写，但使用 HTTPS，我收到认证错误。 Controller @RestC
使用: 基架 1.4.0 迷你库 1.6.2 kubectl:客户端 1.15.5 和服务器 1.17.0 Django 3.0.3 python 3.8.2 我最近刚开始收到这个错误，因为我正在处理
我知道之前有人在 stackoverflow 上问过这个问题。但是，我还没有找到使用 Postman 等实际测试服务的答案。 我已经关注了 documentation我的服务与文档中描述的几乎相同:
我是一名优秀的程序员,十分优秀！