MIP教程大全 百度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-nav-slidedown菜单怎么用?mip-nav-slidedown 实现响应式的菜单,在mip官网有引用,详细的用法请看下文为大家带来的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-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。
mip-html-os操作系统组件怎么使用呢?mip-html-os 用来支持页面内容元素区分OS显示,详细的使用方法请看下文介绍。
标题 | 内容 |
类型 | 通用 |
支持布局 | responsive,fixed-height,fill,container,fixed 文档 |
所需脚本 | https://mipcache.bdstatic.com/static/v1/mip-html-os/mip-html-os.js |
示例
<mip-html-os os="android" class="mip-html-os"><p>This Is Android</p></mip-html-os>
<mip-html-os os="ios" class="mip-html-os"><p>This Is Ios</p></mip-html-os>
属性
os
说明:选择操作系统
必选项:是
类型:字符串
取值范围:android, ios
相关文章
- 专做了百度和google的网盟推广以作推广效果的评估比较。百度的周期为6天,google为4天。 从百度的统计数据可以看出这六天的点击次数总共为464,平均点击花费了0.30元...2017-07-06
- 有时为了网站安全和版权问题,会对自己写的php源码进行加密,在php加密技术上最常用的是zend公司的zend guard 加密软件,现在我们来图文讲解一下。 下面就简单说说如何...2016-11-25
- ps软件是现在很多人都会使用到的,HSL面板在ps软件中又有着非常独特的作用。这次文章就给大家介绍下ps怎么使用HSL面板,还不知道使用方法的下面一起来看看。  ...2017-07-06
- 许多的朋友对于Plesk控制面板应用不是非常的了解特别是英文版的Plesk控制面板,在这里小编整理了一些关于Plesk控制面板常用的使用方案整理,具体如下。 本文基于Linu...2016-10-10
使用insertAfter()方法在现有元素后添加一个新元素
复制代码 代码如下: //在现有元素后添加一个新元素 function insertAfter(newElement, targetElement){ var parent = targetElement.parentNode; if (parent.lastChild == targetElement){ parent.appendChild(newEl...2014-05-31- 大概有如下步骤 新建项目Bejs 新建文件package.json 新建文件Gruntfile.js 命令行执行grunt任务 一、新建项目Bejs源码放在src下,该目录有两个js文件,selector.js和ajax.js。编译后代码放在dest,这个grunt会...2014-06-07
使用percona-toolkit操作MySQL的实用命令小结
1.pt-archiver 功能介绍: 将mysql数据库中表的记录归档到另外一个表或者文件 用法介绍: pt-archiver [OPTION...] --source DSN --where WHERE 这个工具只是归档旧的数据,不会对线上数据的OLTP查询造成太大影响,你可以将...2015-11-24如何使用php脚本给html中引用的js和css路径打上版本号
在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css、js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候,浏览器就可以从浏览器的缓存中获取css、...2015-11-24jQuery 1.9使用$.support替代$.browser的使用方法
jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持 IE 6/7/8。 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9。 如果要全面支持 IE,并混合...2014-05-31安装和使用percona-toolkit来辅助操作MySQL的基本教程
一、percona-toolkit简介 percona-toolkit是一组高级命令行工具的集合,用来执行各种通过手工执行非常复杂和麻烦的mysql和系统任务,这些任务包括: 检查master和slave数据的一致性 有效地对记录进行归档 查找重复的索...2015-11-24- C#注释的一些使用方法浅谈,需要的朋友可以参考一下...2020-06-25
- 一、下载 mysqlsla [root@localhost tmp]# wget http://hackmysql.com/scripts/mysqlsla-2.03.tar.gz--19:45:45-- http://hackmysql.com/scripts/mysqlsla-2.03.tar.gzResolving hackmysql.com... 64.13.232.157Conn...2015-11-24
- 目前,JSON已经成为最流行的数据交换格式之一,各大网站的API几乎都支持它。我写过一篇《数据类型和JSON格式》,探讨它的设计思想。今天,我想总结一下PHP语言对它的支持,这是开发互联网应用程序(特别是编写API)必须了解的知识...2015-10-30
- 无限级分类在开发中经常使用,例如:部门结构、文章分类。无限级分类的难点在于“输出”和“查询”,例如 将文章分类输出为<ul>列表形式; 查找分类A下面所有分类包含的文章。1.实现原理 几种常见的实现方法,各有利弊。其中...2015-10-23
- php类的使用实例教程 <?php /** * Class program for yinghua05-2 * designer :songsong */ class Template { var $tpl_vars; var $tpl_path; var $_deb...2016-11-25
- 前几天在百度知道里面看到有人问PHP中双冒号::的用法,当时给他的回答比较简洁因为手机打字不大方便!今天突然想起来,所以在这里总结一下我遇到的双冒号::在PHP中使用的情况!双冒号操作符即作用域限定操作符Scope Resoluti...2015-11-08
- Promise是异步编程的一种解决方案,在ES6中Promise被列为了正式规范,统一了用法,原生提供了Promise对象。接下来通过本文给大家介绍Promise的介绍及基本用法,感兴趣的朋友一起看看吧...2021-10-21
- 基本思路: 通过使用jquery选择器得到对应表单的jquery对象,然后使用attr方法修改对应的action 示例程序一: 默认情况下,该表单会提交到page_one.html 点击button之后,表单的提交地址就会修改为page_two.html 复制...2014-06-07
- mysqli封装了诸如事务等一些高级操作,同时封装了DB操作过程中的很多可用的方法。应用比较多的地方是 mysqli的事务。...2013-10-02
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
以下是使用js代码实现百度地图计算两地距离,代码如下所示:<script src="js/jquery-1.9.0.js" type="text/javascript" language="javascript"></script><script language="javascript" type="text/javascript" src="js/...2015-10-30