Yii2でジャンププロンプトページを実装する方法を説明する

まえがき

ユーザーにより良いエクスペリエンスを提供するために、操作が成功または失敗した後にプロンプ​​トが表示され、ページがジャンプするようにこのエフェクトを Yii2 に実装しました。このジャンプ プロンプト ページを書いているときに情報を探していたところ、インターネット上にこの点に関する中国語の情報が非常に少ないことがわかりました。ぜひ皆さんと共有してください。

要件分析

1. ユーザーが操作に成功または失敗すると、プロンプトが表示され、ページがジャンプします。 2. このメソッドを使用して $this->success()、$this->error() を呼び出します (Yii2 に付属のページをロードする $this->render() メソッドを模倣しています)。

レンダリング

スタイルは少し醜いですが、機能は優れています。このスタイルが気に入らない場合は、自分で美化することができます。

コード分析

1. コントローラーの基本クラスController.phpに2つのメソッドを追加します:

/**     * 通用成功跳转       * @param unknown $url 成功后跳转的URL     * @param number $sec 自动跳转秒数     * @return Ambigous <string, string>     */     public function success($url= [] ,$sec = 3){          $url= empty($url)? ['/admin/main']: $url;        $url= /yii/helpers/Url::toRoute($url);        return $this->renderPartial('../base/msg',['gotoUrl'=>$url,'sec'=>$sec]);    }       /**     * 通用错误跳转     * @param string $msg 错误提示信息     * @param number $sec     * @return Ambigous <string, string>     */    public function error($msg= '',$sec = 3){        return $this->renderPartial('../base/msg',['errorMessage'=>$msg,'sec'=>$sec]);    }

2. msg.phpという名前のページをloginviewsbaseの下に作成します。コードは次のとおりです:

<?php/* @var $this yii/web/View *//* @var $name string *//* @var $message string *//* @var $exception Exception */use yii/helpers/Html;?><div class="site-error">    <div class="alert alert-danger page-none-alert">        <p>        <?php if(isset($errorMessage)):?>            <span class="glyphicon glyphicon-remove-sign text-danger"></span>            <span class="btn-lg text-danger"><?php echo '操作出错啦！' ?></span>            <?php echo '<p>'.$errorMessage.'</p>';?>        <?php else:?>            <span class="glyphicon glyphicon-ok-sign text-success"></span>            <span class="btn-lg text-success">恭喜！操作成功！</span>        <?php endif;?>    </p>            <p class="text-muted">该页将在3秒后自动跳转!</p>    <p>        <?php if(isset($gotoUrl)):?>            <a href="<?php echo $gotoUrl?>">立即跳转</a>        <?php else:?>            <a href="javascript:void(0)" onclick="history.go(-1)">返回上一页</a>        <?php endif;?>    </p>        </div>   <style>   .page-none-alert{margin: 100px 0 !important;    text-align: center !important;    font-size: 30px !important;}   </style> </div><script>  <?php if(!isset($gotoUrl)):?>    setInterval("history.go(-1);",<?php echo $sec;?>000); <?php else:?>   setInterval("window.location.href='<?php echo  $gotoUrl;?>'",<?php echo $sec;?>000);<?php endif;?></script>

3. 上記の手順を完了したら、ログイン モジュールの下のコントローラーで直接呼び出すことができます。呼び出しメソッドは次のとおりです。

メソッド呼び出しの成功: return $this->success(['/site/login'] ) ;

メソッドの呼び出しに失敗しました: return $this->error('データ変更に失敗しました!');

FAQ

1. ジャンププロンプトの JS は、以下でコメントした場所に書かれています。の場合は機能しません。外部に書き込む必要があります。

りー