实例:
<!doctype html> <html> <head> <meta charset=utf-8> <title>jTumbler Demo</title> <link rel="stylesheet" href="./demo.css" type="text/css" media="screen" /> <link rel="stylesheet" href="./jtumbler/css/jtumbler.css" type="text/css" media="screen" /> <script type="text/javascript" src="./jtumbler/js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="./jtumbler/js/jquery-jtumbler-1.0.2.min.js"></script> <script type="text/javascript"> jQuery(function($){ // Initialize jTumbler $(".radio-switch").jTumbler(); // Change color $(".colors a").click(function(){ $(".colors li").removeClass("current"); var className = $(this).parent().attr("class"); $(this).parent().addClass("current"); $("#options-container").attr("class", className); if(className === "jtumbler-white" || className === "jtumbler-light-gray" || className === "jtumbler-pink") { $("body").addClass("inverse"); } else { $("body").removeClass("inverse"); } return false; }); var isOn = true; $("#toggle-jtumbler").click(function(){ isOn = !isOn; if(!isOn){ $(".radio-switch").show(); $(".jtumbler").hide(); } else { $(".radio-switch").hide(); $(".jtumbler").show(); } return false; }); }); </script> </head> <body> <div id="page"> <section id="content"> <h1>jTumbler jQuery Plugin Demonstration</h1> <form action="#"> <div class="options-page"> <div class="left-column"> <div class="options"> <p>Below is example of how jTumbler works. It simply converts generic radio buttons and labels to nice-looking groupped UI controls.</p> <h3>Toggle jTumbler</h3> <p><button id="toggle-jtumbler">Turn jTumbler On/Off</button></p> <h3>Change Appearance</h3> <p> <ul class="colors"> <li class="jtumbler-magenta"><a href="javascript:;"> </a></li> <li class="jtumbler-purple"><a href="javascript:;"> </a></li> <li class="jtumbler-teal"><a href="javascript:;"> </a></li> <li class="jtumbler-lime"><a href="javascript:;"> </a></li> <li class="jtumbler-brown"><a href="javascript:;"> </a></li> <li class="jtumbler-pink"><a href="javascript:;"> </a></li> <li class="jtumbler-orange"><a href="javascript:;"> </a></li> <li class="jtumbler-blue"><a href="javascript:;"> </a></li> <li class="jtumbler-red"><a href="javascript:;"> </a></li> <li class="jtumbler-green"><a href="javascript:;"> </a></li> <li class="jtumbler-marine"><a href="javascript:;"> </a></li> <li class="jtumbler-white"><a href="javascript:;"> </a></li> <li class="jtumbler-black"><a href="javascript:;"> </a></li> <li class="jtumbler-dark-gray current"><a href="javascript:;"> </a></li> <li class="jtumbler-light-gray"><a href="javascript:;"> </a></li> </ul> <div class="clear"></div> </p> <div id="options-container"> <div class="option-left"> <h4>Quality Assurance</h4> <div class="radio-switch"> <input type="radio" name="options[qa]" value="no" id="no-qa"> <label for="no-qa">No QA</label> <input type="radio" name="options[qa]" value="standard" id="standard-qa" checked="true"> <label for="standard-qa">Standard QA</label> <input type="radio" name="options[qa]" value="middle" id="middle-qa"> <label for="middle-qa">Middle QA</label> <input type="radio" name="options[qa]" value="full" id="full-qa"> <label for="full-qa">Full QA</label> </div> </div> <div class="option-right"> <h4>Turnaround Time</h4> <div class="radio-switch"> <input type="radio" name="options[time]" value="no" id="no-rush"> <label for="no-rush">No Rush</label> <input type="radio" name="options[time]" value="normal" id="normal-delivery" checked="true"> <label for="normal-delivery">Normal Delivery</label> <input type="radio" name="options[time]" value="rush" id="rush-delivery"> <label for="rush-delivery">Rush Delivery</label> </div> </div> <div class="clear"></div> <div class="option-left"> <h4>Images</h4> <div class="radio-switch"> <input type="radio" name="options[images]" value="yes" id="images-yes" checked="true"> <label for="images-yes">Yes</label> <input type="radio" name="options[images]" value="no" id="images-no"> <label for="images-no">No</label> </div> </div> <div class="option-right"> <h4>Simple</h4> <div class="radio-switch"> <input type="radio" name="options[notarized]" value="yes" id="notarized-yes" checked="true"> <label for="notarized-yes">Yes</label> <input type="radio" name="options[notarized]" value="no" id="notarized-no"> <label for="notarized-no">No</label> </div> </div> <div class="clear"></div> <div class="option-left"> <h4>Certified</h4> <div class="radio-switch"> <input type="radio" name="options[certified]" value="1" id="certified-1" checked="true"> <label for="certified-1">1</label> <input type="radio" name="options[certified]" value="2" id="certified-2"> <label for="certified-2">2</label> <input type="radio" name="options[certified]" value="3" id="certified-3"> <label for="certified-3">3</label> <input type="radio" name="options[certified]" value="4" id="certified-4"> <label for="certified-4">4</label> <input type="radio" name="options[certified]" value="5" id="certified-5"> <label for="certified-5">5</label> <input type="radio" name="options[certified]" value="6" id="certified-6"> <label for="certified-6">6</label> <input type="radio" name="options[certified]" value="7" id="certified-7"> <label for="certified-7">7</label> </div> </div> </div> </div> </div> <div class="clear"></div> <button>Submit Form</button> </div></form> </section> </div> </body> </html>
来源: http://www.w3blender.com/codecanyon/jtumbler/index.html
相关推荐
vue-concise-slider, vue-concise-slider,A simple vue sliding component
jquery-css3-3d-image-slider.zip
coda-slider【Coda-Slider 1.1 jQuery左右轮番的动画选项卡】.rarcoda-slider【Coda-Slider 1.1 jQuery左右轮番的动画选项卡】.rar
一款超炫的jquery图片切换特效插件,各种碎片式的切换,效果很震撼~~~~
jquery-animated-image-slider.zip
jquery-full-time-slider.zip
jquery-up-down-slider.zip
超好用的jQuery图片轮换插件nivo-slider
jquery-slider.js
高度优化且完全可定制的纯JS组件,用于选择值范围。 用户移动拇指时,不会重新渲染该组件。 即使有标签,更改值时也仅重新呈现标签组件。 RangeSlider使用React Native的Animated库来转换滑块/标签/选定的轨道。 ...
自定义slider 双向限制滑块的位置
jquery-product-slider.zip
一个可双向滑块选择器的微信小程序组件double-sided-slider-master.zip
微信小程序slider自定义样式,这个样式不是真正控制在slider上的,而且用view层级覆盖来进行制作,是自己纯手工写的,不喜勿喷哦!
React-Native-FlatList-Slider React Native中的自定义图像滑块组件安装npm i react-native-flatlist-slider进口 import {FlatListSlider} from 'react-native-flatlist-slider';用法 来自URI的图片 const images = ...
前端项目-bootstrap-slider,用于Twitter引导的滑动视图组件。
react-native-circular-slider, 响应本机组件创建圆形滑块 react-native-circular-slider
自定义slider - 可监听开始滑动、正在滑动、结束滑动三个状态
jquery插件源代码 支持ie6+ ff opera google浏览器