JavaScript ArcGIS Slider.TickConfig用法及代碼示例

基本信息

以下是所在類或對象的基本信息。

AMD: require(["esri/widgets/Slider"], (Slider) => { /* code goes here */ });

ESM: import Slider from "@arcgis/core/widgets/Slider";

類： esri/widgets/Slider

繼承: Slider > Widget > Accessor

自從：用於 JavaScript 4.12 的 ArcGIS API

用法說明

Slider.TickConfig函數(或屬性)的定義如下：

TickConfig

用於配置滑塊上的刻度的對象規範。應在tickConfigs 屬性上設置這些對象的數組。

屬性：

類型說明

mode String

沿著滑塊軌道定位刻度的模式或方法。有關可能值的列表，請參見下表。

可能的值	說明
count	將固定數量的刻度(在`values` 屬性中提供)放置在滑塊軌道下方彼此等距的位置。
percent	設置後，並且在 `values` 屬性上設置了一個數字，刻度將沿著滑塊的長度以指定的百分比間隔放置。例如，當 `mode` 為百分比且 `values` 為 `5` 時，滑塊軌道下方將放置 20 個刻度(彼此之間以 5% 的間隔)。如果提供了 `values` 數組，則這些值將被解釋為沿滑塊的百分比。因此，如果 `values` 是 `[10, 50, 90]` ，那麽三個刻度將放置在軌道下方；一個在中間點，兩個距離滑塊兩端 10% 的長度。
position	指示僅將刻度放置在 `values` 屬性中指定的值處。

可能的值："count"|"percent"|"position"

values Number|Number []

指示將在軌道下方呈現刻度的位置。有關每種模式如何解釋此屬性的更多信息，請參閱mode 的說明。

labelsVisible Boolean

可選的

指示是否為刻度呈現標簽。

tickCreatedFunction TickCreatedFunction

可選的

為每個刻度觸發的回調。您可以使用此屬性覆蓋默認行為和樣式。

labelFormatFunction LabelFormatter

可選的

格式化刻度標簽的回調。

例子：

// places 25 ticks on the slider track
// evenly spaced from one another
slider.tickConfigs = [{
  mode: "count",
  values: 25
}];

// places ticks spanning the width of
// the slider at 20% intervals from one another
// this is the equivalent of setting mode to 'count'
// and the values to 5.
slider.tickConfigs = [{
  mode: "percent",
  values: 20
}];

// Places three ticks on the slider: one positioned
// 10% of the width from the start (or min value), another
// directly in the middle (50% from the start), and
// another 90% of the width from the start of the slider.
// Because the values are %s the values are always relative
// regardless of the range of the slider values.
slider.tickConfigs = [{
  mode: "percent",
  values: [ 10, 50, 90 ]
}];

// Places 5 ticks on the slider at the slider values
// provided below. These are absolute positions.
slider.tickConfigs = [{
  mode: "position",
  values: [ 0, 5, 10, 15, 20 ]
}];

// Places a single tick at the location of the value of 5.
slider.tickConfigs = [{
  mode: "position",
  values: 5
}];

// Renders three groups of ticks. The first is a basic set
// of 25 ticks. The second places 4 ticks and adds custom
// CSS classes to modify their styling. The third adds
// a click event handler to the tick labels.
slider.tickConfigs = [{
  mode: "count",
  values: 25
}, {
  mode: "percent",
  values: [12.5, 37.5, 62.5, 87.5],
  labelsVisible: true,
  tickCreatedFunction: function(initialValue, tickElement, labelElement) {
    tickElement.classList.add("mediumTicks");
    labelElement.classList.add("mediumLabels");
  }
}, {
  mode: "count",
  values: 5,
  labelsVisible: true,
  tickCreatedFunction: function(initialValue, tickElement, labelElement) {
    tickElement.classList.add("largeTicks");
    labelElement.classList.add("largeLabels");
    labelElement.onclick = function() {
      const newValue = labelElement["data-value"];
      slider.values = [ newValue ];
    };
  }
}];

相關用法

注：本文由純淨天空篩選整理自arcgis.com大神的英文原創作品 Slider.TickConfig。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。