自己用Jquery封装的进度条插件,怎么在自己的项目中调用?

简单写了一个假的进度条插件,但是不知道如何进一步封装在项目中使用

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>进度条</title>
<style>
    .wrap-content{
        position: relative;
        display: none;
    }
    div.progress{
        width: 618px;
        height: 66px;
        background: url("img/loading_bg.png") no-repeat;
    }
    .progress-bar{
        width: 0;
        height:20px;
        position: absolute;
        top: 12px;
        left: 14px;
        display: block;
        border-radius:15px;
    }
    .percent{
        color: #fff;
        font-size: 16px;
        position: absolute;
        left: 494px;
        top: 34px;
        display: none;
    }
</style>

</head>
<body>
<div class="wrap-content">

<div class="progress" id="progress">
    <img src="img/loading_in.png" alt="" class="progress-bar" id="progress-bar">
    <span class="percent" id="percent">100%</span>
</div>

</div>
<h1><input id="load_btn" type="button" value="调用进度条"></h1>
<script src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="progress.js"></script>
</body>
</html>
$(function () {

$("#load_btn").on("click", function () {
    $(".wrap-content").css("display","block");
    $("#progress-bar").css({
        "display": "block",
        "width": "40px"
    });
    $(".percent").css("display", "block").text("6%");
    var test = setInterval(function () {
        var $progress_bar = $("#progress-bar"),
            percentage,
            progress_bar_width = $progress_bar.css("width");
        progress_bar_width = parseInt(progress_bar_width) + 5 + "px";
        if (parseInt(progress_bar_width) >= 590) {
            clearInterval(test);
        }
        percentage = Math.floor(parseInt(progress_bar_width) / 590 * 100);
        $(".percent").text(percentage + "%");
        $progress_bar.css("width", progress_bar_width);
    }, 300);
})

});

阅读 3.4k
2 个回答

简单的一点封装,就是把里面涉及到的 id ,class 等等元素,通过this, find ,parents 等,去实现。
最后调用这个方法,只要传一个最大的元素id或class进去。
这样可以复用。

jQuery插件封装一般都是用

$.fn.myPlugin = function(){}

来封装,网上例子很多

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题