`
garyli
  • 浏览: 176746 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

仿iPhone开关式按钮(jQuery+CSS3)

 
阅读更多

仿iPhone开关式按钮(jQuery+CSS3)

 

001 <!DOCTYPE html>
002 <html>
003 <head>
004 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
005 <meta name="author" content="pandao QQ:272383090" />
006 <title>仿iPhone开关式按钮(jQuery+CSS3)</title>
007 <style type="text/css">
008 *{margin:0;padding:0;}
009 body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#fff;padding:50px;}
010 a{color:#444;text-decoration: none;}
011 a:hover{color:#065BC2;text-decoration: none;}
012 .clear{clear:both;}
013 img{border:none;vertical-align: middle;}
014 ul{list-style: none;}
015 .mwui-switch-btn{
016     width:84px; 
017     display:block;
018     padding:1px;
019     background:#3B75FD;
020     overflow:hidden;
021     margin-bottom:5px;
022     border:1px solid #2E58C1;
023     border-radius:18px;
024     cursor: pointer;
025 }
026 .mwui-switch-btn span{
027     width:32px;
028     font-size:14px;
029     height:18px;
030     padding:4px 5px 2px 5px;
031     display:block;
032     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f6f6f6,endColorstr=#eeeeee,grandientType=1);
033     background:-webkit-gradient(linear, 0 0, 0 100%, from(#f6f6f6), to(#eeeeee));
034     background:-moz-linear-gradient(top, #f6f6f6, #eeeeee);
035     border-radius:18px;
036     float:left;
037     color:#3B75FD;
038     text-align:center;
039 }
040 .mwui-switch-btn:hover span{
041     background:#fff;
042 }
043 .mwui-switch-btn span.off{float:right;}
044 input[type='submit']{padding:5px 10px;cursor: pointer;}
045 </style>
046 </head>
047 <body>
048 <form method="post">
049     显示图标1:<button class="mwui-switch-btn"><span change="开" class="off">关</span><inputtype="hidden" name="show_icon" value="0" /></button>
050     显示顶栏1:<button class="mwui-switch-btn"><span change="关">开</span><input type="hidden" name="open_topbar" value="1" /></button>
051     <br />
052     显示图标2:<button class="mwui-switch-btn"><span change="OFF">ON</span><input type="hidden" name="show_icon2" value="1" /></button>
053     显示顶栏2:<button class="mwui-switch-btn"><span change="ON" class="off">OFF</span><input type="hidden" name="open_topbar2" value="0" /></button>
054     <br />
055     <input type="submit" id="submit" value="提交" />
056 </form>
057 <div id="debuger"></div>
058 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
059 <script type="text/javascript">
060     $(function() {
061         $('.mwui-switch-btn').each(function() {
062             $(this).bind("click", function() {
063                 var btn = $(this).find("span");
064                 var change = btn.attr("change");
065                 btn.toggleClass('off');
066  
067                 if(btn.attr("class") == 'off') {
068                     $(this).find("input").val("0");
069                     btn.attr("change", btn.html());
070                     btn.html(change);
071                 } else {
072                     $(this).find("input").val("1");
073                     btn.attr("change", btn.html());
074                     btn.html(change);
075                 
076  
077                 return false;
078             });
079         });
080  
081         $("#submit").click(function() {
082             var form = $(this).parent()[0];
083             var inputs = form.getElementsByTagName('input');
084             var params = [];
085             $('#debuger').html('');
086  
087             for (var i=0; i < inputs.length; i++) {
088                 params.push(inputs[i].name+"="+inputs[i].value);
089             }
090  
091             $.post("post.php", params.join("&")+"&temp="+Math.random(), function(data) {
092                 $('#debuger').html(data);
093             });
094  
095             return false;  
096         });
097     });
098 </script>
099 </body>
100 </html>
分享到:
评论

相关推荐

    jQuery+CSS3仿苹果手机iPhone锁屏解锁代码.zip

    总的来说,这个"jQuery+CSS3仿苹果手机iPhone锁屏解锁代码"项目结合了两者的优势,既展示了jQuery的便捷性,又充分利用了CSS3的动态效果和布局能力。通过学习和实践,开发者可以提升自己的技能,并将这些技术应用到...

    jQuery+CSS3仿iPhone4S Siri UI.zip

    在本项目中,“jQuery+CSS3仿iPhone4S Siri UI.zip”是一个压缩包,它包含了一个使用jQuery、CSS3和HTML5技术实现的仿iPhone4S Siri用户界面的示例。这个界面旨在模拟苹果手机上的语音助手Siri的外观和交互效果,为...

    jQuery+CSS3仿苹果手机iPhone锁屏解锁代码

    本文将详细讲解如何使用jQuery和CSS3技术来创建一个仿苹果手机iPhone的锁屏解锁代码。这个项目的主要目的是展示如何利用这两种强大的Web开发工具来构建交互式的用户界面,特别是模拟移动设备的解锁体验。 首先,...

    jQuery+CSS仿iPhone手机面板导航

    在本项目中,“jQuery+CSS仿iPhone手机面板导航”是一个基于Web技术实现的模拟iPhone手机面板导航的效果。这个效果能够为网页添加一种类似iPhone设备上滑动手势切换应用的交互体验,增强用户的浏览感受。接下来,...

    jQuery+CSS3实现iPhone手机锁屏解锁动画特效源码.zip

    在本资源中,"jQuery+CSS3实现iPhone手机锁屏解锁动画特效源码.zip" 提供了一种使用jQuery和CSS3技术来模拟iPhone手机锁屏解锁的动态效果。这个源码包可以帮助开发者学习如何结合这两种强大的前端技术来创建互动性和...

    jquery+css3安卓Android(苹果iphone)桌面底部导航菜单.zip

    在本项目中,我们关注的是一个使用jQuery和CSS3实现的适用于Android和iPhone设备的桌面底部导航菜单。这个压缩包包含了一系列必要的文件,使开发者能够快速集成并自定义这一功能。下面将详细介绍其中的关键知识点: ...

    jQuery+CSS打造 iPhone风格的联系人列表

    html5, css3, html5 教程,css, jquery, javascript, div+css模板, css模板, css教程, div css, css hack, JS, html5 开发工具

    jQuery+CSS3仿iPhone4S Siri UI特效代码

    【jQuery+CSS3仿iPhone4S Siri UI特效代码】是一个基于JavaScript库jQuery和CSS3技术实现的项目,旨在创建一个类似苹果iPhone4S上Siri的用户界面效果。这个项目结合了动态交互与视觉设计,为网页应用或移动Web应用...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    10.jquery仿卓越亚马逊网鼠标移到按钮弹出菜单的效果代码 11.jquery浮动变化的个性菜单插件floatmenu下载 12.jQuery黑色风格仿Flash版下滑菜单效果 13.jquery黑色循环滚动菜单特效插件下载 14.jquery灰色...

    jQuery CSS3仿iPhone4S Siri UI.zip

    【jQuery CSS3仿iPhone4S Siri UI】是一个利用JavaScript库jQuery和CSS3技术来实现的交互式用户界面,模仿了苹果公司iPhone4S中的语音助手Siri的UI设计。这个项目旨在提供一种视觉上吸引人的、具有动画效果的界面,...

    css3 iphone ios 开关按钮

    在本主题中,我们将深入探讨如何使用CSS3来创建模拟iPhone或iOS设备上的开关按钮。 首先,让我们理解开关按钮的设计要素。在iOS系统中,开关按钮通常由两个部分组成:一个背景和一个滑块,滑块可以左右移动来切换...

    jQuery+HTML5仿iPhoneQQ首页效果.zip

    本项目"jQuery+HTML5仿iPhoneQQ首页效果"就是一个典型的实例,它巧妙地融合了jQuery库、HTML5新特性以及CSS样式,以打造出与iPhoneQQ应用类似的首页界面。下面我们将详细探讨这一实现过程中的关键知识点。 首先,...

    jQuery CSS仿iPhone手机滑动解锁屏幕

    在本项目中,“jQuery CSS仿iPhone手机滑动解锁屏幕”是一个使用jQuery和CSS技术实现的交互效果,旨在为Web应用或网页提供一种类似iPhone手机上滑动解锁的体验。这个功能通常用于增加用户验证环节的安全性和趣味性。...

    DIV+CSS实现iPhone效果图.zip

    为了实现更精细的效果,开发者可能还会使用CSS3的一些高级特性,比如阴影效果(`box-shadow`和`text-shadow`)、渐变(`linear-gradient`和`radial-gradient`)、动画(`@keyframes`)等。这些特性能增加设计的动态...

    css3 iphone开关按钮.zip

    在本案例中,CSS3被用来创建一款模拟iPhone UI的滑动开关按钮,充分展示了CSS3的强大能力。 【iPhone UI】 iPhone UI(用户界面)是指苹果设备上应用程序和操作系统交互的设计风格。这种设计遵循Apple的Human ...

    css3 iphone开关按钮 css3实现Icon UI图标代码下载.zip

    在本文中,我们将深入探讨如何使用CSS3来创建一个仿iPhone风格的开关按钮,并了解相关的前端技术,如HTML5、CSS、JavaScript和jQuery。这个压缩包文件提供了实现此类UI图标的代码示例,有助于开发者更好地理解和应用...

    CSS3渲染Checkbox实现3D开关切换按钮

    利用checkbox结合CSS3来实现一个3D开关切换按钮,该CSS3按钮一共有4款不同的样式风格,有电器开关样式按钮、iPhone锁屏样式按钮等。该CSS3按钮的实现原理很简单,原型是一个checkbox,然后利用CSS3属性来渲染...

    jqueryMobile插件仿iPhone滑动出现删除按钮

    本篇文章将详细探讨如何利用jQuery Mobile插件来实现一个仿iPhone滑动出现删除按钮的功能,这一功能在很多移动应用中常见,例如邮件、联系人或任务管理器。 首先,我们需要理解jQuery Mobile的核心概念。它基于...

    仿iphone滑动界面 jquery iphone ui

    "jQuery iPhone UI"是一个专门用于构建具有苹果设备风格用户界面的jQuery插件。这个工具允许开发者轻松地为他们的网站添加iOS风格的交互效果,提升用户体验。 首先,我们要理解jQuery的核心概念。jQuery是一个高效...

    android开发仿iphone开关按钮

    在Android开发中,为了实现与iPhone类似的开关按钮效果,我们需要深入了解和应用自定义视图、样式和动画等技术。以下是一些关键知识点的详细说明: 1. **自定义视图(Custom View)**: 在Android中,我们可以通过...

Global site tag (gtag.js) - Google Analytics