jQuery之插件开发--jQuery.fn.extend()

原创于 2017-07-04 20:19:43 发布 · 346 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #插件

js 专栏收录该内容

2 篇文章

订阅专栏

本文档演示了如何使用jQuery的扩展方法来创建一个简单的插件，该插件包括按钮点击事件及弹窗对话功能。通过自定义对话框让用户输入ID，并将输入的ID显示在页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="jquery.js"></script>
    <script src="jqui/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="jqui/jquery-ui.css">
    <style type="text/css">
        .dialog{
            display: none;
        }
    </style>

    <script type="text/javascript">
        (function($){
            $.fn.extend({
                test:function(){
                    this.click(function(){
                        alert($(this).val())
                    });
                },
                dialogTest:function(){
                    var _this = this;
                    $('.dialog').dialog({
                        modal:true,
                        buttons:{
                            确定:function(){
                                rs = $('input[name=id]').val();
                                _this.html(rs);
                                $(this).dialog('close');
                            }
                        }
                    });
                    return this;
                }
            });
        })(jQuery);
    </script>
</head>
<body>
    <div class="show"></div>
    <button id="me">Click Me</button>
    <div class="dialog">
        <input type="text" name="id" placeholder="请输入ID">
    </div>


    <script type="text/javascript">
        $('body').on('click', '#me', function(){
            $('.show').dialogTest();
        });
    </script>
</body>
</html>