艺灵设计

全部文章
×

jquery表单美化之input实例篇

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2015-06-20 18:30:02 - 阅: - 评:0 - 积分:0

前段时间公司网站有改版过,虽艺灵现已离职,但还是会分享一些经验性的知识给看官们。

今天给看官带来的是jquery表单美化之input实例篇,主要讲这个radio单选框和checkbox复选框的美化。

可能很多看官对艺灵刚提到的两个单词感到很陌生,但是如果艺灵上一张图的话,可能看官们就有印象了。如图: 这个就是系统默认的radio单选框和checkbox复选框,外观看起来并不是多好看,所以我们要给其进行美化。

说起美化,我们肯定要对其修改外观样式了,这个时候为了更好的兼容,我们采用图片的方式是最佳选择。当然,如果看官网站使用群体是非ie用户,那就尽情的使用css3吧!

还是先来看看改版后的radio效果图长什么样吧,如图: 虽然这个并不是多好看,但起码要比系统的好看点。如果看官会ps的话,看官这篇文章后就可以大显身手了。好了,我们还是来码代码比较好,因为这个更切合实际。

在码代码之前,艺灵需要陈述下自己的方法及思路:在css方面,先隐藏掉系统默认的radio单选框,然后通过样式来显示我们自己的radio样式;在jquery方面,我们需要判断勾选状态和增删css样式进行替换以达到时时同步的效果。下面开始码代码。

html
  1. <form action="" method="post">
  2. <span>航班类型</span>
  3. <label class="flight"><input type="radio" name="flight" checked="checked" />单程</label>
  4. <label class="flight"><input type="radio" name="flight" />往返</label>
  5. </form>
  6. demo1

上面的代码是radio单选框默认的样式,下面我们再通过添加css来实现美化后的效果。

美化表单css
  1. /*美化表单css*/
  2. .flight{background:url(input-radio.png) no-repeat -9px -12px;padding-left:20px;}
  3. .flight input{display:none}/*隐藏radio*/
  4. .checked{background-position:-9px -52px}/*激活样式*/
美化表单html
  1. <form action="" method="post">
  2. <span>航班类型</span>
  3. <label class="flight checked"><input type="radio" name="flight" checked="checked" />单程</label>
  4. <label class="flight"><input type="radio" name="flight" />往返</label>
  5. </form>
  6. demo2

这个时候看上去已经成功了对吧,但是你会发现一个现象:这个往返点击后竟然无效果!至于为什么没效果,可能看官还不是很明白,还是艺灵来解答下吧。

css代码中,有明确的注释标注着每一行代码的用途。我们点击往返时,单纯的css并不能成功添加.checked激活样式,所以自然不能表现出选中后的效果。这个时候,我们只需要写一串jquery代码即可解决这个问题。

美化表单jquery
  1. $(function(){
  2. //radio表单美化
  3. var $flight=$('#flight');//缓存变量
  4. $flight.find('.flight').on('click',function(){//找到.flight并绑定点击事件
  5. if($(this).find('input').attr('checked',true)){//判断选中状态
  6. $(this).addClass('checked')//label添加激活样式
  7. .siblings().removeClass('checked')//同辈去除激活样式
  8. .find('input').removeAttr('checked');//儿子去除选中状态
  9. }
  10. });
  11. });
  12. demo3

当你点击上面的demo3按钮时,你会看到我们最终想要的效果。你以为这样就完了吗?其实还没有,我们的代码还有很大的改进空间。比如说:我想增加一个checkbox复选框和一个text输入框,这个时候代码需要进一步完善。

新增checkbox后的css
  1. /*美化表单css*/
  2. form li{line-height:26px}
  3. .flight{background:url(input-radio-checkbox.png) no-repeat -9px -12px;padding-left:20px;}/*单选框图片*/
  4. .flight input{display:none}/*隐藏radio*/
  5. .checked{background-position:-9px -52px}/*激活样式*/
  6. #flight-checkbox .flight{background-position:-9px -92px}/*复选框图片*/
  7. #flight-checkbox .checked{background-position:-9px -132px}/*复选框激活样式*/
增加checkbox后的html
  1. <form action="" method="post" id="flight">
  2. <ul>
  3. <li id="flight-radio"><span>单选框美化:</span>
  4. <label class="flight checked"><input type="radio" name="flight" checked="checked" />单程</label>
  5. <label class="flight"><input type="radio" name="flight" />往返</label></li>
  6. <li id="flight-checkbox"><span>复选框美化:</span>
  7. <label class="flight checked" data-checked="1"><input type="checkbox" name="flight" checked="checked" />香蕉</label>
  8. <label class="flight" data-checked="0"><input type="checkbox" name="flight" />苹果</label></li>
  9. <li><label ><span>文本框不变:</span><input type="text" name="flight" /></label></li>
  10. </ul>
  11. </form>
  12. demo4

当你再点击上面的demo4时,就是我们最终的成品效果了。需要注意的是:处理复选框的选中状态时,我们需要额外的增加一个判断条件(详细说明看demo4中的注释吧。)至此,这篇文章也就结束了,明天将继续分享表单美化文章,记得来看哦!

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:/jquery/2015-06-20/279.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: jquery表单美化 表单插件 jquery插件 radio单选框 checkbox复选框 jquery特效 input美化

上一篇: 让ie6到ie9完美兼容placeholder属性的jquery.yilingsj-placeholder.js插件   下一篇: jquery表单美化之select下拉菜单实例篇

评论区