<!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. shell命令结果重定向

  2. django框架常用的数据库迁移命令

    python manage.py makemigrations 默认所有修改过的model层转为迁移文件 python manage.py migrate   默认将所有的迁移文件都执行,更新数据库 ...

  3. 前端学习(三十八）vue（笔记）

    Angular+Vue+React    Vue性能最好,Vue最轻=======================================================Angular     ...

  4. contos7安装jdk1.8和tomcat8

    前言 oracle官网下载jdk需要登录,网上携带cookie的方法已经不可用,我自己把jdk下载后放到了自己的服务器上,有需要的可以直接下载. 下载地址 http://149.129.124.185 ...

  5. 从零开始之uboot、移植uboot2017.01（二、从入口分析流程）

    原创: To_run_away 从零开始学linux 本节的开始之前,先看一下uboot的链接脚本. 一.链接脚本 /* * Copyright (c) 2004-2008 Texas Instrum ...

  6. 【串线篇】加谈数据库之连接join

    主题:内连接.左连接(左外连接).右连接(右外连接) 建表语句: CREATE TABLE `a_table` (  `a_id` int(11) DEFAULT NULL,  `a_name` va ...

  7. linux的块设备层

    ll_rw_block()是块设备驱动层,向上提供按block读写块设备到某个内存地址的(是以page为目标单位)方法． bread()是块设备缓冲层,磁盘上的block用页缓存．先从这个缓存里找,找 ...

  8. boost heap

    1. using boost::heap::priority_queue #include <boost/heap/priority_queue.hpp> #include <ios ...

  9. codeforces 111C/112E Petya and Spiders

    题目: Petya and Spiders传送门: http://codeforces.com/problemset/problem/111/C http://codeforces.com/probl ...

  10. php面试专题---1、php中变量存储及引用的原理

    php面试专题---1.php中变量存储及引用的原理 一.总结 一句话总结: 查看变量的存储结构可以安装xdebug扩展,用xdebug_debug_zval()方法,不推荐使用memory_get_ ...