jQWidgets jqxKanban宽度属性攻略
jQWidgets 是一个基于 jQuery 的 UI 组件库，提供了丰富的 UI 组件和工具，可于创建现代化 Web 应用程序。 jqxKanban 是看板组件，用于可视化管理任务和流程。攻略将详细介绍 jqxKanban 的宽度属性，该属性用于设置看板的宽度。
宽度属性
jqxKanban 组件的宽度属性用于设置看板的宽度。该属性可以是像素值或百分比值。默认情况下，看板的宽度为其父元素的宽度。
以下是 jqxKanban 的宽度属性的语法：
$('#jqxKanban').jqxKanban({ width: value });
在此示例中，我们使用 jqxKanban 的 width 属性来设置看板的宽度。
示例1：设置看板的宽度为像素值
以下是一个示例，演示如何使用像素值设置看板的宽度：
<!DOCTYPE html>
<html>
<head>
<title>jqxKanban</title>
<link rel="stylesheet" href="jq/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="jq/styles/jqx.energyblue.css" type="text/css" />
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxkanban.js"></script>
</head>
<body>
<div id="jqxKanban"></div>
<script>
var source = {
localData: [
{ text: '任务1', state: 'new' },
{ text: '任务2', state: 'new' },
{ text: '任务', state: 'done' }
],
dataType: 'array',
dataFields: [
{ name: 'text', type: 'string' },
{ name: 'state', type: 'string' }
]
};
var dataAdapter = new $.jqx.dataAdapter(source);
$('#jqxKanban').jqxKanban({
source: dataAdapter,
columns: [
{ text: '新任务', dataField: 'state', maxItems: 3 },
{ text: '已完成任务', dataField: 'state', maxItems: 3 }
],
template: '#template',
width: 500
});
</script>
<script id="template" type="text/x-jquery-tmpl">
<div class="jqx-kanban-item">
<div class="jqx-kanban-item-color-status"></div>
<div class="jqx-kanban-item-text">${text}</div>
<div class="jqx-kanban-item-footer">
<div class="jqx-kanban-item-state">${state}</div>
</div>
</div>
</script>
</body>
</html>
在此示例中，我们创建了一个 jqxKanban 组件，并将其附到具有 id="jqxKanban" 的 HTML 元素上。我们还定义了一个数据源，其中包含三个任务，每个任务都有一个文本和一个状态。我们使用 template 属性定义了看板卡片的内容。我们使用 width 属性将看板的宽度设置为 500 像素。
示例2：设置看板的宽度为百分比值
以下是一个示例，演示如何使用百分比值设置看板的宽度：
<!DOCTYPE html>
<html>
<head>
<title>jqxKanban</title>
<link rel="stylesheet" href="jq/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="jq/styles/jqx.energyblue.css" type="text/css" />
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxkanban.js"></script>
</head>
<body>
<div id="jqxKanban"></div>
<script>
var source = {
localData: [
{ text: '任务1', state: 'new' },
{ text: '任务2', state: 'new' },
{ text: '任务3', state: 'done' }
],
dataType: 'array',
dataFields: [
{ name: 'text', type: 'string' },
{ name: 'state', type: 'string' }
]
};
var dataAdapter = new $.jqx.dataAdapter(source);
$('#jqxKanban').jqxKanban({
source: dataAdapter,
columns: [
{ text: '新任务', dataField: 'state', maxItems: 3 },
{ text: '已完成任务', dataField: 'state', maxItems: 3 }
],
template: '#template',
width: '80%'
});
</script>
<script id="template" type="text/x-jquery-tmpl">
<div class="jqx-kanban-item">
<div class="jqx-kanban-item-color-status"></div>
<div class="jqx-kanban-item-text">${text}</div>
<div class="jqx-kanban-item-footer">
<div class="jqx-kanban-item-state">${state}</div>
</div>
</div>
</script>
</body>
</html>
在此示例中，我们创建了一个 jqxKanban 组件，并将其附到具有 id="jqxKanban" 的 HTML 元素上。我们还定义了一个数据源，其中包含三个任务，每个任务都有一个文本和一个状态。我们使用 template 属性定义了看板卡片的内容。我们使用 width 属性将看板的宽度设置为 80%。
希望这些示例能帮助理解如何使用 jqxKanban 的宽度属性，并据需要进行更改。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQWidgets jqxKanban宽度属性 - Python技术站
微信扫一扫 
支付宝扫一扫 