mip-nav-slidedown菜单详解 mip-nav-slidedown菜单怎么用
标题 | 内容 |
类型 | 通用 |
支持布局 | responsive,fixed-height,fill,container,fixed 文档 |
所需脚本 | https://mipcache.bdstatic.com/static/v1/mip-nav-slidedown/mip-nav-slidedown.js |
示例
按如下格式添加内容,<a>可以替换为<mip-link>
<div class="mip-nav-wrapper">
<mip-nav-slidedown data-id="bs-navbar" class="mip-element-sidebar container" data-showbrand="1">
<nav id="bs-navbar" class="navbar-collapse collapse navbar navbar-static-top">
<ul class="nav navbar-nav navbar-right">
<li class="index-body">
<a target="_blank" href="//www.mipengine.org/">首页</a>
</li>
<li class="doc-body">
<a target="_blank" href="//www.mipengine.org/doc/00-mip-101.html">教程</a>
</li>
<li class="timeline-body">
<a target="_blank" href="//www.mipengine.org/timeline.html">动态</a>
</li>
<li class="">
<a target="_blank" href="http://www.cnblogs.com/mipengine/" target="_blank">博客</a>
</li>
<li class="navbar-wise-close">
<span id="navbar-wise-close-btn"></span>
</li>
</ul>
</nav>
</mip-nav-slidedown>
</div>
属性
data-id
说明:内部菜单id
必选项:是
类型:字符串
data-showbrand
说明:是否需要左上角显示可点击图标
必选项:否
类型:字符串,0(不显示),1(显示)
默认值:1
data-brandhref
说明:左上角图标跳转链接,在data-showbrand为1时有效
必选项:否
类型:url
默认:'/'
MIP的中文名为移动网页加速器,用于M端的加速优化,百度mip推出之后,有很多的站长不知道怎么使用这种工具,下面一聚教程网为大家带来了全面系统的使用方法,希望对大家有所帮助。新手指南
完整 DEMO
什么是 MIP
MIP 加速原理
开发规范
MIP HTML规范
MIP 校验规则
MIP Cache 规范
组件 开发规范
Canonical 使用规范
组件说明
组件概述
组件布局
内置组件
mip-carousel 多图轮播
mip-iframe
mip-img 图片
mip-pix 统计
mip-video 视频
个性化组件
mip-accordion 折叠节点
mip-anim 动图
mip-appdl 下载
mip-audio 音频播放
mip-filter 筛选
mip-fixed 悬浮布局
mip-form 表单
mip-gototop 快速回顶
mip-html-os 操作系统
mip-lightbox 弹层
mip-link 跳转链接
mip-nav-slidedown 菜单
mip-share 分享
mip-sidebar 侧边栏
mip-stats-baidu 百度统计
mip-stats-tianrun 天润统计
mip-vd-tabs tab切换组件
广告组件
mip-ad 广告
类型: ad-baidu 网盟广告
类型: ad-baidu-wm-ext 网盟扩展广告
类型: ad-comm 通用广告
类型: ad-imageplus 图加广告
类型: ad-qwang 全网推荐
类型: ad-ssp 内容联盟广告
工具接口
开发辅助工具和模块
手势
其它
mip-link跳转链接怎么用?mip-link 用来支持在 mip 页面跳转,解决类似 iframe 嵌套情况下不能跳出父级的问题,详细的使用方法请看下文的mip-link跳转链接组件详解。
标题 | 内容 |
类型 | 通用 |
支持布局 | 不使用布局 |
所需脚本 |
https://mipcache.bdstatic.com/static/v1/mip-link/mip-link.js |
示例
<mip-link href="http://m.baidu.com">链接文字</mip-link>
属性
url
说明:目标网址
必选项:是
类型:字符串
取值范围:https?://.*, mailto:.*, tel:.*
title
说明:目标页面标题
必选项:否
类型:字符串
取值范围:任何
默认值:""
mip-lightbox 弹层怎么用,mip-lightbox 是由用户控制展现或关闭的一个全屏浮层组件,组件全屏覆盖,组件里的元素超出屏幕会被隐藏,不能滑动,下面请看详细的使用方法。标题 | 内容 |
类型 | 通用 |
支持布局 | N/S |
所需脚本 | https://mipcache.bdstatic.com/static/v1/mip-lightbox/mip-lightbox.js |
示例
<button on="tap:my-lightbox.open" id="btn-open" role="button" tabindex="0"> Open lightbox </button> <mip-lightbox id="my-lightbox" layout="nodisplay" class="mip-hidden"> <div class="lightbox"> <h1>Hello, World!</h1> <p> this is the lightbox</p> </div> </mip-lightbox> |
属性
id
说明:组件ID
必选项:是
类型:字符串
layout
说明:布局
必选项:是
类型:字符串
取值:nodisplay
注意事项
mip-lightbox 默认是隐藏的,作为打开开关的 dom 节点 需设置 on 属性,且 on 属性的属性值为 "tap:组件ID.open"。
作为关闭 lightbox 的 dom 节点需要设置 on 属性,且 on 属性值为"tap:组件ID.close"。
同时作为打开关闭 lightbox 的 dom 节点需要设置 on 属性,且 on 属性值为"tap:组件ID.toggle"。
mip-lightbox 需要一个 div 子节点,这个 div 的 calss 必须有 lightbox。
相关文章
Spring Cloud 中@FeignClient注解中的contextId属性详解
这篇文章主要介绍了Spring Cloud 中@FeignClient注解中的contextId属性详解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-09-25- 下面我们来看一篇关于Android子控件超出父控件的范围显示出来方法,希望这篇文章能够帮助到各位朋友,有碰到此问题的朋友可以进来看看哦。 <RelativeLayout xmlns:an...2016-10-02
- 本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果。分享给大家供大家参考,具体如下:先来看如下运行效果截图:在线演示地址如下:http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/具体代码如...2015-11-08
- 本文实例讲述了JS基于Mootools实现的个性菜单效果代码。分享给大家供大家参考,具体如下:这里演示基于Mootools做的带动画的垂直型菜单,是一个初学者写的,用来学习Mootools的使用有帮助,下载时请注意要将外部引用的mootools...2015-10-23
- 本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考,具体如下:这是一款纵向布局的CSS+JavaScript滑动门代码,相当简洁的手法来实现,如果对颜色不满意,你可以试着自己修改CSS代码,这个滑动门将每一...2015-10-21
c# WPF中通过双击编辑DataGrid中Cell的示例(附源码)
这篇文章主要介绍了c# WPF中通过双击编辑DataGrid中Cell的示例(附源码),帮助大家更好的理解和学习使用c#,感兴趣的朋友可以了解下...2021-03-03Android开发中findViewById()函数用法与简化
findViewById方法在android开发中是获取页面控件的值了,有没有发现我们一个页面控件多了会反复研究写findViewById呢,下面我们一起来看它的简化方法。 Android中Fin...2016-09-20- 如果我们的项目需要做来电及短信的功能,那么我们就得在Android模拟器开发这些功能,本来就来告诉我们如何在Android模拟器上模拟来电及来短信的功能。 在Android模拟...2016-09-20
- 夜神android模拟器如何设置代理呢?对于这个问题其实操作起来是非常的简单,下面小编来为各位详细介绍夜神android模拟器设置代理的方法,希望例子能够帮助到各位。 app...2016-09-20
- 为了增强android应用的用户体验,我们可以在一些Button按钮上自定义动态的设置一些样式,比如交互时改变字体、颜色、背景图等。 今天来看一个通过重写Button来动态实...2016-09-20
- 如果我们要在Android应用APP中加载html5页面,我们可以使用WebView,本文我们分享两个WebView加载html5页面实例应用。 实例一:WebView加载html5实现炫酷引导页面大多...2016-09-20
- 本文实例讲述了jQuery实现有动画淡出效果的二级折叠菜单代码。分享给大家供大家参考,具体如下:这里介绍jQuery实现有动画淡出效果的二级折叠菜单代码,相当不错,因考虑功能的实现,所以没有怎么美化,不过这样也好,可以给大家更...2015-10-21
- 深入理解Android中View和ViewGroup从组成架构上看,似乎ViewGroup在View之上,View需要继承ViewGroup,但实际上不是这样的。View是基类,ViewGroup是它的子类。本教程我们深...2016-09-20
- 下面我们来看一篇关于Android自定义WebView网络视频播放控件开发例子,这个文章写得非常的不错下面给各位共享一下吧。 因为业务需要,以下代码均以Youtube网站在线视...2016-10-02
- java开发的Android应用,性能一直是一个大问题,,或许是Java语言本身比较消耗内存。本文我们来谈谈Android 性能优化之MemoryFile文件读写。 Android匿名共享内存对外A...2016-09-20
- TextView默认是横着显示了,今天我们一起来看看Android设置TextView竖着显示如何来实现吧,今天我们就一起来看看操作细节,具体的如下所示。 在开发Android程序的时候,...2016-10-02
- 这篇文章主要为大家详细介绍了jQuery实现下拉菜单滑动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-08-09
android.os.BinderProxy cannot be cast to com解决办法
本文章来给大家介绍关于android.os.BinderProxy cannot be cast to com解决办法,希望此文章对各位有帮助呀。 Android在绑定服务的时候出现java.lang.ClassCastExc...2016-09-20- 本文实例讲述了jQuery实现可关闭固定于底(顶)部的工具条菜单效果。分享给大家供大家参考,具体如下:这是一款可关闭始终在页面底部的工具条菜单,浮动在页面顶部的大家见的比较多了,本款从形式上来说与其它的没什么差别,只是浮...2015-11-08
- 二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动。本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果。 实现效果:当选择大类时,小类下拉框里的选项内容也随着改...2015-10-30