yii2 使用fontawesome来为按钮添加旋转效果，提醒用户页面没有卡住

<link rel="stylesheet" type="text/css" href="<?=Yii::$app->request->baseUrl; ?>/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="<?=Yii::$app->request->baseUrl; ?>/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="<?=Yii::$app->request->baseUrl; ?>/css/default.css">
<script src="<?=Yii::$app->request->getBaseUrl();?>/js/jquery-1.11.1.min.js"></script>

首先通过上述代码，在模板文件中引入 font-awesome.min.css，jquery-1.11.1.min.js

然后在通过 ActiveForm 创建 submitButton的时候也要添加i标签，i标签的class为fa，就是font-awesome定义的class，绑定click事件 addSpin，该事件就是为submit button i添加旋转效果

 <?php $form = ActiveForm::begin(['id' => 'form-login']); ?>

    <?= $form->field($model, 'email', ['labelOptions'=>['class'=>'sr-only'], 'inputOptions'=>['class'=>'form-control input-lg', 'placeholder'=>'Email']])->textInput(['autofocus' => true]) ?>

    <?= $form->field($model, 'password', ['labelOptions'=>['class'=>'sr-only'], 'inputOptions'=>['class'=>'form-control input-lg', 'placeholder'=>'Password']])->passwordInput() ?>

    <div class="form-group">
        <?= Html::submitButton('<i class="fa"></i>Sign Up', ['class' => 'btn btn-primary ', 'name' => 'signup-button','id'=>'signup-button','onclick'=>'addSpin()']) ?>
    </div>

    <?php ActiveForm::end(); ?>

<script>
    function addSpin() {
        $('#signup-button i').addClass('fa-spinner fa-spin');
    }
</script>

效果如下

 

转载于:https://www.cnblogs.com/liyali/p/7275379.html