正文

新手必看！实用jQuery插件盘点：轻松提升网页交互效果

/0 浏览量
0330

jQuery是一个非常流行和强大的JavaScript库，它简化了HTML文档的遍历、事件处理、动画和AJAX操作。为了帮助新手更好地使用jQuery，这里为您盘点了一些实用的jQuery插件，它们可以帮助您轻松提升网页的交互效果。

一、表单美化插件

1. BootstrapValidator

BootstrapValidator是一款基于Bootstrap的表单验证插件，它可以轻松地实现表单数据的验证。以下是它的使用代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>BootstrapValidator表单验证插件示例</title>
  <!-- 引入Bootstrap样式 -->
  <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <!-- 引入BootstrapValidator样式 -->
  <link href="https://cdn.staticfile.org/bootstrapValidator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">
</head>
<body>
  <form class="form-horizontal" id="registerForm">
    <div class="form-group">
      <label class="col-sm-2 control-label">用户名</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" name="username" data-bv-notempty="true" data-bv-stringlength="true" data-bv-stringlength-min="6" data-bv-stringlength-max="30" />
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-primary">注册</button>
      </div>
    </div>
  </form>

  <!-- 引入jQuery和BootstrapValidator脚本 -->
  <script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdn.staticfile.org/bootstrapValidator/0.5.3/js/bootstrapValidator.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#registerForm').bootstrapValidator({
        feedbackIcons: {
          valid: 'glyphicon glyphicon-ok',
          invalid: 'glyphicon glyphicon-remove',
          validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
          username: {
            validators: {
              notEmpty: {
                message: '请输入用户名'
              },
              stringLength: {
                min: 6,
                max: 30,
                message: '用户名长度必须在6到30之间'
              },
              different: {
                field: 'confirmUsername',
                message: '用户名与确认用户名不匹配'
              }
            }
          }
        }
      });
    });
  </script>
</body>
</html>

2. Inputmask

Inputmask是一个jQuery插件，它可以让你轻松地实现各种输入掩码。例如，电话号码、日期、信用卡号等。以下是它的使用代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Inputmask输入掩码插件示例</title>
  <script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/jquery-inputmask/4.0.0-rc.1/jquery.inputmask.min.js"></script>
</head>
<body>
  <input type="text" id="phone" />
  <script>
    $(document).ready(function() {
      $('#phone').inputmask('mask', {'mask': '(999) 999-9999'});
    });
  </script>
</body>
</html>

二、日期时间选择插件

1. bootstrap-datepicker

bootstrap-datepicker是一款基于Bootstrap的日期选择插件，它可以让你轻松地实现各种日期和时间的输入选择。以下是它的使用代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>bootstrap-datepicker日期选择插件示例</title>
  <!-- 引入Bootstrap样式 -->
  <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <!-- 引入bootstrap-datepicker样式 -->
  <link href="https://cdn.staticfile.org/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" rel="stylesheet">
  <!-- 引入jQuery -->
  <script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script>
  <!-- 引入Bootstrap和bootstrap-datepicker脚本 -->
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdn.staticfile.org/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <input type="text" class="form-control" id="date" />
      </div>
    </div>
  </div>
  <script>
    $(document).ready(function() {
      $('#date').datepicker({
        autoclose: true,
        format: 'yyyy-mm-dd'
      });
    });
  </script>
</body>
</html>

三、轮播图插件

1. Bootstrap Carousel

Bootstrap Carousel是一款基于Bootstrap的轮播图插件，它可以让你轻松地实现轮播效果。以下是它的使用代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Bootstrap Carousel轮播图插件示例</title>
  <!-- 引入Bootstrap样式 -->
  <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <!-- 引入jQuery -->
  <script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script>
  <!-- 引入Bootstrap脚本 -->
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- 指示器 -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <!-- 轮播图片 -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="https://example.com/image1.jpg" alt="...">
        <div class="carousel-caption">
          <h4>轮播图1</h4>
          <p>这是轮播图1的描述信息</p>
        </div>
      </div>
      <div class="item">
        <img src="https://example.com/image2.jpg" alt="...">
        <div class="carousel-caption">
          <h4>轮播图2</h4>
          <p>这是轮播图2的描述信息</p>
        </div>
      </div>
      <div class="item">
        <img src="https://example.com/image3.jpg" alt="...">
        <div class="carousel-caption">
          <h4>轮播图3</h4>
          <p>这是轮播图3的描述信息</p>
        </div>
      </div>
    </div>
    <!-- 控制按钮 -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</body>
</html>

四、下拉菜单插件

1. Selectize.js

Selectize.js是一款基于jQuery的下拉菜单插件，它可以让你轻松地实现自定义的下拉菜单。以下是它的使用代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Selectize.js下拉菜单插件示例</title>
  <!-- 引入jQuery和Selectize.js样式 -->
  <link href="https://cdn.staticfile.org/jquery/1.11.1/jquery.min.js" rel="stylesheet">
  <link href="https://cdn.staticfile.org/selectize.js/0.12.0/css/selectize.css" rel="stylesheet">
  <!-- 引入Selectize.js脚本 -->
  <script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/selectize.js/0.12.0/js/selectize.js"></script>
</head>
<body>
  <form class="form-horizontal" id="form">
    <div class="form-group">
      <label class="col-sm-2 control-label">国家</label>
      <div class="col-sm-10">
        <select id="country" class="form-control" multiple="multiple">
          <option value="China">中国</option>
          <option value="USA">美国</option>
          <option value="Japan">日本</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-primary">提交</button>
      </div>
    </div>
  </form>
  <script>
    $(document).ready(function() {
      $('#country').selectize({
        plugins: ['remove_button'],
        delimiter: ',',
        create: function(input) {
          return {
            value: input,
            text: input
          };
        }
      });
    });
  </script>
</body>
</html>

五、其他实用插件

1. jQuery Mask Plugin

jQuery Mask Plugin是一个jQuery插件，它可以让你轻松地实现各种格式的电话号码、邮政编码等。以下是它的使用代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>jQuery Mask Plugin电话号码插件示例</title>
  <!-- 引入jQuery -->
  <script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/jquery-mask-plugin/1.14.13/jquery.mask.min.js"></script>
</head>
<body>
  <input type="text" id="phone" />
  <script>
    $(document).ready(function() {
      $('#phone').mask('(999) 999-9999');
    });
  </script>
</body>
</html>

2. jQuery ScrollTo插件

jQuery ScrollTo插件可以让网页在滚动到指定的元素时自动滚动到该元素的位置。以下是它的使用代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>jQuery ScrollTo插件示例</title>
  <!-- 引入jQuery -->
  <script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
</head>
<body>
  <button id="scrollToElement">滚动到指定元素</button>
  <div id="content">
    <h1>标题1</h1>
    <p>内容1</p>
    <h1>标题2</h1>
    <p>内容2</p>
    <h1>标题3</h1>
    <p>内容3</p>
    <h1>标题4</h1>
    <p>内容4</p>
  </div>
  <script>
    $(document).ready(function() {
      $('#scrollToElement').click(function() {
        $('#content').scrollTo(300, {axis: 'y'});
      });
    });
  </script>
</body>
</html>

通过以上这些jQuery插件，您可以在不花费太多时间和精力的情况下，轻松提升网页的交互效果。希望这篇文章能帮助您更好地学习和使用jQuery插件！

-- 展开阅读全文 --