css/jquery中的移动(触摸)设备友好下拉菜单 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

基于 jQuery支持移动触摸设备的Lightbox插件：Swipebox使用说明

Swipebox是一款支持桌面、移动触摸手机和平板电脑的jquery Lightbox插件。该lightbox插件支持手机的触摸手势，支持桌面电脑的键盘导航，并且支持视频的播放。...今天介绍一下Swipebox的使用步骤。先看效果图： 2015101601 简要教程使用方法首先在标签之前或标签中引入jquery和swipebox js文件。...>标签中引入swipebox.css文件。...css/swipebox.css"> HTML结构为超链接标签使用指定的class，使用title属性来指定图片的标题：移动设备上隐藏关闭按钮。 hideBarsDelay：lightbox在桌面设备上隐藏信息条的延时时间。

2.3K2 0

第122天：移动端开发常见事件和流式布局

touchcancel：系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用。...2、event事件 originalEvent：（原生事件）是jquery封装的事件。� targetTouches：目标元素的所有当前触摸。...三、响应式开发 1、什么是响应式开发在移动互联日益成熟的时候，我们在桌面浏览器上开发的网页已经无法满足移动设备的阅读。通常的做法是针对移动端单独做一套特定的版本。...3、响应式开发的原理 CSS3中的Media Query（媒介查询），通过查询screen的宽度来指定某个宽度区间的网页布局。超小屏幕：768px以下（移动设备）。...Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。

4.6K4 0

您找到你想要的搜索结果了吗？

是的

没有找到

JQuery中操作Css样式的方法

2015-04-30 10:42:57 今天写项目的时候突然不知道如何通过jquery来操作css样式了，于是就上网查了一下，现在总结出来给大家分享一下。...样式中的样式 ("div").css("color") 设置color属性值....//设置单个样式 $("div").css("color","red") //设置多个样式 $("div").css({fontSize:"30px",color:"red"}) ("div").css...("height","30px")== ("div").css("width","30px")== //7.offset()方法 //它的作用是获取元素在当前视窗的相对偏移，其中返回对象包含两个属性,即...//10、jQuery中的 toggle和slideToggle 方法，都可以实现对一个元素的显示和隐藏。区别是： //toggle：动态效果为从右至左。横向动作。

2.7K3 0

awesome-javascript-cn

官网日历 pickadate.js：对移动设备友好的、响应式的和轻量的 jQuery 日期 & 时间输入选择器。...官网 skrollr：独立（不依赖 jQuery）的视差滚动库，适用于移动设备（Android + iOS）和桌面电脑。官网 parallax：面向智能设备的视差引擎。...官网菜单 jQuery-menu-aim：当用户光标放在特定下拉菜单项时触发事件。可制作响应式的、大数据量的下拉菜单，如 Amazon 的。...官网 jQuery contextMenu：右键菜单（contextMenu）管理工具。官网 Slideout：为移动设备的 web 应用制作出响应式的、可触摸滑出的导航菜单。...官网地图 Leaflet：对移动设备友好的、可交互的地图 JavaScript 库。官网 Cesium：开源的、基于 WebGL 实现的虚拟地球仪和地图引擎。

12.5K8 0

JavaScript Mobile开发框架汇总

目前Javascript移动开发框架有些共同的特点：专门为移动设备做了优化，提供标准的UI组件；提供跨平台的支持（Android、IOS、etc）；轻量级，由于手机网络访问的特点，所有的框架都要注意轻量...；大量使用HTML5和CSS3标准。...1、jQuery Mobile jQuery Mobile是一个可以帮助我们快速、高效构建跨平台的、统一界面的移动应用工具。也是最流行的一款Javascript移动开发框架。...基于HTML5、CSS3，具有大量的诱人特性：友好的学习曲线、卓越的兼容性、响应式涉及、12列格网、样式向导文档、自定义jQuery插件、完整的类库、基于Less等。...它们都有各自的特点，其中Mobilize.js提供了将你的网站迁移到移动设备的功能，而且也提供了Wordpress的插件，有兴趣的可以试一试。

1.6K3 0

iOS Android 移动设备中的 Touch Icons

