javascript - How to replace doctype in html? -
this code:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery checkbox , radio button styling</title> <style type="text/css"> /* * customradiocheck: jquery plugin checkbox , radio replacement * usage: $('input[type=checkbox], input[type=radio]').customradiocheck(); * author: cedric ruiz * license: mit */ .custom-label { display: inline-block; margin-right: .8em; cursor: pointer; } .custom-radio, .custom-check { vertical-align: middle; display: inline-block; position: relative; top: -.15em; /* adjust best fit */ margin: 0 .4em; width: 20px; height: 20px; background: url(img/customradiocheck.png) 0 0 no-repeat; } .custom-radio { background-position: 0 -20px; } .custom-check.focus { background-position: -20px 0; } .custom-radio.focus { background-position: -20px -20px; } .custom-check.checked { background-position: -40px 0; } .custom-radio.checked { background-position: -40px -20px; } .custom-check.checked.focus { background-position: -60px 0; } .custom-radio.checked.focus { background-position: -60px -20px; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> /* * customradiocheck: jquery plguin checkbox , radio replacement * usage: $('input[type=checkbox], input[type=radio]').customradiocheck(); * author: cedric ruiz * license: mit */ ;(function(){ $.fn.customradiocheck = function() { return this.each(function() { var $this = $(this); var $span = $('<span/>'); $span.addclass('custom-'+ ($this.is(':checkbox') ? 'check' : 'radio')); $this.is(':checked') && $span.addclass('checked'); // init $span.insertafter($this); $this.parent('label').addclass('custom-label') .attr('onclick', ''); // fix clicking label in ios // hide shifting left $this.css({ position: 'absolute', left: '-9999px' }); // events $this.on({ change: function() { if ($this.is(':radio')) { $this.parent().siblings('label') .find('.custom-radio').removeclass('checked'); } $span.toggleclass('checked', $this.is(':checked')); }, focus: function() { $span.addclass('focus'); }, blur: function() { $span.removeclass('focus'); } }); }); }; }()); </script> </head> <body> <a href='http://1stwebmagazine.com/jquery-checkbox-and-radio-button-styling'><img src='../img/logo.png' alt='1stwebmagazine' /></a> <h1>jquery checkbox , radio button styling</h1> <div> <h3>checkbox:</h3> <label><input type="checkbox"/>sfdf</label><br/> <label><input type="checkbox"/>lamb</label><br/> <label><input type="checkbox"/>tiger</label><br/> </div> <div> <h3>radio button:</h3> <label><input type="radio" name="n"/>green</label><br/> <label><input type="radio" name="n"/>blue</label><br/> <label><input type="radio" name="n"/>orange</label><br/> </div> <script type="text/javascript"> $('input[type=checkbox], input[type=radio]').customradiocheck(); </script> </body> </html> in above code have used customised css checkboxes, in jsp cannot use tag
<!doctype html> so, there alternative <!doctype html> ,as above code not work without it
you can still declare html5 doctype jsp:
<![cdata[<!doctype html>]]>
Comments
Post a Comment