JQuery mobile滑动触发打开面板

最新推荐文章于 2024-06-15 20:48:16 发布
最新推荐文章于 2024-06-15 20:48:16 发布
阅读量870 收藏
点赞数
文章标签： JQuery Mobile 滑动面板
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39071593/article/details/83382132
版权

JQuery Mobile简单实现屏幕向右滑动实现弹出面板
效果图
在这里插入图片描述
在这里插入图片描述
核心代码

<script>
$(document).on("pagecreate","#pageone",function(){  //功能加载
  $("p").on("swipe",function(){					//选择P标签监听滑动事件
    //$("swiperight").text("滑动检测!");				//一旦滑动就打开a标签
	 $('a').click();
  });                       
});
</script>

<!--也可以这样写-->
<script>
$(document).ready(function(){
  $("p").on("swiperight",function(){
    //$("span").text("滑动检测!");
	 $('a').click();
  });                       
});
</script>

完整演示代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#pageone",function(){
  $("p").on("swiperight",function(){
    //$("span").text("滑动检测!");
	 $('a').click();
  });                       
});
</script>
</head>
<body>

<div data-role="page" id="pageone">
	
   <div data-role="panel" id="myPanel"> 
    <h2>面板头部</h2>
    <p>你可以通过点击面板外部区域或按下 Esc 键或滑动来关闭面板。</p>
  </div>
	
  <div data-role="header">
    <h1>swipe 事件</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>在下面的文本或方框上滑动。</p>
    <p style="border:1px solid black;height:200px;width:200px;"></p>
    <a href="#myPanel"></a>
  </div>

  <div data-role="footer">
    <h1>页脚文本</h1>
  </div>
</div> 

