1

私は約1時間ほどグーグルで、私がやろうとしていることに近づくjqueryコントロール（または微調整できるコントロール）を見つけようとしましたが、何も見つかりませんでした。

おそらく、誰でもリンクを共有したり、別のアプローチを提案したりできます。私は次のことを達成しようとしています:

私はディーラー (一般大衆ではない) を対象とした Web サイトを持っています。各ディーラーには、事前に定義された金額の目標があります。たとえば、ディーラー A は 59K のターゲットを持っています。ディーラー B のターゲットは 21K です。さらに、現在3つのルールがあります。

  • 顧客の目標の 2% に達した場合、20% の割引を提供します。
  • 顧客の目標の 4% に達した場合、40% の割引を提供します。
  • お客様の目標の 6% に達した場合は、60% の割引を提供します。

ユーザーの現在の金額に加えて、3 つのルールを表示するある種のプログレス バーを見つけようとしています。例：

------8K----------------|------------------|------- ------------------|

              20%         40%            60%

8K は、現在ログインしているディーラーの現在の金額を表します。別の例 (ログインしている別のディーラーの場合) は次のようになります。

------|-------27K-----------|-------- ----------------|

            20%           40%             60%

そのようなコントロールをどのように作成 (または微調整) しますか? ありがとう

4

1 に答える 1

0

次のようなものを試してください:ライブデモ

HTML

<div id="main" >
    <div id="first">20%</div><div id="second">40%</div><div id="third">60%</div>

    <div id="cur">12000</div>
</div>

CSS

#main {
    width:400px;
    height:60px;
    border:1px solid black;
}

#first,#second,#third {
    display:inline-block;
    position: relative;
    left: 0%;
    top:0%;
    height:100%;
    text-align:right;
    font:Courier;
    color:#fff;
    font-size:90%;
    padding-right:4px;
}

#first {
    background: #800;
    width:20%;
}

#second {
    background: #880;
    width:20%;
}

#third {
    background: #080;
    width:20%;
}

#cur {
    display:block;
    float:left;
    position: relative;
    left: 0%;
    top:-65%;
    height:30%;
    width:40%;
    border:1px solid blue;
    background: #fff;
    text-align:right;
    font-family: Courier;
    font-weight:bold;
    padding-right: 4px;
}

jQuery

$(document).ready(function() {
    function showBar(target, current) {
        perc = current / target * 100;

        console.log(perc);

        l = perc * 4;

        console.log(l);

        $("#cur").css('width', perc + '%');
        $("#cur").text(current);
    }

    showBar(12000, 6000);
});

showBar目標値と現在値を指定して呼び出すだけです。

于 2013-02-04T16:24:03.093 に答える