jqueryマルチステッププログレスバー-フロントエンドQ&A-php.cn

jqueryマルチステッププログレスバー

王林

リリース： 2023-05-28 12:36:08

オリジナル

986 人が閲覧しました

インターネットテクノロジーの急速な発展に伴い、バックエンドサーバーへのフォームの送信、ファイルのアップロードなど、複雑な操作を実行する必要がある Web アプリケーションがますます増えています。これらの操作が完了するまで、ユーザーは操作が成功したかどうかを知ることができないため、ユーザーの不満につながりやすくなります。したがって、進行中の操作の進行状況をユーザーにわかりやすく知らせるために、マルチステップの進行状況バーが登場しました。

この記事では、jQuery に基づいたマルチステップのプログレスバーを紹介します。マルチステップのプログレスバーを通じて、ユーザーは現在の操作の進行状況を明確に理解できるため、操作プロセスの不確実性を回避し、ユーザーエクスペリエンスを向上させることができます。。

実装のアイデア:

マルチステップの進行状況バーを実装するには、最初のステップとして、ページ内に空の進行状況バーコンテナーを作成する必要があります。例:

<div class="progress-bar">
    <div class="progress"></div>
</div>

ログイン後にコピー

ここで作成されたコンテナは progress-bar という名前で、進行状況表示の要素として progress が含まれます。

次に、jQuery ライブラリとカスタムマルチステッププログレスバー jQuery プラグインをページに導入します:

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="progress.js"></script>

ログイン後にコピー

次に、プログレスバーを定義して初期化します:

<script>
    $(function(){
        $('.progress-bar').progress();
    });
</script>

ログイン後にコピー

ここで使用します jQuery の .progress() 関数を使用してプログレスバーを初期化します。

次に、操作中に進行状況バーのステータスを更新する必要があります。たとえば、setProgress() 関数を使用して進行状況バーのステータスを更新します。

$(function(){
    $('.progress-bar').progress({
        steps: {
            prepare: '准备中',
            send: '发送中',
            receive: '接收中',
            done: '完成'
        }
    });

    // 开始一个操作
    function startOp(){
        $.ajax({
            type: 'POST',
            url: 'http://example.com/api',
            data: {
                // ...
            },
            beforeSend: function(){
                // 设置进度条状态为“准备中，进度0%”
                $('.progress-bar').progress('setProgress', 'prepare', 0);
            },
            success: function(data){
                // 设置进度条状态为“发送中，进度33%”
                $('.progress-bar').progress('setProgress', 'send', 33);
                // ...
            },
            error: function(){
                // 设置进度条状态为“完成，进度100%”
                $('.progress-bar').progress('setProgress', 'done', 100);
            }
        });
    }

    // 执行操作
    startOp();
});

ログイン後にコピー

startOp() 関数では、 を使用します。 $.ajax( ) この関数は操作をシミュレートし、操作中に進行状況バーのステータスを更新します。

プログレスバーでは、steps というオプションを使用して、プログレスバーの各ステップの名前と、各ステップに対応する進捗率を定義します。 setProgress() 関数を使用すると、進行状況バーのステータスを更新して、現在の操作のステップと進行状況を表示できます。

最終効果:

上記の手順の後、jQuery に基づいてマルチステップの進行状況バーを構築することに成功し、操作中の進行状況表示を実現し、ユーザーが現在の操作の進行状況を明確に理解できるようにしました。、ユーザーエクスペリエンスを向上させます。

概要:

この記事では、jQuery に基づくマルチステップの進行状況バーの実装を紹介し、特定の操作プロセスをシミュレートすることによって進行状況バーの使用方法を示します。マルチステップの進行状況バーは、ユーザーエクスペリエンスを向上させ、操作中の不確実性を効果的に回避できる非常に実用的な Web コンポーネントです。 jQueryのさまざまなメソッドを上手に使いこなすことで、Webアプリケーションに彩りを添える美しいプログレスバーを簡単に実装できます。

以上がjqueryマルチステッププログレスバーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。