`
LoveLZY
  • 浏览: 57380 次
  • 性别: Icon_minigender_1
博客专栏
Group-logo
从零编写RPC框架
浏览量：0
社区版块
存档分类
最新评论

jqueyr插件helloworld版本

    博客分类：
  • js
jqueryJavaScript 
阅读更多
最近有童鞋找我要jquery插件入门的demo，我把之前的找出来分享下，欢迎拍砖。闲话少说，直接上代码 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
	<style>
	.message{
	  position: fixed;
      top: 30%;
      left: 30%;
      z-index: 1;
      border: 1px black solid;
      width: 200px;
      height: 150px;
      text-align: center;
	}
	.message button{
	  display: block;
      margin: 0 auto;
	}
	
	</style>
    <script src="jquery.min.js"></script>

    <script>
        (function($){
            $.extend({
                message:function(obj) {

                   var $body=$("body");
                   var $div=$("<div class='message'> hello world</div>");
                   var $close=$("<button>关闭</button>");
                    $div.append($close);
                    $body.append($div);

                    $close.on("click",function(){
                        $div.remove();
                      
                    });
            
                }
            });
        })(jQuery);
    </script>
</head>
<button id="testDel">删除</button>
<body>
<script>
$(function(){
    $("#testDel").click(function(){
        $.message();
       
    });
});
</script>
</body>
</html>

这个只是实现一个最简单的提示框，主要熟悉jquery.extend
进阶篇 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
		<style>
	.message{
	  position: fixed;
      top: 30%;
      left: 30%;
      z-index: 1;
      border: 1px black solid;
      width: 200px;
      height: 150px;
      text-align: center;
	}
	.message button{
	  display: block;
      margin: 0 auto;
	}
	
	</style>
    <script src="jquery.min.js"></script>

    <script>
        (function($){
            $.extend({
                message: function(message) {
                   var $body=$("body");
                   var $div=$("<div class='message'></div>");				    
					  $div.text(message||"是否要执行此操作");
                     var $close=$("<button>关闭</button>");
                    $div.append($close);
                    $body.append($div);

                    $close.on("click",function(){
                        $div.remove();
                      
                    });

                   
                }
            });
        })(jQuery);
    </script>
</head>
<button id="testDel">删除</button>
<body>
<script>
$(function(){
    
       $("#testDel").click(function(){
	      //  $.message();
          $.message("hello   ！！！！！！！！！！！！");
       
        });
});
</script>
</body>
</html>

进阶篇新增参数注入和参数默认值。
高级篇 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
	<style>
	.message{
	  position: fixed;
      top: 30%;
      left: 30%;
      z-index: 1;
      border: 1px black solid;
      width: 200px;
      height: 150px;
      text-align: center;
	}
	.message button{
	  display: block;
      margin: 0 auto;
	}
	</style>
    <script src="jquery.min.js"></script>

    <script>
        (function($){
            $.extend({
                message:function(obj) {

                    var success=obj.success;
                    var fail=obj.fail;
                    var message=obj.message||"您确定要执行此操作吗";

                   var $body=$("body");
                   var $div=$("<div class='message'></div>message");
                    $div.text(message);

                    var $t=$("<button>同意</button>");
                    var $f=$("<button>不同意</button>");
                    $div.append($t);
                    $div.append($f);
                    $body.append($div);

                    $t.on("click",function(){
                        $div.remove();
                       if(success &&  typeof(success) === 'function'){
                            success();
                        }
                    });
                    $f.on("click",function(){
                        $div.remove();
                        if(fail && typeof(fail) === 'function'){
                            fail();
                        }
                    });
                }
            });
        })(jQuery);
    </script>
</head>

<body>
<button id="testDel">删除</button>

<script>
$(function(){
    
       $("#testDel").click(function(){
          $.message({
		    message:"hellow!!!!!",
		    success:function(){
		      alert("执行同意操作");
		    },
			fail:function(){
			  alert("执行取消操作");
			}
		  
		  });
       
        });
});
</script>
</body>
</html>

高级篇参数扩展为单个复杂对象，方便以后添加参数。注入相关调用函数。
至此一个简单的helloworld级别的jquery插件demo结束。
这个demo是基于jquery 类对象扩展的。
之后补充一个基于Jquery实例对象扩展的。
两种的应用场景不一样。


分享到：
| java内存机制解析（一）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    OpenWrt之helloworld程序

    在这个"OpenWrt之helloworld程序"中，我们将探讨如何在OpenWrt环境中编写、编译和运行一个简单的 HelloWorld 程序，这将帮助初学者了解OpenWrt的开发流程。 首先，`helloworld` 文件通常是一个C或C++源代码文件，...

    openwrt可用helloworld程序

    《OpenWrt中的Hello, World程序详解》 OpenWrt是一个基于Linux的嵌入式操作系统，广泛应用于无线路由器和其他物联网设备。它提供了高度定制化的环境，允许开发者深度定制设备的功能。在OpenWrt环境中编写和运行...

    hello world hello world

    标题中的“hello world hello world”和描述中的“hello world”似乎是在引用计算机编程中的经典入门程序，通常用于演示一个语言的基本输出功能。在大多数编程语言中，“Hello, World!”是初学者编写的第一个程序，...

    第一个Ext 3.2版本的Hello World程序

    4、打开IE在地址栏输入“http://localhost:8088/FirstExt/HelloWorld.html”之后敲回车，如果一切正常，那么你会看到Ext 3.2版本的Hello world程序--它会一秒钟之后变背景色 阅读对象：希望使用新版本的Ext框架开发...

    Helloworld_helloworld_

    在编程世界中，"Hello, World!"程序是一个经典的起点，用于教授新手如何在特定的编程语言中编写并运行他们的第一个程序。这个简单的程序通常只包含一行代码，用于在控制台上打印出 "Hello, World!" 这个字符串。在这...

    一个helloWorld的简单插件代码

    2. **事件监听**：除了在页面加载时执行，我们也可以将插件绑定到特定的用户事件上，比如点击按钮，这样当用户触发该事件时，才会显示“Hello, World!”。 3. **分离样式**：将CSS样式从JavaScript中分离出来，放在...

    汇编语言实现输出helloworld

    根据给定的文件信息，我们可以总结出以下关于“汇编语言实现输出HelloWorld”的相关知识点： ### 汇编语言简介 汇编语言是一种低级编程语言，它为每种类型的计算机提供了一对一的机器指令映射。汇编语言程序通常由...

    深入淺出Hello World （ HackingHelloWorld-PartI）

    ### 深入淺出Hello World —— Hacking HelloWorld (Part I) #### 概述 在《深入淺出Hello World》这一系列文章中，作者Jim Huang（黃敬群/"jserv"）通过深入剖析经典的“Hello World”程序，旨在帮助读者理解在...

    1.如何创建QT项目-QTcreator输出HelloWorld

    如何创建QT项目之QTcreator输出HelloWorld，小白保姆级别的教程，还有提供参考链接. HelloWorld程序是一个基于Qt框架的简单示例程序，用于展示如何使用Qt进行图形界面编程。这个程序的主要目的是在窗口中显示一个...

    JNI入门之HelloWorld(一)

    ### JNI入门之HelloWorld(一)详解 #### 一、引言 JNI（Java Native Interface）是Java平台标准的一部分，它允许Java代码与其他语言写的代码进行交互。JNI接口提供了若干公共服务，并为Java虚拟机和本机应用程序或...

    Intellij Idea插件开发helloworld

    AndroidStudio确实是一个不错的IDE，它...有的时候可能我们不太满足 于IDE本身的功能，所以需要对IDE进行扩展来开发它的插件。下面是一个简单的例子，http://blog.csdn.net/huweigoodboy/article/details/51427176。

    linux环境下用makefile编译简单的helloworld程序

    在这个“linux环境下用makefile编译简单的helloworld程序”的主题中，我们将深入理解如何创建并使用`Makefile`来编译一个基本的C或C++程序，例如“helloworld”。 首先，`helloworld`程序是一个经典的入门示例，...

    各种语言的Helloworld编程

    【Hello World 编程】是编程世界的入门程序，无论你学习的是哪种编程语言，它都是初学者的第一课。这个简单的程序通常在控制台上打印出 "Hello, World!" 这个短语，以此来验证编译环境和基本语法的正确性。它的起源...

    Hello World.rar_c++ hello world_world

    在编程世界中，"Hello, World!" 是每个初学者接触的第一个程序，它标志着编程旅程的开始。本主题将深入探讨如何使用C++语言编写这个经典的 "Hello, World!" 程序，以及C++的基本语法和环境配置。 C++ 是一种强类型...

    一个简单的qt版helloworld程序

    本压缩包包含的“一个简单的qt版helloworld程序”是初学者接触Qt编程的一个基础示例，旨在帮助理解Qt的基本语法和项目构建过程。 首先，让我们来理解一下Qt中的"Hello, World!"程序的基本结构。在Qt中，我们通常会...

    MDK5.15版本的HelloWorld

    这是我自己在MDK5.15环境写的一个STM32F103RCT6运行的HelloWorld程序，用的固件库版本是V3.5.0。固件库也包含在里面。使用的串口是USART1。分享给大家，希望可以为大家节省一点开发时间。

    SpringMVC ---- HelloWorld ---- 代码

    SpringMVC ---- HelloWorld ---- 代码 SpringMVC ---- HelloWorld ---- 代码 SpringMVC ---- HelloWorld ---- 代码 SpringMVC ---- HelloWorld ---- 代码 SpringMVC ---- HelloWorld ---- 代码 SpringMVC ---- Hello...

    hello world.jar

    hello world java编程

    struts2 helloworld

    "Struts2 HelloWorld"是学习Struts2框架的基础教程，通过这个例子，我们可以了解Struts2的基本配置和工作流程。 首先，让我们从项目结构开始。在"struts2_helloWorld"压缩包中，通常会包含以下几个关键文件： 1. *...

    火狐扩展插件HelloWorld项目

    "HelloWorld"项目就是一个典型的入门级教程，旨在帮助初学者了解如何开发自己的火狐扩展。 开发火狐扩展通常涉及以下几个关键知识点： 1. **XUL（XML User Interface Language）**：XUL是Mozilla使用的一种标记...

Magicbox
Global site tag (gtag.js) - Google Analytics