记录一些实用JQ功能

最新推荐文章于 2022-08-30 11:41:23 发布

原创

最新推荐文章于 2022-08-30 11:41:23 发布 · 216 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JQ #手机端通用方法 #宽高自计算 #左右滑动监听

本文介绍了手机端使用JQ的一些实用功能，包括获取屏幕真实高度并设置页面体高度，自动添加输入框清除功能，监听手机端的左右滑动事件，实现通用数据交互等待效果，拦截Android返回键，判断页面是否引入js，以及通过鼠标或手指左右滑动切换内容的实现方法。

获取手机端屏幕宽高（根据头部高度和底部高度动态设置页面体高度）

//网页可见区域宽：document.body.clientWidth 
//网页可见区域高：document.body.clientHeight 
//网页可见区域宽：document.body.offsetWidth (包括边线的宽) 
//网页可见区域高：document.body.offsetHeight (包括边线的宽) 
//网页正文全文宽：document.body.scrollWidth 
//网页正文全文高：document.body.scrollHeight 
//网页被卷去的高：document.body.scrollTop 
//网页被卷去的左：document.body.scrollLeft 
//网页正文部分上：window.screenTop 
//网页正文部分左：window.screenLeft 
//屏幕分辨率的高：window.screen.height 
//屏幕分辨率的宽：window.screen.width 
//屏幕可用工作区高度：window.screen.availHeight 
//屏幕可用工作区宽度：window.screen.availWidth 
/*自动计算并设置内容窗体高度，用户自动适应所有页面布局开始 */
//入参：顶部容器ID、底部容器ID、要计算高度容器ID
function resizePageBodyHeight(topId,bottomId,resetId){
	var totalHeight = document.body.clientHeight;
	//alert(totalHeight);
	var topHeight = $("#"+topId).css("height");
	//alert(parseFloat(topHeight));
	var bottomHeight = $("#"+bottomId).css("height");
	//alert(parseFloat(bottomHeight));
	//alert(parseFloat(totalHeight)-parseFloat(topHeight)-parseFloat(bottomHeight));
	$("#"+resetId).css("height",parseFloat(totalHeight)-parseFloat(topHeight)-parseFloat(bottomHeight));
}

自动为输入框添加清除图片并实现点击清空输入框值

CSS代码（具体的样式需要自己实现，此处仅为参考）：

	.clearImg{
	    display:none;
	    width: 0.24rem;
	    height: 0.24rem;
	    float: right;
	    margin-top: -0.33rem;
	    z-index: 30;
	    position: inherit;
	    margin-right: 0.1rem;
	}

HTML和JQ代码：

	<input name="userId" id="userId" type="text" required="required" placeholder="请输入用户名" class="formInput" >
	<img alt="" src="imgs/clean.png" class="clearImg imgOne">
	/*自动为输入框增加清除输入图片开始 */
	$('input').bind('input propertychange', function() {
		var name = $(this).val();
		if(""!=name){
			$(this).next().css("display","block");
		}else{
			$(this).next().css("display","none");
		}
	});
	$(".clearImg").on("tap",function(){
		$(this).prev().val("");
		$(this).css("display","none");
	});

最低0.47元/天解锁文章