<!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. linux下的软链接与硬链接

    在 Linux 底下的连结档有两种,一种是类似 Windows 的快捷方式功能的文件,可以让你快速的链接到目标文件(或目录);这种链接称为软链接. 另一种则是透过文件系统的 inode 连结来产生新档 ...

  2. .net core 控制台程序生成EXE

    在项目上右键编辑xxx.csproj,添加一行 <RuntimeIdentifier>win7-x64</RuntimeIdentifier>

  3. docker：docker的基本了解

    1.什么是docker 简单的理解:docker相当于vmvare,容器相当于多个虚拟机,vmvare上可以运行ubantu16.04的虚拟机,也可以运行centos虚拟机,还可以运行redhat虚拟 ...

  4. navicat12过期问题，Windows平台。

    首先关闭Navicat 然后 win+R,输入regedit 回车,打开注册表编辑器: 删除HKEY_CURRENT_USER\Software\PremiumSoft\Data 展开HKEY_CUR ...

  5. 学习笔记：Apache Kylin 概述

    一.kylin解决了什么关键问题? Apache Kylin的初衷就是解决千亿.万亿条记录的秒级查询问题,其中的关键就是打破查询时间随着数据量呈线性增长的这一规律. 大数据OLAP,我们可以注意到两个 ...

  6. 媲美5G的Wifi网速、“备战”资产一键领……揭秘双11小二背后的保障力量

    如今,双11不光是购物狂欢节,更是对技术的一次“大考”,对于阿里巴巴企业内部运营的基础保障技术而言,亦是如此. 回溯双11历史,这背后也经历过“小米加步枪”的阶段:作战室从随处是网线,交换机放地上的“ ...

  7. NOIp 图论算法专题总结 (3)：网络流 & 二分图 简明讲义

    系列索引: NOIp 图论算法专题总结 (1) NOIp 图论算法专题总结 (2) NOIp 图论算法专题总结 (3) 网络流 概念 1 容量网络(capacity network)是一个有向图,图的 ...

  8. 信息安全-攻击-XSS：XSS/CSS 攻击

    ylbtech-信息安全-攻击-XSS:XSS/CSS 攻击 XSS攻击通常指的是通过利用网页开发时留下的漏洞,通过巧妙的方法注入恶意指令代码到网页,使用户加载并执行攻击者恶意制造的网页程序.这些恶意 ...

  9. 如何为mysql建立索引

    前些时候,一位颇高级的程序员居然问我什么叫做索引,令我感到十分的惊奇,我想这绝不会是沧海一粟,因为有成千上万的开发者(可能大部分是使用MySQL的)都没有受过有关数据库的正规培训,尽管他们都为客户做过 ...

  10. 报错记录（xml抬头报错）

    报错记录(xml抬头报错) Referenced file contains errors (http://www.springframework.org/schema/beans/spring-be ...