用H5和Jquery做ipad项目 点击一个h5 input type标签 怎样让弹出来的键盘为手写模式

来源：蜘蛛抓取(WebSpider) 时间：2016-09-07 14:37 标签： h5 input type
18492人阅读
html5（28）
场景描述， 当document的高度不够window的高度时候，如在ip6中文档的高度比窗体的高度小，到底设计在最下方的区域没有在窗体最下方，就留有空白地方如下图的灰色部分
1、 解决初始化文档高度，让文档高度等于窗体高度，并fixed需要定位的区域在最下方(function bottonm(){
if($(document).height()&$(window).height()){
$('.bottom_fix').css({'position':'fixed','bottom':'0px'});
$(document).height($(window).height()+'px');
2、解决输入框input获取焦点得时，虚拟键盘会把fixed元素顶上去(次现在在部分安卓上能发现)如下图
$('#phone').bind('focus',function(){
$('.bottom_fix').css('position','static');
//或者$('#viewport').height($(window).height()+'px');
}).bind('blur',function(){
$('.bottom_fix').css({'position':'fixed','bottom':'0'});
//或者$('#viewport').height('auto');
});参考：/yexiaochai/p/3561939.html
3、解决屏幕旋转也会出现以上问题$(document).bind('orientationchange',function(){
if(window.orientation==90 || window.orientation==-90){
$('.bottom_fix').css('position','static');
$('.bottom_fix').css({'position':'fixed','bottom':'0'});
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：734948次
积分：7761
积分：7761
排名：第1810名
原创：194篇
转载：70篇
评论：70条
(9)(1)(1)(5)(2)(1)(3)(10)(9)(11)(1)(7)(6)(16)(6)(8)(18)(15)(15)(10)(20)(16)(15)(8)(7)(2)(11)(6)(1)(5)(18)HTML做的静态页面，一个弹出框，我想点击这个弹出框的别的地方，让这个页面弹出框隐藏。能用jquery最好_百度知道自己手写简约实用的Jquery tabs插件（基于bootstrap环境）
一直想改版网站首页的图书展示部分，以前的展示是使用BootStrap的传统的collapse,网页篇幅占用大，也不够美观，操作也相对来说比较麻烦。于是有了自己利用Jquery来做一个图书展示的tabs的想法，之前也在网上找了半天，并不是很满意。下面来看看我的实现过程：首先是HTML部分，HTML部分按照结构简约，突出干货的思路来设计。选项卡使用了列表，在列表中插入了超链接，当然这里的超链接只是作为按钮使用的，当点击任何一个链接，就切换到对应的选项卡。选项卡的内容部分直接使用DIV，将图书的展示一本一本的排列在div中，下面看看具体代码：&div class="col-md-8" id="indexbooks"&&!-- 选项卡部分 --&
&h4 class="title" style="padding-bottom:10"&图
书 &ul id="booksfilter" style="float:font-size:14"& &li&&a class="cur" href="javascript:void(0);"&入门&/a&&span&|&/span&&/li&&li&&a href="javascript:void(0);"&实战&/a&&span&|&/span&&/li&&li&&a href="javascript:void(0);"&进阶&/a&&span&|&/span&&/li&&/ul&&/h4&&div class="row"&&div class="booklist"&&!-- 入门级图书展示 --&&div class="col-md-3"&
&div class="thumbnail" style="height:220 border-width:0"&
&a href="/book/577e11aa2f33c" target="_blank"&
&img style="height:130" src="/mpic/s1039608.jpg"&
&div class="caption"&
&h5 style="text-align:"&
&a href="/book/577e11aa2f33c" target="_blank"&
LINUX权威指南（...
&p style="text-align:"&
评论(0)&&span class="badge"&1推荐&/span&&/p&
&!-- 其他入门图书（循环打印） --&
&/div&&div class="booklist"&&!-- 实战型图书展示 --&&div class="col-md-3"&
&div class="thumbnail" style="height:220 border-width:0"&
&a href="/book/577e11aa2f33c" target="_blank"&
&img style="height:130" src="/mpic/s1039608.jpg"&
&div class="caption"&
&h5 style="text-align:"&
&a href="/book/577e11aa2f33c" target="_blank"&
LINUX权威指南（...
&p style="text-align:"&
评论(0)&&span class="badge"&1推荐&/span&&/p&
&!-- 其他实战型图书（循环打印） --&
&div class="booklist"&&!-- 进阶型图书展示 --&&div class="col-md-3"&
&div class="thumbnail" style="height:220 border-width:0"&
&a href="/book/577e11aa2f33c" target="_blank"&
&img style="height:130" src="/mpic/s1039608.jpg"&
&div class="caption"&
&h5 style="text-align:"&
&a href="/book/577e11aa2f33c" target="_blank"&
LINUX权威指南（...
&p style="text-align:"&
评论(0)&&span class="badge"&1推荐&/span&&/p&
&!-- 其他进阶图书（循环打印） --&
&/div&&/div&&由代码可知，该选项卡一共有三个选项，分为入门、实战、进阶，点击不同的选项卡，则会列出该类型的图书。下面来看看样式表部分，看看如何美化选项卡及图书展示部分的内容：&style&//选项卡列表样式#booksfilter li{padding:5px;//内边距 5pxlist-style-type:none;float:left;padding:0px;}//设置&|&的左右边距#booksfilter span{margin-left:5px;margin-right:5px;}//选项卡链接的样式#booksfilter a{
padding:5px;//内边距：5px
text-decoration:none;//无下划线}//选项卡被选中或当鼠标移动到选项卡时的样式#booksfilter a.cur,#booksfilter a:hover{
background-color:#e67e22;//背景色
color:white;//前景色
border-radius:5px;//圆角}&/style&&代码注释已经很详细了，当然大家也可以修改它来设计出更美的样式。而当选项卡点击切换的时候，这部分的交互就要交给Jquery来完成了，它需要设置当前点击的选项卡内容为要显示的内容，而隐藏其他的选项卡，并且设置当前选项卡按钮为选中，删除其他选项卡的选中状态，下面上代码：$(function(){$('#booksfilter a').each(function(i){$(this).click(function(){$(this).addClass('cur');$(this).parent().siblings().find('a').removeClass('cur');//删除其他任何选项的cur类$('.booklist').eq(i).show();//显示本节点$('.booklist').eq(i).siblings().hide();//隐藏兄弟节点})});});&好了，以上就是实现全过程，下面上图，看看完成后的效果：怎么样，还不错吧，当然你也可以修改上述代码做出更好看的tabs,期待与你的交流。本文首发于顶求网，转载请注明来源。
最新教程周点击榜
微信扫一扫

我要回帖

更多关于 h5 input type 的文章

 

随机推荐