</body>
</html>
YangCaine
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery-mobile之简单的图片轮播
YYxiaobao0726的博客
03-13 2267
&nbsp;&nbsp;&nbsp;&nbsp;最近开始学习jQuery-mobile，讲解了一个简单的图片轮播（要对jQuery有一定的基础），下面我将代码分享出来。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/t
jQuery Mobile学习笔记02——jQuery Mobile实现监听左右滑动变换图片
tongbiaos的博客
08-28 2941
1.效果展示 通过在图片上左右滑动达到切换图片的效果。   2.代码 这里我们要借用jQuery Mobile来实现这一功能，因为jQuery中没有自带检测左右滑动这一功能。 将下面这段代码直接放入$(document).ready(function(){ });中，即可监听在“#clothimg”上的左右滑动事件。   3.注意： （1）当然需要引入jQuery Mobile
jQuery学习教程，写更少的代码,做更多的事情（二）
最新发布
2401_85124119的博客
06-15 1021
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。前端面试题汇总JavaScript性能linux。
jquery_mobile移动端幻灯片效果，滑动切换，点击切换
天步的博客
01-14 1975
自动适应设备的宽度，滑动会切换大图，底部导航跟随切换。点击底部导航切换大图。使用的jquery_mobile插件，引入1.4.5的插件，CSS表和jquery库即可，除了ID,CLASS命名可能会和你项目重复，改成单独即可，其他应该没有重复的，因为本脚本使用计时器写的，加入了方法判定，在执行一个方法的时候，锁定其他方法禁止执行，不会冲突，使用计时器来控制动画，可能不尽如人意，准备重构一下改成Jquery的animate()方法来执行动画效果。近期重构好在上传使用内置方法不用计时器的版本吧。
【jQueryMobile】使用jQueryMobile实现滑动翻页的效果
编程记录，亲测有效
12-11 5609
滑动手势在移动设备是很流行的，在移动设备中滑动翻页中很常见 虽然这个功能可以在jQueryMobile中实现，但是个人与之前写的《【jQuery】论手机浏览器中拖拽动作的艰难性》（点击打开链接）中的观点一直，由于这是在手机浏览器中浏览，而不是安卓的一个独立APP，所以不要经常除点击以外的移动设备手势，以免跟手机浏览器与手机系统本身的手势发生冲突。 那么，使用jQueryMobile实现滑动翻页
jquery mobile图片轮换（img）
05-17
jquery mobile 图片轮换 html5 可以有用google等浏览器测试,test.html是普通的图片轮换，test1.html是html5图片轮换，按住右键向右或者向左滑动且滑动的距离大于等于30px。 1.向右滑动，图片停留，任意点图片之外空白处，图片开始向右轮换 2.向左滑动，图片停留，任意点图片之外空白处，图片开始向左轮换
jquery mobile面板左右滑动
06-28
打开面板 ``` 这里的 `href="#myPanel"` 指向面板的 ID，`data-rel="panel"` 告诉 jQuery Mobile 这是一个面板触发器。 3. **初始化**：在页面加载完成后，需要初始化 jQuery Mobile，确保所有组件都能正常工作： ...
使用jQueryMobile实现滑动翻页效果的方法
10-24
主要介绍了使用jQueryMobile实现滑动翻页效果的方法,较为详细的分析了jQueryMobile实现滑动翻页效果的原理与实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jQuerymobile 滑动选择时间
11-13
10. **兼容性和集成**：jQuerymobile 滑动选择时间组件可以轻松地与其他 jQuery Mobile UI 组件结合使用，例如表单、对话框或面板，以构建完整的移动应用界面。 在实际项目中，通过下载并引用 jQuery Mobile 库以及...
jquery mobile仿苹果手机短信滑动删除特效
10-30
在这个特定的案例中，我们关注的是一个特别的功能实现——"jquery mobile仿苹果手机短信滑动删除特效"。 苹果公司的iOS操作系统以其独特的用户交互体验著称，其中短信应用中的滑动删除功能就是一个典型的例子。当...
jquery.mobile滑动轮播
08-04
在标题"jquery.mobile滑动轮播"中，我们关注的是如何利用jQuery Mobile实现一种动态的、用户交互的图像或内容展示方式，即轮播组件。轮播通常包含一组可以左右滑动的元素，如图片、文本或视频，允许用户通过手势或...
JqueryMobile + photoswipe4.1.1 实现图片轮播
04-29
photoswipe4系列以前有一些BUG，比如不支持手势缩放，必须用第三方插件，但是会经常出问题。 为了解决这些问题，做了一个DEMO，利用photoswipe4.1.1 + JQM 实现了图片轮播。 同时也修改了一些photoswipe4.1.1的源码和样式，供参考。 Demo花了半天精力才解决。 Tips:图片最好不要大于2000像素，推荐1800以内，因photoswipe存在一些BUG依旧没解决。android系统出现问题不多，多少是IOS系统的浏览器问题~~ 有问题联系我，邮箱hahalgj@126.com
JQmobile实现的订餐webAPP
氵青-风的博客
05-07 1742
学习一段JQmobile后，用来实现一个简单的订餐webAPP，本应用功能十分简单，用户能够进行注册，登录，并且能下订单，和查看订单，取消订单，数据利用本地存储localStore和IndexDB，不了解localStore和IndexDB的可以看我上一篇博客 浅谈WebView利用localStore websql和IndexDB 来存储数据 用例图如下： webAPP的开发流程 用户
Jquery Mobile左右滑动效果
记录移动开发相关的知识
10-08 8395
首先在一个页面里面定义两个,这里为了突出重点，就没有写出footer和header。定义的页面如下： 1 2 3 456 接下来通过jquery mobile 中的swipe事件执行左右滑动效果： $(function() { $("#listview1").bind("swipeleft"
jQuery mobile从入门到放弃
热门推荐
Dorui的博客
01-31 1万+
之前只知道jquery有个专门做移动端的插件，今天做移动端项目的时候了解了下它的事件，简单实用，触摸滑动基本都有，因为之前小组默认都是jQuery来写代码来着，所以从官网下载出来准备直接开动，但一直到从中午到晚上，他让我感觉到越来越绝望，现在，我想把我遇到的问题写出来，大家可以参考一下 问题1：我在两个官网分别下载最新的插件，jquery.mobile-1.4.5.min.js与jquery
基于jQuery的移动轮播图（支持手机触屏）
qq_38375394的博客
11-05 2348
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="minimal-ui=yes,width=device-width, initial-scale=1.0,
探索jQueryMobile：Swipe、Gallery与更多实用插件
- 另一个关于jQueryMobile滑动导航的实验，展示了滑动功能的更多可能性。 - jQswipe和Multiswipe，分别提供单一和多重滑动事件的处理。 2. jQueryMobileGallery 这一部分聚焦于创建移动相册，包括： - 使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值