下拉菜单的jquery组件封装
首先晒出封装好的dropdown.js
(function($){
'use strict';//使用严格模式
//构造函数形式
function Dropdown(elem,options){
//保存到this中才能公用
this.elem=elem;
this.options=options;
this.timer=null;
this.list=this.elem.find(".dropdown-list");//下拉列表是需要动画的部分
this.activeClass=options.active+"-active";
this._init();//初始化
}
Dropdown.defaults={
event:"hover",//还有click
css3:false,
js:false,
animation:"fade",
delay:0,//默认无延迟
active:"dropdown"
};
//约定俗称：内部使用的可以以_开头
Dropdown.prototype._init=function(){
var self=this;
//指定动画模式
this.list.showHide(this.options);
//绑定事件
this.list.on("show shown hide hidden",function(e){
//console.log(e.type);
//消息转发
self.elem.trigger("dropdown-"+e.type);//触发事件
});
if(this.options.event==="click"){
this.elem.click(function(e){
self.show();
e.stopPropagation();//阻止冒泡，否则点击下拉时也会冒泡到document，导致显示后立刻隐藏的效果
});
//点击空白处消失
$(document).click($.proxy(this.hide,this));
}else{//容错机制，写错默认也是hover
this.elem.hover($.proxy(this.show,this),$.proxy(this.hide,this));
}
};
Dropdown.prototype.show=function(){
var self=this;
if(this.options.delay){
//如果有延迟
this.timer=setTimeout(function(){
_show();
},this.options.delay);
}else{
//没有延迟
_show();
}
function _show(){
self.elem.addClass(self.activeClass);
self.list.showHide("show");//show
}
}
Dropdown.prototype.hide=function(){
if(this.options.delay){
clearTimeout(this.timer);
}
this.elem.removeClass(this.activeClass);
this.list.showHide("hide");//show
}
//插件形式
$.fn.extend({
dropdown:function(opt){
return this.each(function(){
var ui=$(this);
var dropdown=ui.data("dropdown");
//opt是参数对象
var options=$.extend({},Dropdown.defaults,ui.data(),typeof opt==="object"&&opt);
//单例：一个DOM元素对应一个实例，如果已经存在则不需要反复实例化
if(!dropdown){
dropdown=new Dropdown(ui,options);
ui.data("dropdown",dropdown);
}
//opt是show或者hide
if(typeof dropdown[opt]==="function"){
dropdown[opt]();
}
});
}
});
})(jQuery);
//为了防止$符发生冲突，将jQuery作为参数传入，则$符作为内部变量，不会发生冲突
使用方法：
在页面中引入base.css https://www.cnblogs.com/chenyingying0/p/12363689.html
transition.js https://www.cnblogs.com/chenyingying0/p/12363649.html
showhide.js https://www.cnblogs.com/chenyingying0/p/12363707.html
dropdown.js （上面刚贴的）
然后上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dropdown</title>
<link rel="stylesheet" href="../css/base.css">
<style>
/*分离出dropdown公共样式*/
.dropdown{
position: relative;
}
.dropdown-toggle{
position: relative;
z-index:2;
}
.dropdown-arrow{
display: inline-block;
vertical-align: middle;
background-repeat: no-repeat;
}
.dropdown-list{
display: none;
position: absolute;
z-index:1;
}
.dropdown-left{
left:0;
right:auto;
}
.dropdown-right{
right:0;
left:auto;
}
/*分离出nav的dropdown独有样式*/
.menu .dropdown-toggle{
display: block;
padding:0 16px 0 12px;
border-right:1px solid #f3f5f7;
border-left:1px solid #f3f5f7;
}
.menu .dropdown-arrow{
margin-left:8px;
vertical-align: middle;
}
.menu .dropdown-list{
border:1px solid #cdd0d4;
background-color: #fff;
top:100%;
overflow:hidden;/*避免容器还没显示时，文字提前显示*/
}
.menu-item{
height:30px;
line-height:30px;
padding:0 12px;
white-space: nowrap;
}
/*鼠标移入*/
.menu-item:hover{
background-color: #f3f5f7;
}
.menu-active .dropdown-toggle{
color:#f01414;
background-color:#fff;
border-color:#cdd0d4;
} @font-face {
font-family: "iconfont";
src: url('../font/iconfont.eot?t=1582272973653'); /* IE9 */
src: url('../font/iconfont.eot?t=1582272973653#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMgAAsAAAAABxAAAALRAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBbIFbATYCJAMMCwgABCAFhG0HQRssBsgekiSCCCFEuNlXEQBAPHzt93ru7n5ElURBCR2BR5Bliy51gKpGVNYCG9XxbMSbd+4zPSCMOgTu9Sct57/89MAB8gDg+U2hMJtwk9PLaOlpn+dyehPoQO6qb1lua9nY4/lRL8A4oEDHGrQICiQgT0F2R6CWvJtA25Ik3NGapi7gonAGBeKOLPLApRRRFCnfFOotM4t4zVEzPUnf8Cr+fvy3M1xIapkz8vi1agso+zX5VZFnqjVDIUG9nAvSPDI2AwpxtTVznr2QOHttk0N/eV0R0lLxqiJWmZb6Qf94iahzartgPc0mfvn7coJfFXdIIIM6Co4BTlN2+u4sWkuugcK7XzPWn03hfqHrBFzKHnD9N/PZ4F7P9ffhg8fc2Vs3r7PmkLOEZ8HuotvxoydrARZ8tPZoJtANHTbfLfNt8m1kb0r92n/hum2PejfY0bcssN9up2U/iqlrDF15exnd72H3eLIT35f1BRwJ/n/uTXKjpdzjBd/wyYYk987lMN+Ix9xY6SQYA1D9yB9yEQDktVT2m3/jYS3h8+ig6F+zU8BP8933OFL9KHBL8yaMMVH5U9VgQzG1jjUXXeWrbF+2/QZdCVrXRsUJjP2ZbpnBtYSmWY6kYRFZ0zJZ2M2o6diNuqYDaNukdn7HBGUvSgsbLRKEoZdI+j4jG/pOFvY3aub+om4Y9mg7G/4rdqyG7FZJEc+QBY5PQ1kgBvbszC2p70CiqfG0qI35HkRtchymp6RV87XIQHSJMbYJMYMxDDElOqwh+yFNI9BKiYIEliIxZi1ITcVtD0oRiA7cHEEhPAaxgMZNg2QCwoDD1oxb7fMdEJFJw6M9ooZiD4SykTuH0qVIA8hakwGJHuUemwmiDAyDQRhF6KAa0g3RaAjI2t5NgQiYFNKElFWBVLcZRk0p21v0/9sGbc7KOVLkKJrXiTlpChLymJJ5jVeCMoMREwAAAAA=') format('woff2'),
url('../font/iconfont.woff?t=1582272973653') format('woff'),
url('../font/iconfont.ttf?t=1582272973653') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('../font/iconfont.svg?t=1582272973653#iconfont') format('svg'); /* iOS 4.1- */
} .iconfont {
font-family: "iconfont" !important;
font-size: 14px;
font-style: normal;/*i标签自带斜体效果*/
-webkit-font-smoothing: antialiased;/*在webkit内核和火狐浏览器中，抗锯齿*/
-moz-osx-font-smoothing: grayscale;
} [class*="-active"] .dropdown-arrow{
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}
/*提取出过渡样式，可公用*/
.transition{
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
/*showhide组件的样式*/
.fadeOut{
opacity: 0;
visibility: hidden;
}
/*收缩样式*/
.slideUpDownCollapse{
height:0 !important;/*避免因为优先级不够而无法生效*/
padding-top:0 !important;
padding-bottom:0 !important;
}
.slideLeftRightCollapse{
width:0 !important;/*避免因为优先级不够而无法生效*/
padding-left:0 !important;
padding-right:0 !important;
}
.dropdown-loading{
width:32px;
height:32px;
background:url(../img/loading.gif) no-repeat;
margin:20px;
}
</style>
</head>
<body>
<!-- 用data-load来确定数据源 -->
<div class="menu dropdown fl" data-active="menu" data-load="dropdown.json">
<a href="javascript:;" class="dropdown-toggle">我的慕淘<i class="dropdown-arrow iconfont transition"></i></a>
<ul class="dropdown-list dropdown-left">
<li class="dropdown-loading"></li>
</ul>
</div>
<div class="menu dropdown fl" data-active="menu">
<a href="javascript:;" class="dropdown-toggle">我的慕淘<i class="dropdown-arrow iconfont transition"></i></a>
<ul class="dropdown-list dropdown-left">
<li class="menu-item"><a href="#">已买到的宝贝</a></li>
<li class="menu-item"><a href="#">我的足迹</a></li>
</ul>
</div> <button class="show-btn">点我显示</button>
<button class="hide-btn">点我隐藏</button> <script src="../js/jquery.js"></script>
<script src="../js/transition.js"></script>
<script src="../js/showhide.js"></script>
<script src="../js/dropdown.js"></script>
<script>
//绑定事件 显示之前加载数据
$(".dropdown").on("dropdown-show",function(e){ var ui=$(this);
var dataLoad=ui.data("load"); if(!dataLoad) return; //只请求一次即可
if(!ui.data("loaded")){ var list=ui.find(".dropdown-list");
var html=""; //$.getJSON(文件,回调) jquery封装的获取json数据的方法
setTimeout(function(){
$.getJSON(dataLoad,function(data){
//console.log(data);
for(var i=0;i<data.length;i++){
console.log(data[i]);
html+='<li class="menu-item"><a href="'+data[i]["url"]+'">'+data[i]["name"]+'</a></li>';
}
//console.log(html);
list.html(html);
ui.data("loaded",true); });
},500);//模拟线上延迟
} }); //指定参数
$(".dropdown").dropdown({
event:"hover",
css3:true,
js:true,
animation:"slideUpDown"
}); //通过按钮也可以控制下拉菜单的显示隐藏
$(".show-btn").on("click",function(){
$(".dropdown").dropdown("show");
});
$(".hide-btn").on("click",function(){
$(".dropdown").dropdown("hide");
});
</script>
</body>
</html>
这块区域是按需加载的过程，设置的是页面第一次加载时，下拉菜单的项没有加载
等到用户将鼠标移入时，通过ajax请求获取数据加载进来
这是dropdown.json数据的结构：
[
{
"url":"#",
"name":"已买到的宝贝"
},
{
"url":"#",
"name":"我的足迹"
},
{
"url":"#",
"name":"我的优惠券"
}
]
效果图
下拉菜单的jquery组件封装的更多相关文章
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- Bootstrap_下拉菜单
在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件. 一.普通下拉菜单 <div class="dropdown"&g ...
- Bootstrap系列 -- 34. 按钮下拉菜单
按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的.不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果.简单点说就是点击一个按钮,会显示隐藏的下拉菜单.按钮下拉菜单其实就是普 ...
- 封装dropdown模块（使用到之前写好的动画组件，封装下拉菜单）
用 showhide 改写dropdown 模块: 1.首先在 css中新增动画相关样式 /*showhide组件的样式*/ .fadeOut{ opacity:; visibility: hidde ...
- 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来. Bootstrap提供了不少的前端UI组件.带下拉 ...
- jQuery手写几个常见的滑动下拉菜单 分分秒秒学习JS
一般的企业网站再我们再实际工作中,有些特效,用jQuery来做,显得极其简单,除非一些大的公司,需要封装自己的类. 今天,我们讲解jQuery入门知识,来写几个简单jQuery滑动下拉菜单.感受一下j ...
- JS列表的下拉菜单组件(仿美化控件select)
JS列表的下拉菜单组件(仿美化控件select) 2014-01-23 23:51 by 龙恩0707, 1101 阅读, 6 评论, 收藏, 编辑 今天是农历23 也是小年,在这祝福大家新年快乐!今 ...
- Bootstrap入门（十）组件4：按钮组与下拉菜单结合
Bootstrap入门(十)组件4:按钮组与下拉菜单结合 先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) < ...
- Bootstrap入门（八）组件2：下拉菜单
Bootstrap入门(八)组件2:下拉菜单 先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link ...
随机推荐
- pta 6-7 统计某类完全平方数 (20分)
6-7 统计某类完全平方数 (20分) 本题要求实现一个函数,判断任一给定整数N是否满足条件:它是完全平方数,又至少有两位数字相同,如144.676等. 函数接口定义: int IsTheNumber ...
- 2019杭电多校赛第九场 Rikka with Mista
Problem Description Rikka is a fervent fan of JoJo's Bizarre Adventure. As the last episode of Golde ...
- 优雅写Java之四(类与对象)
一.类相关用法 二.Bean 三.泛型与注解 四.序列化
- ios--->使用@synchronized和dispatch_once实现单例
使用dispatch_once实现单例 单例实现的两种模式 @implementation XXClass //@synchronized来实现 + (id)sharedInstance { stat ...
- Docker三剑客之Machine
前言简介 Docker-machine(中文翻译docker机):一种提供管理多个docker主机的工具:提供docker主机容器的远程创建.管理.删除等功能:这样的docker主机容器前辈们称之为D ...
- [Java] The imoprt XXX cannot be resolved
不知道为什么突然报错,但是可以成功编译. 通过import一个未使用的包来消除error,猜测是插件的问题,具体原因未知. import 未使用的包后,error消失.
- Ubuntu 入门笔记（1）
在阿里云上申请了一个云服务器,开始学习Linux.我选择的是Ubuntu 14.04 ,在登录时就绕了我好长时间,输入用户名是有显示的,但是输入密码就没有反应了,查找了之后才发现原来这是Ubuntu ...
- 关于2D渲染的一些小想法
原文地址 概述 . 这个项目最初的目的是为了尝试解析现有的UI编辑器(MyGUI)导出的UI布局信息,通过ImGUI还原UI渲染.但是在开发过程中,我发现可以借此实现一个编辑器,一个我不断的寻找,但始 ...
- Android触摸事件传递机制，这一篇就够了
整个触摸事件牵涉到的是,Activity,View,ViewGroup三者的传递机制. 这个触摸事件就是从外层往内层一层层的传递. 整个传递机制,分为3个步骤:分发,拦截,和消费. 1. 触摸事件的类 ...
- 《 Java 编程思想》CH05 初始化与清理
< Java 编程思想>CH05 初始化与清理 用构造器确保初始化 在 Java 中,通过提供构造器,类的设计者可确保每个对象都会得到初始化.Java 会保证初始化的进行.构造器采用与类相 ...