bootstrap-switchの初期値の設定方法-ブートストラップのチュートリアル-php.cn

bootstrap-switchの初期値の設定方法

angryTom

リリース： 2020-05-15 09:22:36

オリジナル

4670 人が閲覧しました

bootstrap-switchの初期値の設定方法

bootstrapSwitchは非常に美しいスイッチングコントロールで、公式サイトの紹介も非常に詳しく書かれています。いくつかのデモを通じて、bootstrapSwitch をすぐに始めてみましょう。

ブートストラップについて詳しく知りたい場合は、次をクリックしてください: ブートストラップチュートリアル

まず、対応する引用文を引用してください。 js および css ファイルを作成し、クラス "switch" を使用して div にチェックボックスを配置し、bootstrapSwitch を使用するように js で

 $(&#39;#mySwitch input&#39;).bootstrapSwitch();

ログイン後にコピー

を初期化します。

入力には data-on-text と data-off-text という 2 つの属性があり、それぞれ切り替え時に表示されるテキストです。ここでは YES に設定されています。そしていいえ。コードは次のとおりです:




    
    this is a bootstrap-switch test

ログイン後にコピー

bootstrap-switchの初期値の設定方法

##js を使用してこれら 2 つの属性を設定することもできます。input 要素を選択した後、メソッド

bootstrapSwitch({属性:値}) 属性を変更します。コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>this is a bootstrap-switch test</title>
    <script src="jquery-2.2.4.js"></script>
    <script src="bootstrap.js"></script>
    <script src="bootstrap-switch.js"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="bootstrap-switch.css"/>
    <script type="text/javascript">
        $(function(){
            $(&#39;#mySwitch input&#39;).bootstrapSwitch({
                onText:&#39;On&#39;,
                offText:&#39;Off&#39;
            });
        })
    </script>
</head>
<body>
<br>
<div  id="mySwitch">
    <input type="checkbox" checked  data-on-text="YES" data-off-text="NO"/>
</div>
</body>

ログイン後にコピー

bootstrap-switchの初期値の設定方法