上次转载了一篇《将你的网站打造成一个iOS Web App》，但偶然发现这篇文章的内容有些是错误的——准确来说也不是错误，只是不适合自半年前来的情况了（也可以说是iOS7 之后的时间）——话说现在的的移动设备真是日新月异...好了，结合Jeff 查阅的资料，下面来详细来说说iOS / Android 移动设备中的 touch icons。关于 “Touch icons” favicons 知道是什么吧？...浏览器的tab 前面的那个小图标，放入某个网站到收藏夹的时候也会看到，这个可以说是pc 互联网的产物了。而Touch icons 则是移动互联网的产物，用于手机、平板等移动设备上。...没有precomposed 代码，一些包括圆角，阴影，反光的特效便会自动添加到生成的本地app 的logo 中。是自iOS 2.0 开始的，但如今随着iOS7 的出现，已经变得可有可无了。..." sizes="72x72" href="apple-touch-icon-72x72-precomposed.png"> 在apple 开发者官网中，为不同的apple 设备推荐了相应的size，

2.8K6 0

友好的Bootstrap，让你越码越“上瘾”

如果你出现过上述问题并想解决这些问题，那么友好的Bootstrap你值得拥有。...随着移动设备的普及，CSS 3 大行其道，HTML 5 标准的制定使得前端技术更加受人重视，这几年出现了很多优秀的前端框架，极大地方便了程序的开发，其中Bootstrap 就是其中一个非常优秀的前端框架...同时Bootstrap 也提供较为丰富的jQuery插件，比如过渡效果、对话框、下拉菜单、滚动监听、标签页和提示框等一系列插件，在后续的文章中会逐步讲解其用法。...简单模板在使用Bootstrap 时，需要在页面中引用Bootstrap.css 样式。如果要使用到相应的组件，还要引入jQuery.js 以及Bootstrap.js 文件。...jQuery.js 必须在Bootstrap.js 文件之前引入，因为在Bootstrap 中插件是以jQuery 为基础的，而浏览器中js 是顺序加载解析的。

2.6K2 0

第120天：移动端-Bootstrap基本使用方法

约定编码规范 HTML约定：在head中引入必要的CSS文件，优先引用第三方的CSS，方便我们自己的样式覆盖在body末尾引入必要的JS文件，优先引入第三方的JS，注意JS文件之间的依赖关系，比如bootstrap.js...第三方依赖 jQuery——Bootstrap框架中的所有JS组件都依赖于jQuery实现 html5shiv——让低版本浏览器可以识别HTML5的新标签，如header、footer、section...[endif]--> 3、视口视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示目前大多手机浏览器的视口（承载页面的容器）宽度都是980...；视口的宽度可以通过meta标签设置此属性为移动端页面视口的设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1） width:视口的宽度 initial-scale:初始化缩放...--Bootstrap的所有组件都是依赖jquery的--> 22 jquery/jquery.js"> 23 <script src

4K4 0

Bootstrap笔记

视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器...，将页面容器缩放到设备这么大，然后展示目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；视口的宽度可以通过meta标签设置此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，...视口视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器...，将页面容器缩放到设备这么大，然后展示目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；视口的宽度可以通过meta标签设置此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度...最小缩放initial-scale 第三方依赖 jQuery Bootstrap框架中的所有JS组件都依赖于jQuery实现 html5shiv 让低版本浏览器可以识别HTML5的新标签

4.6K9 0

CSS 下拉菜单与 focus

在移动端上稍微有些不同，毕竟所有控制——无论单击、长按抑或划动——都由接触开始，也没有鼠标的「悬停」逻辑，为了方便判定，移动端上若想激活 :hover 也是单击（触摸）。...导航栏之所以不直接显示而是放进下拉菜单，也是为了在移动端等小尺寸设备中显示得优雅一点，因此这个单击判定其实是优势。...不过还是有点问题，比如一台 iPad mini 这种中尺寸设备，竖屏 + 鼠标情况下，但凡鼠标掠过就会调出下拉菜单；或者即便是 PC，把窗口缩小也同样是掠过频繁调出下拉菜单……毕竟是为了小尺寸设备设计的而其中并非全是触摸设备...相较于 hover 是悬停、focus 是获得焦点，active 是「正在交互」——从按下鼠标左键（主要按键）到松开、或者是从触摸到松开，一松开便解除 active 状态，而下拉菜单显然是要按下后保持住展开状态的...桌面端移动端 focus 持续到失去焦点松开时进入，持续到失去焦点 hover 悬停期间按下时进入，持续到失去焦点 active 单击按下期间触摸按下期间综合来看，focus 是最合适的。

