2

合計幅が 585px だとします。そして、スペースを均等なセクションに分割し、それぞれに位置内のインデックス値を割り当てたいと思いました。6 つのセクションがあるとしたら、次のようなことができます: (合計幅 / セクション数によって割り当てられます)

    //Set up elements with variables
            this.sliderContent = config.sliderContent;
            this.sectionsWrap = config.sectionsWrap;

            //Selects <a>
            this.sectionsLinks = this.sectionsWrap.children().children();

            //Create drag handle
            this.sectionsWrap.parent().append($(document.createElement("div")).addClass("handle-containment")
                                      .append($(document.createElement("a")).addClass("handle ui-corner-all").text("DRAG")));

            //Select handle
            this.sliderHandle = $(".handle");

var left = ui.position.left,
    position = [];

var position = ((left >= 0 && left <= 80) ? [0, 1] :
    ((left >= 81 && left <= 198) ? [117, 2] :
    ((left >= 199 && left <= 315) ? [234, 3] :
    ((left >= 316 && left <= 430) ? [351, 4] :
    ((left >= 431 && left <= 548) ? [468, 5] :
    ((left >= 549) ? [585, 6] : [] ) ) ) ) ) );

        if (position.length) {
            $(".handle").animate({
                left : position[0]
            }, 400);
            Slider.contentTransitions(position);
        }

しかし、x 個のセクションがあるとしたらどうなるでしょうか。これらのセクションは、次のような単なる要素です

<li><a></a></li>
<li><a></a></li>
<li><a></a></li>

または

<div><a></a></div>
<div><a></a></div>
<div><a></a></div>
<div><a></a></div>

合計 585px を分割し、.handle要素の現在の左の値に従ってインデックスを分類するにはどうすればよいですか? を使用してドラッグ ハンドルの場所を知ることができます。ui.position.left私が望むのは、各要素のインデックスを設定し、インデックス付き要素内のハンドルの場所に応じてハンドルをアニメーション化できるようにすることです。各要素にはインデックスが付けられているため、後でトランジション メソッドを呼び出して、表示する現在のインデックス # を渡します。上記のコードは機能しますが、実際には効率的ではありません。また、セクションの幅に合わせてハンドルの幅も考慮する必要があります。http://jsfiddle.net/yfqhV/1/

私が作ったものの例

4

3 に答える 3

1 
var numSections = // ...;
var totalWidth = // ...;
var sectionWidth = totalWidth / numSections;
var index = Math.floor($(".handle").position().left / sectionWidth);
var leftPosition = index * sectionWidth;
var rightPosition = leftPosition + sectionWidth - 1;
于 2013-03-05T17:36:47.520 に答える
1

わかりました、質問の範囲の数字の違いにわずかな矛盾があります。これにより、[私の作成した単語 de jour =)] これを正確にアルゴリズム化することが難しくなります。

  • 81 ～ 199 = 118
  • 199 ～ 316 = 117
  • 316 ～ 431 = 115
  • 431 ～ 518 = 118

あなたがそれを調整できるなら、私は解決策を持っています-それは特に賢いJavaScriptではないので、これを行うためのより良い方法があるかもしれません(SO JSの人々、私を教育してください!)しかし、それはうまくいきます.

最初に、配列範囲のインデックスを見つける関数が必要です。指定された値がその範囲内に収まり (ネストされた if-else 短縮形を置き換えます)、次に位置配列を設定する関数があり、最後に範囲検索を実行できます。対応する値の配列を返します。

このソリューションは、次の行が続く限り、さまざまな数のセクションを動的に処理する必要があります。

var len = $("#sectionContainer").children().length;

それに応じて調整されます。調整が必要なその他の値は次のとおりです。

    var totalWidth = 585;
    var xPos = 81;

値を引き出すことができる要素がある場合はそれらを設定できますが、より動的なソリューションになります。

/**
 * function to find the index of an array element where a given value falls
 * between the range of values defined by array[index] and array[index+1]
 */
function findInRangeArray(arr, val){
  for (var n = 0; n < arr.length-1; n++){

      if ((val >= arr[n]) && (val < (arr[n+1]))) {
          break;
      }
  }
  return n;
}

/**
 * function to set up arrays containing positional values
 */
function initPositionArrays() {
    posArray = [];
    leftPosArray = [];

    var totalWidth = 585;
    var xPos = 81;

    var len = $("#sectionContainer").children().length;
    var unit = totalWidth/(len - 1);

    for (var i=1; i<=len; i++) {
      pos = unit*(i-1);
      posArray.push([Math.round(pos), i]);
      xMin = (i >= 2 ? (i==2 ? xPos : leftPosArray[i-2] + posArray[1][0]) : 0);
      leftPosArray.push(Math.round(xMin));
    }
}

var left = ui.position.left;

initPositionArrays();

// find which index of "leftPosArray" range that "left" falls within
foundPos = findInRangeArray(leftPosArray, left);
var position = posArray[foundPos];

if (position.length) {
  $(".handle").animate({
    left : position[0]
  }, 400);
  Slider.contentTransitions(position);
}

説明するためにjsFiddleをセットアップしました。

楽しみ！

編集

@JonnySooter 自身の回答を見てきましたが、ポジショニングは正しく計算されますが、可変数のセクションは処理されません。

任意の数のセクションで動作させるにhandleContainmentは、(オンザフライで作成される) div の幅を (インライン スタイルを介して) 動的に設定する必要があります。
これは、セクションの数に各セクションの幅 (実際にはスライダーの幅と同じ) を掛けて計算されます。
これはハンドルを作成した後にすべて行われるため、「ハンドル」css クラスから幅を抽出できます。つまり、ハンドルの幅の変更は、CSS レベルで適用されたときにルーチンにカスケードされます。

セクションの数を変更でき、スライダーが適切に動作するこのjsFiddleを参照してください。

于 2013-03-06T11:58:29.890 に答える
0

更新：

私は自分で解決策を見つけようと努力しましたが、これが私が思いついたものです：

function( event, ui ) {
    var left = ui.position.left, //Get the current position of the handle
        self = Slider, //Set to the Slider object cus func is a callback
        position = 1;
        sections_count = self.sectionsLinks.length, //Count the sections
        section_position = Math.floor(self.sectionsWrap.width() / sections_count); //Set width of each section according to total width and section count

    left = Math.round(left / section_position); //Set the index
    position = (left * section_position); //Set the left ammount

    if(position < section_position){ //If handle is dropped in the first section
        position = 0.1; //Set the distance to animate
        left = 0; //Set index to first section
    }

    if (position.length) {
        $(this).animate({
            left : position //Animate according to distance
        }, 200);
        left = left += 1; //Add one to the index so that I can use the nth() child selector later.
        self.contentTransitions(left);
    }
}
于 2013-03-07T15:32:57.570 に答える