0

私はブートストラップ 3 を使用しており、metro ui のステッパー プラグインを模倣しようとしています。jQueryを使用して左の値を配置しようとしているため、リスト項目が等間隔でコンテナの100%を占めますが、コンソールにはすべての値が0と表示されます.私のコード:

$(document).ready(function () {

    steps = $(".stepped li"),
    element_width = $(".stepped li").width(),
    steps_length = steps.length - 1,
    step_width = $(steps[0]).width();

    $.each(steps, function (i, step) {
        var left = i == 0 ? 0 : (element_width - step_width) / steps_length * i;

        console.log(steps);
        $(step).animate({
            left: left
        });
    });

});

私が間違っていることを見つけることができません。左の値はすべて 0px を返しています。私が模倣しようとしているプラ​​グインへのリンクは次のとおりです: http://tinyurl.com/o6sld95。リストは単純な順序なしリストです。

<ul class="stepped">
    <li class="complete">1</li>
    <li class="complete">2</li>
    <li class="current">3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
4

3 に答える 3

1

に変更element_width = $(".stepped li").width()しelement_width = $(".stepped").width()ます。

現在、アイテムの幅を 2 ​​回取得し、それを と の両方にli割り当てているため、それらを差し引くと が得られます。element_widthstep_width0

JSFiddle

于 2014-08-25T17:40:09.063 に答える
0

興味深い場合は、プレーンなCSSソリューションを次に示します。http://jsfiddle.net/u3w0qfaz/1/

最初のバージョンでは、親コンテナーの幅の遷移を使用して、目的の効果をシミュレートしています。

ul.stepped {
    display: flex;
    list-style: none;
    flex-wrap: nowrap;
    flex-direction: row;
    transition-duration: 1s;
    width: 1px;
}
ul.stepped li {
    flex: 1 1 auto;
}
ul.stepped.go {
    width: 100%;
}

これは、変換を使用してアイテムにスケーリング効果を与える別のバージョンです: http://jsfiddle.net/u3w0qfaz/

ul.stepped
{
    /*...*/
    transform: scaleX(0);
    transform-origin: left;
}

ul.stepped.go
{
   transform: scaleX(1); 
}
于 2014-08-25T17:35:36.273 に答える
0

Bootstrap 3 を使用している場合は、Justified Button Navを使用できます。

ブートストラップ 3 + 1 CSS:

ul{
  -webkit-padding-start: 0px;
}


<ul class="stepped btn-group btn-group-justified">
  <li class="complete btn-group">1</li>
  <li class="complete btn-group">2</li>
  <li class="current btn-group">3</li>
  <li class="btn-group">4</li>
  <li class="btn-group">5</li>
  <li class="btn-group">6</li>
</ul>

JsFiddle の例。

CSS 2.x のみのブラウザーをサポートする必要がない限り、jQuery はまったく必要ありません。

または、純粋な CSS + HTML (Bootstrap 3 とほとんど同じです)

.stepped{
    padding: 0;
    display: block;
    width: 100%;
}

.stepped > li {
    display: table-cell;
    border: 1px solid black;
    width: 1%;
}

<ul class="stepped">
  <li class="complete">1</li>
  <li class="complete">2</li>
  <li class="current">3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

JS フィドルの例

于 2014-08-25T17:41:13.363 に答える