<!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. 125-FMC125-两路125Msps AD，两路160Msps DA FMC子卡模块

    FMC125-两路125Msps AD,两路160Msps DA FMC子卡模块 1.板卡概述  该板卡可实现2路14bit 250Msps AD 和2路16bit 160MspsDA功能,FMC连接 ...

  2. 一、asp的写法

    一.asp的写法  vs从来都不支持asp,但是可以用vscode写,好多年前写asp的时候,用的是dreamwaver,asp还有创建项目这一说法?调试搭个iis就行了   <html> ...

  3. Polish orthography

    Computer encoding[edit] There are several different systems for encoding the Polish alphabet for com ...

  4. linux中设置虚拟域名

    一.打开tomcat安装目录下conf/server.xml这个文件在server.xml文档中找到 </Engine></Service> 接着添加上面添加以下内容(暂时先说 ...

  5. css 当文字过多时以....省略

    <!-- 公告 --> <p class="rst-promotion">公告: {{shopInfo.rst.promotion_info}}</p ...

  6. Ubuntu16.04安装x11VNC远程桌面

    1. 安装x11vnc sudo apt-get install x11vnc 2. 设置密码 x11vnc -storepasswd 3. 修改配置文件 sudu vim /lib/systemd/ ...

  7. 【leetcode】126. Word Ladder II

    题目如下: 解题思路:DFS或者BFS都行.本题的关键在于减少重复计算.我采用了两种方法:一是用字典dic_ladderlist记录每一个单词可以ladder的单词列表:另外是用dp数组记录从star ...

  8. leetcode-15双周赛-1287-有序数组中出现次数超过25%的元素

    题目描述: 方法一:二分法 class Solution: def findSpecialInteger(self, arr: List[int]) -> int: span = len(arr ...

  9. 英语单词Uninterrupted

    Uninterrupted 来源——不间断电源供应 UPS(Uninterrupted Power Supply) 翻译 adj. 不间断的:连续的 GRE   词根 un- +‎ interrupt ...

  10. delphi 程序嵌入桌面效果的实现

    function Tform1.CreateRegion(wMask:TBitmap;wColor:TColor;hControl:THandle): HRGN; var dc, dc_c: HDC; ...