<!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. smbcontrol - 向smbd或nmbd进程发送消息

    总览smbcontrol [ -i ] smbcontrol [ 目标 ] [ 消息类型 ] [ 参数 ] 描述这个工具是是Samba组件的一部分. smbcontrol是个很小的程序,用它可以向系统 ...

  2. css day2

    外观属性 color:文本颜色 用于定义文本的颜色 1.预定义的颜色值,如red.green.blue等 2.十六进制,如#FF0000.#FF6600.#29D794等.十六进制是最常用的定义颜色的 ...

  3. 一、小程序内嵌Html示例

    小程序内嵌Html 1.下载wxParse:https://github.com/icindy/wxParse 2.下载完成后将插件目录下的wxParse文件夹拷贝到项目目录下 (文件夹明细) 3.全 ...

  4. hdu1210Eddy's 洗牌问题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1210 Eddy是个ACMer,他不仅喜欢做ACM题,而且对于纸牌也有一定的研究,他在无聊时研究发现,如 ...

  5. Swift--Unmanaged使用

    Unmanaged使用 作者 Nate Cook 翻译者 Croath Liu 2015年4月13日        API 对于开发者来说不只是把功能点接口暴露出来而已,同时也传达给我们一些其他的信息 ...

  6. Hibernate与 MyBatis的区别

    第一章     Hibernate与MyBatis Hibernate 是当前最流行的O/R mapping框架,它出身于sf.net,现在已经成为Jboss的一部分. Mybatis 是另外一种优秀 ...

  7. spring 整合rabbitMQ

    <!-- 配置邮件消息队列监听 --> <bean id="maillistener" class="cn.xdf.wlyy.listener.Mail ...

  8. H2database创建表

    语法和sql server大同小异 create table users(id int primary key not null int identity, name varchar(20))

  9. C++ 常用数学运算(加减乘除)代码实现 Utils.h, Utils.cpp（有疑问欢迎留言）

    Utils.h #pragma once class Utils { public: static double* array_diff(double*A,double B[],int n); sta ...

  10. jquery动态修改带有important的样式方法

    $('.el-card').css("background", "#fff !important");(不起作用的) 改为: $('.el-card').css ...