JQuery UI——進捗バー

15237 ワード

JQuery UIは非常に強力なJQueryプラグインで、小可はこのテーマでJQuery UIのいくつかの小さなテクニックを紹介します.まずJQuery UIをダウンロードし、小可下の最新バージョンをダウンロードします.http://jqueryui.com/download/all/冒頭で進捗状況を紹介する
一.進捗バーの作成

<html>
<head>
    <title>title>
    <script src="E:/jQuery/jquery-1.11.3.js" type="text/javascript">script>
    <link rel="stylesheet" href="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.css" />
    <script type="text/javascript" src="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.js" >script>
head>
<script type="text/javascript">
    $(function(){
        $("#progressDiv").progressbar({
            value:21
        });
    });
script>
<body>
    <div id="progressDiv">div>
body>
html>

が得られます
二.プログレスバーメソッド

progressbar(「destory」):div初期状態を回復

progressbar(「disable」):進捗バーを無効にする

progressbar(「enable」):進捗バー

を起動

progressbar(「option」):複数のオプションを設定

progressbar(「value」,value):進捗バーの取得または設定

<html>
<head>
    <title>title>
    <script src="E:/jQuery/jquery-1.11.3.js" type="text/javascript">script>
    <link rel="stylesheet" href="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.css" />
    <script type="text/javascript" src="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.js" >script>
head>
<script type="text/javascript">
    $(function(){
        $("#progressDiv").progressbar({

            value:21
        });

        $("button").click(function(e){
            var divElem = $("#progressDiv");
            if(this.id == "mode"){
                divElem.progressbar("value",false);
            }else{
                var currentProgress = divElem.progressbar("value");
                if(!currentProgress){
                    divElem.progressbar("value",21);
                }else{
                    divElem.progressbar("value",this.id == "decr"?currentProgress-10 : currentProgress + 10)
                }
            }
        });

    });
script>
<body>
    <div id="progressDiv">div>
    <button id="decr">Decreasebutton>
    <button id="incr">Increasebutton>
    <button id="mode">Indeterminatebutton>
body>
html>

効果は次のように設定できます:

三.プログレスバーイベント

create:進捗バーコンポーネントの作成時に

を完了

change:進捗バーコンポーネントが変化すると

が完了する.

complete:進捗バーコンポーネントが100%に達すると

が完了する.

<html>
<head>
    <title>title>
    <script src="E:/jQuery/jquery-1.11.3.js" type="text/javascript">script>
    <link rel="stylesheet" href="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.css" />
    <script type="text/javascript" src="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.js" >script>
head>
<script type="text/javascript">
    $(function(){
        $("button").button();

        $("#progressDiv").progressbar({
            value:21,
            create:function(e){
                $("#progVal").text($("#progressDiv").progressbar("value"));
            },
            complete:function(e){
                $("#incr").button("disable")
            },
            change:function(e){
                var currentValue = $("#progressDiv").progressbar("value");
                if(!currentValue){
                    $("#progWrapper").hide();
                }else{
                    if($(this).progressbar("value") < 100){
                        $("#incr").button("enable")
                    }
                    $("#progVal").text(currentValue);
                    $("#progWrapper").show();
                }
            }
        });

        #("button").click(function(e){
            var divElem = $("#progressDiv");
            if(this.id == "mode"){
                divElem.progressbar("value",false);
            }else{
                var currentProgress = divElem.progressbar("value");
                if(!currentProgress){
                    divElem.progressbar("value",21);
                }else{
                    divElem.progressbar("value",this.id=="decr"?currentProgress-10:currentProgress+10)
                }
            }
        });

    });
script>
<body>
    <div id="progressDiv">div>
    <button id="decr">Decreasebutton>
    <button id="incr">Increasebutton>
    <button id="mode">Indeterminatebutton>
    <span id="progWrapper">Progress:<span id="progVal">span>%span>
body>
html>

JAva集積elastic searchの構築クラスタ

Vue-xlsx excelファイルエクスポート振り回すメモ