jquery实现开关按钮

使用jQuery实现类似开关按钮的效果

转自:http://www.cnblogs.com/linjiqin/p/3148228.html 本案例实现类似开关按钮效果. 页面有下拉列表.文本框.按钮等表单元素,大致实现如下效果:1.页面一加载时,文本框隐藏,下拉列表显示,按钮值变为“显示文本框”.2.点击“显示文本框”按钮时,文本框显示,下拉列表隐藏,按钮值变为“显示下拉列表”.3.点击“显示下拉列表”按钮时,文本框隐藏,下拉列表显示,按钮值变为“显示文本框”. <!DOCTYPE HTML PUBLIC "-//W3C//DT

jQuery滑动开关按钮效果

效果图: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Con

light7结合jquery实现开关按钮

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>我的生活</title> <meta name="viewport" content="initial

基于Bootstrap的jQuery开关按钮插件

按钮下载使用方法首先要在页面中引入依赖文件: jquery.Bootstrap.Bootstrap Switch CSS和Bootstrap Switch JS.这里用的是bootstrap2 <link href="bootstrap.css" rel="stylesheet"> <link href="bootstrap-switch.css" rel="stylesheet"> &l

基于Bootstrap的超酷jQuery开关按钮插件

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD

基于Bootstrap的jQuery开关按钮组合

Bootstrap是一款由Twitter推出的开源前端开发包,功能非常强大.今天我们要分享的这款jQuery开关按钮组合就是基于Bootstrap框架的,看了按钮的主题样式,也都是Bootstrap的样式风格,比较清新和简单.这款jQuery开关按钮可以满足你不同的应用需求,包括样式.大小等. 在线预览源码下载实现的代码. html代码: <div class="container"> <div class="row"> <di

【转】基于Bootstrap的超酷jQuery开关按钮插件

基于Bootstrap的超酷jQuery开关按钮插件

jquery实现on/off开关按钮

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>tab</title> <style> *{margin:0;padding: 0} ul,li{list-style: none;} .active{ bac

jquery开关按钮效果

.circular1{ width: 50px; height: 30px; border-radius: 16px; background-color: #ccc; transition: .3s; cursor: pointer; } .round-button1{ width: 30px; height: 30px; background: #fff; border-radius: 50%; box-shadow: 0 1px 5px rgba(0,0,0,.5); transition:

JQuery的一些简单操作01

一.JQuery的隐藏和显示效果 1.hide/show/toggle hide隐藏效果,hide(1000)括号里面跟毫秒,show显示效果同样后面括号可以有数值,toggle开关按钮,交替作用隐藏和显示的效果 2.fadeIn/fadeOut/fadeToggle/fadeTo fadeIn和fadeOut作用的是淡入淡出的效果,其实是改变css中display的属性值,fadeToggle开关按钮,交替作用淡入淡出的效果,fadeTo设置的是透明度的效果,fadeTo(1000,0.5),

9款风格华丽的jQuery/CSS3插件

今天向大家分享9款效果相当不错的jQuery/CSS3插件,不多说,直接来看看这些插件吧. 1.jQuery动画下拉菜单Smart Menu 这是一款基于jQuery的动画下拉菜单,子菜单外观比较时尚,鼠标移到菜单上时即可弹出漂亮的子菜单. 在线演示 / 源码下载 2.jQuery滑杆改变页面和文字大小我们可以滑动滑杆来调整页面窗口和文字的大小,滑杆在滑动中十分流畅,窗口大小也随着动态改变. 在线演示 / 源码下载 3.NotifIt jQuery动画通知Tip插件 N

8款超酷体验的jQuery/CSS3应用插件

1.jQuery/CSS3实现Android Dock菜单效果这是一款基于jQuery和CSS3的Android Dock菜单效果,点击底部的按钮即可让应用图标浮动上来,并且按钮也出现3D的翻转效果.jQuery是一款应用十分广泛的javascript类库,很多前端开发者都十分青睐jQuery框架. 在线演示源码下载 2.CSS3彩色进度条按百分比显示不同颜色这是一款很不错的CSS3进度条应用,这款CSS3进度条和普通的不一样,它可以根据不同的百分比来显示当前进度的颜色,很像游戏中人物生

jQuery UI框架

jQuery UI框架 1.oschina开源社区-jQuery教程 2.jQuery PrimeUI(推荐) 3.弹出框.警告框.提示框.拖动支持.位置固定.选项卡切换 4.Bootstrap框架(推荐) 5.Bootstrap3.1.1DEMO 6.Bootstrap教程随笔分类 - jQuery js分页页码算法摘要: function get_hs_page(cur_page, total_page) { var result = ""; for(var i = 1;

jQuery的版本兼容问题

之前在做头像上传的时候,使用的jQuery是1.8.2的版本,然后头像上传做完后,发现项目用的jQuery版本是3.3.1的.由于两个版本的差距太大了.所以兼容很差. 3.3.1不支持剪切头像的某些函数,还有也无法显示上传的头像. 1.8.2不支持开关按钮的switch样式. 反正想了很多办法也不行,做了快一天已经可以上传想要放弃觉得又有点可惜. 后来去官网看了看,原来官网是支持的各个版本之间的兼容,但是无法引用官网给的那个地址.我的方法是 [新建一个js文件,把官网给的那段代码贴进去,放到3.

巧妙利用jQuery和PHP打造类似360安全卫士防火墙功能开关(类似iphone界面)效果

安全卫士防火墙开启关闭的开关,可以将此功能应用在产品功能的开启和关闭功能上. 准备工作为了更好的演示本例,我们需要一个数据表,记录需要的功能说明及开启状态,表结构如下: CREATE TABLE `pro` ( `id` int(11) NOT NULL auto_increment, `title` varchar(50) NOT NULL, `description` varchar(200) NOT NULL, `status` tinyint(1) NOT

前端基础之jQuery入门 01

jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互,能够极大地简化JavaScript编程.它的宗旨就是:"Write less, do more." 优势一款轻量级的JS框架.jQuery核心js文件才几十kb,不会影响页面加载速度. 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写

几个实用的 jQuery 插件

1. owl.carousel -- 强大实用的jQuery幻灯片插件 2. jquery.nicescroll.min.js -- 自定义滚动条样式,支持 div,iframe,html 等. 3. template.js -- 提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果. 4. three.js -- 3D显示功能(H5 3d) 5. Switchery -- 组合式开关按钮 iOS7 样式 6. sockjs+stomp/G

bootstrap-table中使用bootstrap-switch开关按钮

先上图准备工作: 添加css和js文件 #bootstrap开关按钮#} <link href="https://cdn.bootcss.com/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js&q

CSS实现按钮YES-NO按钮+Jquery获取按钮状态。

前几天我经理突然跟我说,能不能做一个开关按钮,需要过滤的一个标识.说实话,一个做后端我是懵逼状态的. 不过网上资料很多,查了一遭,发现一个不错的哥们给出的案例,模仿一下成功实现,下面就自己总结一下: 实现的效果如上,个人觉得丑爆了. 下面是实现过程: HTML部分代码: <div class="testswitch"> <input class="testswitch-checkbox" id="onoffswitch" typ

Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大多基于jQuery和它的插件.而且现在Angular2的组件生态还不是很完善,我们在编写Angular的时候也许会想要用到jQuery.本篇文章就简单介绍下在Angular2中使用jQuery 如果你不知道怎么搭建Angular2开发环境,请参考我之前写这篇文章:Angular2入门系列教程1-使用

jquery实现开关按钮

热门专题