<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index3</title>

    <script src="/plugins/jquery/jquery-1.9.1.js"></script>

    <script type="text/javascript">

        $(function ($) { // 去除冲突

            // 实现$("#txt1").SpecialAlertTip({ width: 300 });

            $.fn.SpecialAlertTip = function (options) {

                var settings = {

                    width: 100,

                    defalutText: "It is Default",

                    placeholder: 'Hello Jquery pulgIn',

                    showSearch: true,

                }

                 // 合并  两个js对象  $.extend({name:1,width:23},{width:55});

                settings = $.extend(settings, options);

                /**

                * Constructor

                */

                function SpecialAlertTip(select, settings) {

                    debugger;

                    this.$select = $(select);

                    this.settings = settings;

                    this.create();

                }

               /**

              * Prototype class

               * 获取：             ShipBusiness.origianlSelect = $("#CustomCargoRemarkV2").data("fSelect");

               * 调用封装控件方法：   ShipBusiness.origianlSelect.reload();

              */

                SpecialAlertTip.prototype = {

                    create: function () {

                        debugger;

                        this.$select.css("width", this.settings.width + "px")

                        this.$select.css("border", "1px solid green");

                        this.$select.before('<div class="fs-label-wrap"><div class="fs-label">' + this.settings.placeholder + '</div><span class="fs-arrow"></span></div>');

                        this.$select.before('<div class="fs-dropdown hidden"><div class="fs-options"></div></div>');

                        this.reload();

                    },

                    reload: function () {

                        debugger;

                        if (this.settings.showSearch) {

                            var search = '<div class="fs-search"><input type="search" placeholder="' + this.settings.searchText + '" /></div>';

                            //this.$wrap.find('.fs-label-wrap').prepend(search);

                        }

                        //this.reloadDropdownLabel();

                    },

                    destroy: function () {

                        debugger;

                    }

                }

                /**

                 * Loop through each matching element

                 */

                return this.each(function () {

                    debugger;

                    var data = $(this).data('SpecialAlertTip');

                    if (!data) {

                        data = new SpecialAlertTip(this, settings);

                        $(this).data('SpecialAlertTip', data);

                    }

                    if (typeof settings == 'string') {

                        data[settings]();

                    }

                });

            }

        })

        // 使用新封装的 jquery控件

        $(document).ready(function () {

            $("#txt1").SpecialAlertTip({ width: 300 });

            //如想调用 内部方法

            var speciallTxt = $("#txt1").data('SpecialAlertTip');

            speciallTxt.reload();

            speciallTxt.settings.showSearch = false;

        })

    </script>

</head>

<body>

    <div>

        <div style="width:300px;border:1px solid silver;text-align:center;margin-bottom:10px;line-height:30px;font-size:18px;margin-left:auto;margin-right:auto;height:30px; "> jQuery 控件封装实例</div>

        <input type="text" id="txt1" />

    </div>

</body>

</html>

　

Juqery插件编写 基础说明的更多相关文章

  1. jQuery插件编写基础之“又见弹窗”

    本文将通过一个实例来引出jQuery插件开发中的一些细节,首先介绍下jQuery插件开发的一些基础知识. jQuery的插件开发主要分为两类: 1. 类级别,即在jQuery类本身上扩展方法,类似与 ...

  2. vue插件编写与实战

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 热爱vue开发的同学肯定知道awesome-vue 这个github地址,里面包含了数以千计的vue ...

  3. chrome插件编写基本入门

    chrome插件编写基本入门  http://igeekbar.com/igeekbar/post/331.htm #精选JAVASCRIPTCHROME 作为一名程序猿,怎么能不会写chrome插件 ...

  4. BugScan插件编写高(gǎo)级(jī)教程

    声明:本文最先发布在:http://q.bugscan.net/t/353 转载请注明出处 有问题可以和我交流 邮件(Medici.Yan@gmail.com) 个人博客地址:http://www.c ...

  5. （转）jQuery插件编写学习+实例——无限滚动

    原文地址:http://www.cnblogs.com/nuller/p/3411627.html 最近自己在搞一个网站,需要用到无限滚动分页,想想工作两年有余了,竟然都没有写过插件,实在惭愧,于是简 ...

  6. jQuery插件编写学习+实例——无限滚动

    最近自己在搞一个网站,需要用到无限滚动分页,想想工作两年有余了,竟然都没有写过插件,实在惭愧,于是简单学习了下jQuery的插件编写,然后分享出来. 先说下基础知识,基本上分为两种,一种是对象级别的插 ...

  7. jmeter 读写excel插件编写教程系列(1) -开篇

    不知道为什么,jmeter 竟然不提供 读写excel 的Sampler! 但是在我们自动化接口测试过程中,参数化.保存测试数据,用excel 是比较好的解决方案! 接下来一段儿时间,大虫会抽出一些时 ...

  8. 【】Nessus安全测试插件编写教程

    Nessus安全测试插件编写教程 作者:Renaud Deraison 翻译:nixe0n 1.怎样编写一个高效的Nessus安全测试插件 在Nessus安全测试系统中, 所有的安全测试都是由ness ...

  9. jQuery插件编写及链式编程模型小结

    JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...

随机推荐

  1. rpmbuild - 构建 RPM 打包

    SYNOPSIS 构建打包: rpmbuild {-ba|-bb|-bp|-bc|-bi|-bl|-bs} [rpmbuild-options] SPECFILE ... rpmbuild {-ta| ...

  2. 05.Linux-CentOS系统普通用户SSH远程问题

    问题:appuser用户SSH远程连接Linux服务器出现的问题: Connecting?to?localhost:22...Connection?established.To?escape?to?l ...

  3. iView的Message提示框

    全局配置message main.js Vue.prototype.$Message.config({ top: 70, duration:3 }); Vue.prototype.$Message.c ...

  4. 1、pip不是内部运行程序 解决方法

    一.方式一 1.切换到pip所在路径: shit+ 右键. 再此处打开运行窗口 2.执行 pip install pytest 脚本即可. 二.方式二,添加环境变量 1.将pip所在的文件路径 添加到 ...

  5. LOJ6437 PKUSC2018 PKUSC

    带劲的计算几何[这一定是我WC之前开的最后一道计几!!! 每个点画个圆然后看一下交点 然后判断是多边形内还是多边形外 这个就是取圆上中点然后射线法 eps我1e-8才过 不知道为啥有的人说只能开1e- ...

  6. Spring入门-框架搭建

    步骤: 导包 四个核心包: 日志包:由于市场上已经有更好的日志包,所以spring不用自己的,而是用apache的日志. 搞对象 由于spring是用来装对象的容器,所以得搞个对象让它装 书写配置文件 ...

  7. 常用jstl

    求list中某一值的和 <c:set var="total" value="${0}" /> <c:forEach var="tLi ...

  8. SpringBoot---注册Servlet,Filter,Listener

    1.概述 1.1.当使用  内嵌的Servlet容器(Tomcat.Jetty等)时,将Servlet,Filter,Listener  注册到Servlet容器的方法: 1.1.1.直接注册Bean ...

  9. cmd美化

    原本的cmd 虽然原本的cmd很简约黑底白字,但是看久了也会视觉疲劳 美化(丑化) 打开cmd右键头部选择属性 字体选项这里可以修改字体的大小和选择字体,修改之后下方会有预览,颜色选项这里点选屏幕文字 ...

  10. java获取当前月第一天和最后一天

    获取当前月第一天: /** * 获取当前月第一天 * @param month * @return */ public static String getFirstDayOfMonth(int mon ...