プログレスバー

Question

可能性の重複：
progress bar on a survey using c#

私はC＃を使用してASP .NETでのオンライン調査を行いました。私の調査には30の質問があり、それぞれの質問は別のページにあります。彼がどのくらい完了したかをユーザーに示す進捗バーを表示したい。どうやってやるの？

私は総ページ数を知っていれば、送信ボタンを押すと各ページに進行状況バーが表示されます。例えば、私が30番目のページの5番目のページにある場合、プログレスバーは5/30などで埋められるはずです。

Answer 1

最も簡単な方法は、完了したページ数または現在のページ番号をセッションおよび次のページの読み込みに保存することです。保存された値を使用してプログレスバーを設定します。

Answer 2

私はこのシンプルなjqueryスクリプトを使用していますが、プログレスバーを空にしてプログレスバーを埋める別のイメージがあります。塗りつぶし部分を含むdivの幅を調整します（progressBarFill divの背景画像は幅1ピクセルの単色画像です）。各ページでステップ番号を変更するだけでいいです。

<script type="text/javascript"> 
    $(document).ready(function() { 
     var progressBarWidth = 211;   // this is total width of the progress bar 
     var totalStepsInAppProcess = 5;  // number of steps in an application process 
     var eachStepPercent = 100/5;  // each steps percentage 
     var numberOfSubStepsForStep = 1; // if there are any sub steps in the step - if no sub steps then it should be 1 to avoid divide by zero error 
     var stepNumber = 3;     // step number 
     var percentForSubStep = Math.ceil(new Number(eachStepPercent/numberOfSubStepsForStep).toFixed(2)) * stepNumber; // equivalent percentage for a step 
     var subStepNumber = 1;    // sub step number - if no sub steps then it should be 1 to avoid math errors 
     var widthForThisStep = Math.ceil((progressBarWidth * (percentForSubStep/100)) * subStepNumber); // progress bar width for this step 
     var label = (document.getElementById('<%=((Label)Master.FindControl("lb_ProgressBarText")).ClientID %>')); 
     $('#<%=((Label)Master.FindControl("lb_ProgressBarText")).ClientID %>').text('You are ' + percentForSubStep + '% done'); 
     $('.progressBarFill').width(widthForThisStep); 
    </script> 

私はこれが役立つことを願っています。

Answer 3

ページが常に同じ順序である場合、シーケンスのどのページがあなたの上にあるのかが分かります。同じ順序でない場合は、セッションを使用してページを保存する必要があります。また、隠れたフィールドをポストバックして、最後のページ数を指定する必要があります。

- 最適なソリューションではなく、30種類のイメージを作成できます。

- CSSの背景の位置を使用して1つのスライド画像を使用すると、コンテナの反対側（100％）に到達するまで、すべてのページが一定の割合でスライドします。

またはCSSを使用して別のdiv内にdivを配置し、外側のdivは枠の幅と枠線を持つことになり、innerは各ページごとに一定の割合で増加します。インナーに異なる背景色を与えます。