博客

jQWidgets jqxRangeSelector主题属性

  • Post category:jquery

jQWidgets是一套基于JavaScript框架jQuery的UI控件库。其中的jqxRangeSelector控件可以用于数据展示和选择，包括水平或垂直方向上的线性尺度选择、范围选择或缩放。

主题属性可以用来自定义样式来满足特定的UI需求。以下是jQWidgets jqxRangeSelector主题属性的完整攻略：

设置主题

  1. 通过在html页面中引入jQWidgets主题文件来设置主题
<link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="styles/jqx.energyblue.css" type="text/css" />
<link rel="stylesheet" href="styles/jqx.arctic.css" type="text/css" />

2.在jqxRangeSelector控件中设置主题

$("#jqxRangeSelector").jqxRangeSelector({
  theme: 'energyblue' //设置主题
});

配置主题样式

  1. 修改轴线和刻度线的颜色
.jqx-range-selector-horizontal{
  border-color: #cfcfcf;  /*轴线颜色*/
}
.jqx-range-selector-tick-horizontal,
.jqx-range-selector-tick-vertical
{
  stroke: #cfcfcf;   /*刻度线颜色*/
  fill: #cfcfcf;
}
  1. 修改选择区域、按钮和矩形的背景颜色
.jqx-range-selector-horizontal .jqx-range-selector-selected-range {
  fill: #337ab7;   /*选择区域背景颜色*/
}
.jqx-range-selector-label-button {
  background-color: #337ab7;  /*按钮背景颜色*/
  color: #fff;        /*按钮文字颜色*/
}
.jqx-range-selector-label-item,
.jqx-range-selector-rect-item {
  fill: #337ab7;    /*矩形背景颜色*/
}

示例一：设置主题为darkblue，修改轴线和刻度线的颜色

$('#jqxRangeSelector').jqxRangeSelector({
    width: '600px',
    height: '80px',
    theme: 'darkblue',
    ticksPosition: 'both',
    range: { from: 10, to: 90, min: 0, max: 100 },
    majorTicksInterval: 10,
    snapToTicks: true,
    showMinorTicks: true,
    minorTicksInterval: 1
});

/* 设置轴线和刻度线颜色 */
.jqx-range-selector-horizontal.darkblue{
  border-color: #515151;
}
.jqx-range-selector-tick-horizontal.darkblue,
.jqx-range-selector-tick-vertical.darkblue
{
  stroke: #515151;
  fill: #515151;
}

示例二：设置主题为arctic，修改选择区域、按钮和矩形的背景颜色

$('#jqxRangeSelector').jqxRangeSelector({
    width: '500px',
    height: '80px',
    theme: 'arctic',
    range: { from: 10, to: 90, min: 0, max: 100 },
    labelsFormat: 'd'
});

/*设置选择区域、按钮和矩形的背景颜色*/
.jqx-range-selector-horizontal .jqx-range-selector-selected-range.arctic {
    fill: #0a6493;
}
.jqx-range-selector-label-button.arctic {
    background-color: #0a6493;
    color: #fff;
}
.jqx-range-selector-label-item.arctic, .jqx-range-selector-rect-item.arctic {
    fill: #0a6493;
}

以上就是jQWidgets jqxRangeSelector主题属性的完整攻略。可以根据需要修改不同的主题样式，以满足UI需求。

Tags: