// selector.js (under 5 KB minified gzipped) // developed by Mark Entingh (www.markentingh.com) // looks like jQuery, acts like jQuery, but isn't jQuery. (function(){ var hello = 0; var style = 0; $('.hello-world').on('click', function(e){ hello = hello >= 5 ? 0 : hello + 1; switch(hello){ case 0: $(this).html('Hello World'); break; case 1: $(this).html('That tickles...'); break; case 2: $(this).html('No more, please.'); break; case 3: $(this).html('This is torture!'); break; case 4: $(this).html('Okay, now I\'m angry.'); break; case 5: $(this).html('Goodbye.'); break; } }); $('.change-style').on('click', function(e){ style = style >= 5 ? 0 : style + 1; switch(style){ case 0: $(this).css({'font-size':24, backgroundColor:'#0066ff', border:'2px solid #0033cc'}); break; case 1: $(this).css({'font-size':10, backgroundColor:'#ace600', border:'1px solid #86b300'}); break; case 2: $(this).css({'font-size':17, backgroundColor:'#ff9900', border:'3px solid #ff6600'}); break; case 3: $(this).css({'font-size':40, backgroundColor:'#0099e6', border:'8px solid #0066cc'}); break; case 4: $(this).css({'font-size':28, backgroundColor:'#ff6666', border:'4px solid #ff3333'}); break; case 5: $(this).css({'font-size':14, backgroundColor:'#ffcc00', border:'2px solid #ffa64d'}); break; } }); $('#texter').on('keyup', function(e){ $('.result').html($(this).val()); }); $('.teleport a').on('click', function(){ var speed = 2000; if($(this).parents('.teleport').find('.hello-world').length > 0){ //teleport back to original spot $('.teleport .buttons').animate({opacity:0}, speed); setTimeout(function(){ $('.header').append($('.buttons')); $('.buttons, .beam').animate({opacity:1}, speed); $('.beam').show(); }, speed); }else{ $('.buttons, .beam').animate({opacity:0}, speed); setTimeout(function(){ $('.beam').hide(); $('.teleport .platform').append($('.buttons')); $('.buttons').animate({opacity:1}, speed); }, speed); } }); })();
*{box-sizing:border-box;} body{font-family:Arial, Helvetica, sans-serif;} .header{height:108px;} .button{color:#fff; background:#56bf94; padding:7px 15px; border-radius:4px;box-shadow:3px 3px 0px rgba(0,0,0,0.15);} .button:link{text-decoration:none;} .button:hover{background:#1bcd84;} .row{width:100%; box-sizing:border-box;} .row:after{visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;} .col{float:left; position:relative; display:inline-block;} .pad{padding:15px;} .pad-lg{padding:30px;} .result{background-color:#b3d9ff;} .teleport{background-color:#ffcce0; color:#e600ac;} .teleport .button{background-color:#e600ac;} .teleport .button:hover{background-color:#ff3399;} /* input placeholder text color */ input[type=text]{padding:8px 15px; font-size:17px; width:90%;} input[type=text]::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #ccc;} input[type=text]::-moz-placeholder { /* Firefox 19+ */ color: #ccc;} input[type=text]:-ms-input-placeholder { /* IE 10+ */ color: #ccc;} input[type=text]:-moz-placeholder { /* Firefox 18- */ color: #ccc;}
<div class="row pad"> <h1> Selector.js </h1> <p> A micro javascript library used as a replacement for jQuery, weighing in at nearly 5KB. <br/>Below are a set of tests that will work in both jQuery and selector.js. </p> </div> <div class="header pad-width-lg pad-height"> <div class="row buttons"> <div class="col pad"> <a href="javascript:" class="button hello-world">Hello World</a> </div> <div class="col pad"> <a href="javascript:" class="button change-style">Stylize</a> </div> </div> </div> <div class="row pad"> <input type="text" id="texter" placeholder="type things here..."/> </div> <div class="row pad"> <div class="row pad result">mimic things here...</div> </div> <div class="row pad"> <div class="row teleport"> <div class="col pad-lg"> <a href="javascript:" class="button">Teleport</a> </div> <div class="col beam pad-lg">...beam me up, Scotty.</div> <div class="col platform pad"> </div> </div> </div> </div>