7.7K2 0

jQuery Mobile 1.0 发布

jQuery Mobile 是一个基于 jQuery 的面向移动设备的网页前端用户界面框架，旨在简化移动设备的应用程序的过程，它几乎支持所有的移动浏览器的。...jQuery Mobile 功能特性跨平台跨设备 jQuery Mobile 框架兼容主流的设备，如 iOS（包括 iPhone，iPad），Andorid，黑莓，塞班，Windows Phone 等...触摸屏优化的布局和 UI WIDGETS jQuery Mobile 是触摸屏优化的，并且提供一个适应不同的智能设备的动态触摸用户界面，这套系统包含基本的布局控件（如列表，面板等），并且还有一套额外的表单控件和...更大，更好的主题化的外观设计 jQuery Mobile 还提供扩展了 CSS 框架，让用户更方便去设计 Web 程序的界面，并且还支持如 text-shadow, box-shadow, and gradients...等这类的 CSS 3 特性。

7322 0

介绍几个移动web app开发框架

jQuery Mobile jQuery Mobile框架能够帮助你快速开发出支持多种移动设备的Mobile应用用户界面。jQuery Mobile最新版本是1.4.0，默认主题采用扁平化设计风格。...Ionic遵循视图控制模式，通俗的理解和 Cocoa 触摸框架相似。在视图控制模式中，我们将界面的不同部分分为子视图或包含其他视图的子视图控制器。然后视图控制器“驱动”内部视图来提供交互和UI功能。...Amaze UI 非常注重性能，基于轻量的 Zepto.js 开发，并使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让你的 Web 应用可以高速载入。...bootstrap中没有的。...Mobile Angular UIu并不包含任何jQuery依赖，你需要做的只是通过一些AngularJS指令创建友好的用户体验。

7.3K2 0

「首席架构师推荐」一系列很棒的的浏览器端JavaScript库资源

滑块 Swiper - 移动触摸滑块和框架，带有硬件加速转换。 slick - 您需要的最后一个旋转木马。...slidesJs - 是一个响应式幻灯片插件，适用于JQuery（1.7.1+），具有触摸和CSS3过渡等功能 FlexSlider - 一个非常棒的，完全响应的jQuery滑块插件。...Flickity - 触摸，响应，可滑动的画廊。 Glide.js - 响应和触摸友好的jQuery滑块。它简单，轻便，快速。...- 日历 pickadate.js - 移动友好，响应迅速，轻量级的jQuery日期和时间输入选择器。...用于制作像亚马逊这样的响应式大型下拉菜单。 jQuery contextMenu - contextMenu manager。 Slideout - 用于移动网络应用的响应式触摸滑动导航菜单。

9.1K2 1

「沙里淘金」精选浏览器端JavaScript库资源推荐

滑块 Swiper - 移动触摸滑块和框架，带有硬件加速转换。 slick - 您需要的最后一个旋转木马。...slidesJs - 是一个响应式幻灯片插件，适用于JQuery（1.7.1+），具有触摸和CSS3过渡等功能 FlexSlider - 一个非常棒的，完全响应的jQuery滑块插件。...Flickity - 触摸，响应，可滑动的画廊。 Glide.js - 响应和触摸友好的jQuery滑块。它简单，轻便，快速。...- 日历 pickadate.js - 移动友好，响应迅速，轻量级的jQuery日期和时间输入选择器。...用于制作像亚马逊这样的响应式大型下拉菜单。 jQuery contextMenu - contextMenu manager。 Slideout - 用于移动网络应用的响应式触摸滑动导航菜单。

8.3K2 0

20款移动开发中很有用的 jQuery 插件

在开发任何移动项目时，要尽可能保持每一种资源尺寸都尽可能的小，以给最终用户提供一个好的体验是非常重要的。...在这篇文章中我们已经编制了今年新出炉的 jQuery 移动插件列表，收集了滑块，旋转木马，画廊，触摸插件，菜单等帮助你创建响应式的，美丽和引人注目的 Web 应用程序。...Flip effect uses css 3d transform. Flip effect currently works on WebKit browsers (e.g....Navobile uses CSS to apply CSS3 translations, Mobile device detection and fixing the position of nav....It uses touch events and CSS3 transitions for the best possible performance.

2.8K7 0

触摸事件 touchstart、touchmove、touchend

目录触摸事件概述触摸事件编码触摸手指个数分析触摸目标 DOM 元素分析触摸位置分析 ---- 触摸事件概述 1、HTML5 中， PC 端基于鼠标的界面互动主要是单击，移动端界面交互方式主要是触摸...pageX：触摸目标在页面中的x坐标。 pageY：触摸目标在页面中的y坐标。 screenX：触摸目标在屏幕中的x坐标。 screenY：触摸目标在屏幕中的y坐标。...', function (even) { $('p').css({'color': '#0f0'}); console.log("用户手指在屏幕上移动... 1、如果在 PC 上访问，可以使用 Chrome 浏览器的移动响应式设备进行模拟，或者直接在移动设备(如手机)上访问 2、Chrome 浏览器，F12...target).attr("class"));//JQuery 获取触摸对象的class属性值 } /** * 手指在触摸屏上移动时——函数调用

2.4K2 0

手机网页用Bootstrap还是jQuery Mobile

多人合作的前端布局和样式的规范问题常用前端css组件，如按钮、连接、表单、表格、分页组件、下拉菜单、导航栏、ICON等等常用JS前端组件（需要扩展js支持），如表单验证、Tips、Popup等等...jQuery Mobile是移动前端框架，包含js、html、css，提供一套完整的移动前端开发组件，可以比喻成Android开发框架，尽可能提供移动APP所具有的所有功能，针对解决的问题有...，而Bootstrap提供的是面向所有设备的组件，并没有对移动设备专门考虑，与移动APP的组件体验不一样。...jQuery Mobile通常用于：期望接近移动APP体验的WebAPP，项目只运行在手机端，不用于电脑设备展示（虽然是可以展示的，但是效果不好）。...总结如果做跨设备响应式前端，选择Boostrap；如果仅作移动端，期望得到近似APP的WebAPP，使用jQuery Mobile。

3.6K10 0

网站开发常用jQuery插件总结(十)菜单插件superfish

jQuery 插件：Superfish 菜单插件简介Superfish 是一个基于 jQuery 的强大、灵活、易于使用的多级下拉菜单插件，常用于网页开发中创建响应式、富有互动性的导航菜单。...自定义动画效果：可以自定义子菜单显示与隐藏时的动画效果，比如滑动、渐变等。响应式设计：支持移动端或触屏设备的交互方式，自动适配不同设备。...引入必要的文件要使用 Superfish 插件，首先需要引入 jQuery 和 Superfish 的相关 CSS 和 JavaScript 文件。的 jQuery 插件，适用于开发多级下拉菜单。...它支持鼠标悬停显示/隐藏菜单、动画效果、响应式设计等功能，广泛应用于导航栏和菜单设计中。通过简单的配置和初始化，可以为网站添加丰富的菜单交互效果，提升用户体验。

2610 0

adminLTE的介绍

adminLTE除了可以使用bootstrap3的大多数样式之外，自身也提供了一些非常实用的样式包装，并且在样式演示中已经基本罗列出来了。 adminLTE的js是基于jquery2。...adminLTE的插件中使用的基本都是bootstrap和jquery的插件。...里面的组件 Widgets 页面，不要以为是一些像 easyui 的组件，其实也是 AdminLTE 定义的一些 css 样式，像 box 样式，是里面最基础最常用的一个。...里面的 js 插件除了 bootstrap 自带那模态窗、导航、下拉菜单外，其它就是集成一些有名的第三方插件，像 select2、CK Editor、iCheck、DataTables 等等。...js文件 5、fastclick，触摸设备快速点击体验，不想兼容手机可以去掉 6、slimscroll,菜单和页面中的滚动条样式，放上去毕竟好看嘛。

3.4K2 0

第135天：移动端开发经验总结

四、常见的移动端问题 1、什么是Retina 显示屏，带来了什么问题　　retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina...显示屏中，像素点1个变为4个　　在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍。　　...、禁止文本缩放当移动设备横竖屏切换时，文本的大小会重新计算（或者在内嵌浏览器中设置字体的大小），进行相应的缩放，当我们不需要这种情况时，可以选择禁止： html { 　　-webkit-text-size-adjust...: 100%; } 8、移动端禁止选中内容如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉： .user-select-none { -webkit-user-select: none...几乎一样，会jquery基本会zepto；搭配 backbone underscore http://daneden.github.io/animate.css/ 动画css

2K3 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