jQuery（十）插件应用

最新推荐文章于 2024-08-31 10:01:42 发布

不许偷苹果

最新推荐文章于 2024-08-31 10:01:42 发布

阅读量149

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_38904347/article/details/82874679

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

layDate 日期与时间组件https://www.layui.com/laydate/
常用常用插件地址http://www.jq22.com/
弹窗插件http://layer.layui.com/
ionic小图标http://www.runoob.com/ionic/ionic-icon.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>插件测试文件</title>
    <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet">
    <!--[if IE]>
        <script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->

    <!-- 编辑器 s -->
    <script type="text/javascript" charset="utf-8" src="03/utf8-php/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="03/utf8-php/ueditor.all.min.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="03/utf8-php/lang/zh-cn/zh-cn.js"></script>
    <!-- 编辑器 e -->

</head>
<body>

    <h5>省市区三级联动</h5>
    <div>
        <form class="form-inline">
          <div data-toggle="distpicker">
            <div class="form-group">
              <label class="sr-only" for="province1">Province</label>
              <select class="form-control" id="province1"></select>
            </div>
            <div class="form-group">
              <label class="sr-only" for="city1">City</label>
              <select class="form-control" id="city1"></select>
            </div>
            <div class="form-group">
              <label class="sr-only" for="district1">District</label>
              <select class="form-control" id="district1"></select>
            </div>
          </div>
        </form>

        <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
        <script src="01/js/distpicker.data.js"></script>
        <script src="01/js/distpicker.js"></script>
        <script src="01/js/main.js"></script>
    </div>

    <br>

    <h5>时间插件</h5>
    <div>
        <input type="text" class="demo-input" placeholder="请选择日期" id="test1">
        <script src="02/layDate-v5.0.9/laydate/laydate.js"></script>
        <script>
            laydate.render({
              elem: '#test1' //指定元素
            });
        </script>
    </div>

    <br>

    <h5>编辑器插件</h5>
    <div>
        <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
        <script type="text/javascript">
            //实例化编辑器
            var ue = UE.getEditor('editor');
        </script>
    </div>

    <br>

    <h5>弹窗插件</h5>
    <div>
        <form action="#" method="get" onsubmit="f_sub();return false;">
            <input type="text" name="userName" id="userName">
            <input type="submit" name="sub" id="sub" value="确定">
        </form>
        <script src="04/layer-v3.1.1/layer/layer.js"></script>
        <script>
            function f_sub(){
                if($('#userName').val()=='')
                {
                    layer.msg('请输入用户名！');
                    $('#userName').focus();
                    return false;
                }
            }
        </script>
    </div>
</body>
</html>