下拉菜单的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 ...
随机推荐
- Qt Installer Framework翻译(6-0)
Qt安装程序框架示例 这些示例说明了如何使用组件脚本来自定义安装程序. Change Installer UI Example 使用组件脚本修改安装程序UI. Component Error Exam ...
- BZOJ 2095 Bridges
题目传送门 分析: 首先就是二分 然后... 混合图欧拉回路是sm... 看了题解Orz 首先要回到原来的点的话,那么每个点入度和出度要相等... 这..和网络流进入点之后就出去不是一样的吗.. 又由 ...
- P2869 [USACO07DEC]美食的食草动物Gourmet Grazers
P2869 [USACO07DEC]美食的食草动物Gourmet Grazers 题目:约翰的奶牛对食物越来越挑剔了.现在,商店有M 份牧草可供出售,奶牛食量很大,每份牧草仅能供一头奶牛食用.第i 份 ...
- 英语学习app——Alpha发布1
英语学习app--Alpha发布1 这个作业属这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience/ ...
- selenium，xpath路径中引入变量
比如,我需要获取每一条微博的阅读数,总不可能所有微博都找出xpath,然后获取阅读数 找规律 “//*[@id='Pl_Official_MyProfileFeed__20']/div/div[2]/ ...
- 《代码整洁之道》&《程序员的职业素养》
这是why技术的第32篇原创文章 春节期间读了两本技术相关的书籍:编程大师Bob大叔的<代码整洁之道>和<代码整洁之道:程序员的职业素养>. <代码整洁之道>出版于 ...
- SpringBoot分布式篇Ⅷ --- 整合SpringCloud
SpringCloud是一个分布式的整体解决方案.Spring Cloud为开发者提供了在分布式系统(配置管理,服务发现,熔断,路由,微代理,控制总线,一次性token,全局锁,leader选举.分布 ...
- Ecplise-SVN插件异常: 由于目标计算机积极拒绝，无法连接。
在Ecplise中,选择team->share project时,出现以下异常 由于目标计算机积极拒绝,无法连接. svn: Unable to connect to a repository ...
- IntelliJ IDEA 2019.3 安装+永久破解[Windows]
IntelliJ IDEA 2019的最后一个版本发布了,听说大幅优化了运行速度,本人实测启动速度确实比以前快不少,所以赶紧安排上新版本IDEA的破解教程 系统环境:Win10 LTSC(1809) ...
- IntelliJ IDEA 2020 的Debug功能也太好用了，真香！
写在前边 作为一个有点强迫症的程序员来说,所有的应用软件.开发工具都必须要升级到最高版本,否则就会很难受到坐立不安.日思夜想.茶饭不思.至于什么时候得的这种病我也记不清了,哈哈哈 IntelliJ I ...