Advertisement
Guest User

Untitled

a guest
Apr 16th, 2014
37
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.41 KB | None | 0 0
  1. <div class="onoffswitch">
  2. <%= check_box 'onoffswitch', '0', id:"myonoffswitch", class: 'onoffswitch-checkbox'%>
  3. <label class="onoffswitch-label" for="myonoffswitch">
  4. <div class="onoffswitch-inner"></div>
  5. <div class="onoffswitch-switch"></div>
  6. </label>
  7. </div>
  8.  
  9. <%= link_to "switch",{controller: "static_pages", action: "local_switch"}, method: :post %>
  10.  
  11. .onoffswitch {
  12. position: relative; width: 50px;
  13. -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
  14. }
  15.  
  16. .onoffswitch-checkbox {
  17. display: none;
  18. }
  19.  
  20. .onoffswitch-label {
  21. display: block; overflow: hidden; cursor: pointer;
  22. border: 50% solid #CCCCCC; border-radius: 22px;
  23. }
  24.  
  25. .onoffswitch-inner {
  26. width: 200%; margin-left: -100%;
  27. -moz-transition: margin 0.2s ease-in 0s; -webkit-transition: margin 0.2s ease-in 0s;
  28. -o-transition: margin 0.2s ease-in 0s; transition: margin 0.2s ease-in 0s;
  29. }
  30.  
  31. .onoffswitch-inner:before, .onoffswitch-inner:after {
  32. float: left; width: 50%; height: 5px; padding: 0; line-height: 5px;
  33. font-size: 16px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
  34. -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  35. }
  36.  
  37. .onoffswitch-inner:before {
  38. content: "";
  39. padding-left: 10px;
  40. background-color: #3498DB; color: #FFFFFF;
  41. }
  42.  
  43. .onoffswitch-inner:after {
  44. content: "";
  45. padding-right: 10px;
  46. background-color: #CCCCCC; color: #FFFFFF;
  47. text-align: right;
  48. }
  49.  
  50. .onoffswitch-switch {
  51. width: 20px; margin: -7.5px;
  52. background: #FFFFFF;
  53. border: 2px solid #CCCCCC; border-radius: 22px;
  54. position: absolute; top: 0; bottom: 0; right: 43px;
  55. -moz-transition: all 0.2s ease-in 0s; -webkit-transition: all 0.2s ease-in 0s;
  56. -o-transition: all 0.2s ease-in 0s; transition: all 0.2s ease-in 0s;
  57. }
  58.  
  59. .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
  60. margin-left: 0;
  61. }
  62.  
  63. .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
  64. right: 0px;
  65. }
  66.  
  67. $("#myonoffswitch").change(function(){
  68. if ($(this).is(":checked"))
  69. {
  70. $.ajax({
  71. type : "POST",
  72. url : "/static_pages/local_switch", # add your correct url
  73. dataType: 'script',
  74. data : { id:2 }, #u can pass any no of data
  75. success : function(data){
  76. }
  77. });
  78. }
  79. else{
  80.  
  81. }
  82. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement