jquery 插件学习
练习jquery上的一个插件编写
1.标准的3个基本内容,根目录里面创建2个文件夹(存放css和js)和1个html页面文件;
2.测试的主html页面代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<title>Jqia Context menu - jQuery in Acition</title>
<link rel="stylesheet" href="Css/main.css"/>
<link rel="stylesheet" href="Css/menu.css"/>
<style>
#area{
height:100px;
padding:10px;
margin-bottom:20px;
background-color:#ADD8E6;
}
</style>
</head>
<body>
<h1 class="header">Jqia Context Menu plugin demo</h1> <div id="area">
Click here to show the custom menu.
</div> <button id="init-destroy-button">Init</button> <ul id="context-menu" class="context-menu">
<li>
<a href="http://manning.com/derosa">jQuery in action</a>
</li>
<li>
<a href="http://manning.com/derosa">jQuery.com</a>
</li>
<li>
<a href="http://manning.com/derosa">Manning.com</a>
</li>
</ul>
<script src="Js/jquery-1.11.3.min.js"></script>
<script src="Js/jquery.jqia.contextmenu.js"></script>
<script>
$('#init-destroy-button').click(function () {
var $this = $(this);
if ($this.text() === 'Init'){
$this.text('Destroy');
$("#area").jqiaContextMenu({idMenu:"context-menu"});
}else{
$this.text('Init');
$("#area").jqiaContextMenu("destroy");
} }).click();
</script> </body>
</html>
3.css文件中设置2个css格式文件
3.1第一个main.css
body {
max-width:1024px;
margin: 1em auto;
padding:0 0.5em;
} .clearfix{
zoom:;
} .clearfix:after{
content:" ";
visibility:hidden;
display:block;
height:;
clear:both;
}
3.2 menu.css
ul.context-menu{
position:absolute;
z-index:;
display:none;
background-color:Menu;
list-style-type:none !important;
margin:0 !important;
padding:0 !important;
} ul.context-menu *
{
color:MenuText;
} ul.context-menu > li
{
border:1px solid black;
margin:0 !important;
padding:2px 5px !important;
} ul.context-menu > li:hover
{
background-color:ActiveCaption;
} ul.context-menu > li a
{
display:block;
text-decoration:none;
}
4.存放js的文件中有2个文件,1个是jquery,另一个是插架的js
4.1 jquery引入
4.2 menu.js
(function($){
var namespace='jqiaContextMenu'; var methods = {
init: function(options){
if(!options.idMenu){
$.error('No menu specified');
}else if ($('#' + options.idMenu).length === 0){
$.error('The menu specified does not exist');
}
options = $.extend(true,{},$.fn.jqiaContextMenu.defaults,options); if(
this.filter(function(){
return $(this).data(namespace);
}).length !==0
){
$.error('The plugin has already been initialized');
} this.data(namespace,options); /*
以下是给整个页面添加“点击”和“右击”事件,确保在区域外的点击均能使menu隐藏
*/ $('html').on(
'contextmenu.'+namespace+' click.'+namespace,
function(){
$('#' + options.idMenu).hide();
}
); this.on(
'contextmenu.'+namespace + (options.bindeLeftClick? ' click.'+namespace : ''),
function(event){
event.preventDefault();
event.stopPropagation(); $('#' + options.idMenu).css(
{
top:event.pageY,
left:event.pageX
}).show();
}
); return this;
}, destroy:function(){
this.each(function(){
var options = $(this).data(namespace);
if(options !== undefined){
$('#' + options.idMenu).hide();
}
})
.removeData(name)
.off('.'+namespace); return this;
}
}; $.fn.jqiaContextMenu = function(method){
if(methods[method]){
return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
}else if ($.type(method) === 'object'){
return methods.init.apply(this,arguments);
}else {
$.error('Method ' + method+' dose not on jqQuery.jqiaContextMenu');
}
}; $.fn.jqiaContextMenu.defaults = {
idMenu:null;
bindeLeftClick:false
}; })(jQuery);
5.编写javascript时,要从大局入手,局部在细致描述
jquery 插件学习的更多相关文章
- Jquery插件学习
前端开发也工作了一段时间,Jquery代码页写了很多,但是都是些的很零散的,不是很好用,网上看了很多人写的Jquery 很好用,而且到每个项目中都可以使用, 本人就感觉很好奇他们是怎么做到的呢,于是自 ...
- jquery插件学习之元素顶部悬浮
jquery插件的学习: HTML部分及应用 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- jQuery插件学习(一)
由于项目开发需要,经常会用到一些jquery插件,但网上已有的插件常常又不能100%满足业务需求,所以就想自己能看懂插件的代码,进行一些功能上的改动和补充,或者能自己自定义插件就更好了.所以这段时间会 ...
- jquery插件 - 学习笔记 (插件参数及函数的调用)
今天研究的是jquery插件的基本写法: 比如我打算写一个名为 ImageZoom 的插件 前台调用: <script src="ImageZoom.js"></ ...
- JQUERY插件学习之jQuery UI
jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互 ...
- jQuery插件学习笔记
近期在研究jQuery插件,插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其它地方反复使用,方便后期维护. JQuery除了提供一个简单.有效的方式进行管理元素以及脚本,它还还提供了例外 ...
- [置顶] JQuery插件学习教程
这是JQuery其它常用插件的视频教程,包括validate插件,.comet插件等.同时有大量实例项目,如果你是喜欢JQuery的童鞋千万不要错过. 教程的内容有: 1_validate插件(1) ...
- jQuery插件学习基础
1.给jQuery添加全局的函数: $.zgz={ fn1:function(){ alert('我是刚设置的第一个全局函数') },fn2:function(){ alert('我是刚设置的第二个 ...
- jQuery插件学习之选项卡Tab
在网站开发中经常会用到选项卡功能,为了节省一下写代码时间,封装了一下tab插件,方便调用. 来看一下效果: tab-1 tab-2 tab-3 tabs-1-panel tabs-2-panel ta ...
随机推荐
- IE8下的怪异模式
使用DWZ框架,老是出现点击button后在winxp IE8下出现新页面,经过检查后发现IE8下submit后,return false就不行了,必须使用window.event.returnVal ...
- 二进制中 1 的个数(C++ 和 Python 实现)
(说明:本博客中的题目.题目详细说明及参考代码均摘自 “何海涛<剑指Offer:名企面试官精讲典型编程题>2012年”) 题目 请实现一个函数,输入一个整数,输出该数二进制表示中 1 的个 ...
- 并发包交换数据Exchanger
/** * * @描述: 用于实现两个人之间的数据交换,每个人完成一定的事务后想与对方交换数据,第一个先拿出数据的人一直等待 * 直到第二个人拿到数据 到来时,才能彼此交换数据. * @作者: Wnj ...
- BEM,SASS,LESS,bootstrap:如何有效地将这些方法,工具和框架聪明地整合?
https://medium.com/@andersonorui_/bem-sass-and-bootstrap-9f89dc07d20f Bootstrap是一个“HTML,CSS和Javascri ...
- SQL Server ->> SQL Server 2016重要功能改进之 -- INSERT SELECT时并发插入数据
SQL Server 2016对INSERT INTO XXXX SELECT语句进行了优化,在某些情况下可以触发数据的并行插入,但是要求兼容模式是130(SQL Server 2016)以及在插入的 ...
- 【Leetcode】【Medium】Subsets
Given a set of distinct integers, S, return all possible subsets. Note: Elements in a subset must be ...
- 【Leetcode】【Medium】Best Time to Buy and Sell Stock
Say you have an array for which the ith element is the price of a given stock on day i. If you were ...
- 服务容错处理库Polly使用
服务容错处理库Polly使用 在进入SOA之后,我们的代码从本地方法调用变成了跨机器的通信.任何一个新技术的引入都会为我们解决特定的问题,都会带来一些新的问题.比如网络故障.依赖服务崩溃.超时.服务器 ...
- Dell R720上的系统安装问题的解决办法(关于RAID建立磁盘阵列的技术)
摘要:本篇是本人在搭建大数量存储.搜索环境时,对于使用Dell PowerEdge R720 and R720xd作为服务器所遇到的一些问题进行的总结. 开始时,我们使用Dell提供的安装光盘(蓝色) ...
- poj2312 Battle City 【暴力 或 优先队列+BFS 或 BFS】
题意:M行N列的矩阵.Y:起点,T:终点.S.R不能走,走B花费2,走E花费1.求Y到T的最短时间. 三种解法.♪(^∇^*) //解法一:暴力 //157MS #include<cstdio& ...