http://john.mcclumpha.org/javascript/Creating_custom_styled_checkboxes_with_jQuery/
http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html
javascript : Creating custom styled checkboxes with jQuery
Published: 1 years ago
Demonstration
.com .net .biz .info
For those of you who have been using my DHTML Effects using Javascript code, let me apologise. I have now been overtaken by the force known as jQuery! (Thanks Simon :P) If nothing else it's more compatible, widely supported with a huge development community and a lot more versatile than just a few animated effects. Anyhow, on with the show...
I got sick of the fact that checkboxes, like several other form elements, cannot be styled using css. As a result checkboxes in various browsers always appeared differently and were often enough to ruin a nice (otherwise) clean design. As such I came up with the following solution:
What we will do is create some links (<a href=""> tags) on a page which will represent the fake (styled) checkboxes. When these are clicked they will change in appearance (by adding a css class to them) and their hidden counterpart (the "real" checkbox) will have its value toggled accordingly.
Styling
I wanted a nice modern styling to my checkboxes, although you can easily give them any styling you want (if I get time I'll publish a heap of different samples and ways in which this can be used quite effectively).
I created an image containing both the unchecked and checked states of the checkbox:
The Objects
Next we need to create a link to use for our fake checkboxes:
<a href="#dotcom" class="fakecheck" id="fakedotcom">.com</a>
In this instance we want the text ".com" to be used as a "label" for the checkbox.
Now style the link as follows:
/* fake checkbox : unchecked (default/base) state */
.fakecheck {
font: 12px Tahoma, Arial, Helvetica, sans-serif;
text-decoration: none;
outline: none;
background: url(../images/checkbox.gif) no-repeat;
height: 16px;
width: 40px;
display: block;
float: left;
padding: 1px 0px 0px 20px;
color: #666666;
}
/* fake checkbox : hover state */
.fakecheck:hover {
color:#0066FF;
text-decoration: underline;
}
/* fake checkbox : checked state */
.fakechecked {
background-position: left -25px;
}
You should now have a link which is the checkbox in it's unchecked state - note however that it doesn't work just yet.
Before we get things working, let's create the "real" checkbox (the one that will actually be used as part of the form) - this will of course be hidden at a later stage. We want this input to have the same id as the hash (#) in the link above, for consistency I use a matching name.
<input type="checkbox" name="dotcom" id="dotcom" />
The Code
Now the fun part... let's get this sucker working!
Firstly, let's create the code to toggle the styling on the new checkbox.
$(document).ready(function(){
$(".fakecheck").click(function(){
($(this).hasClass('fakechecked')) ? $(this).removeClass('fakechecked') : $(this).addClass('fakechecked');
return false;
});
});
The function is attached to any items styled with the class "fakecheck" and toggles the adding/removing of the class "fakechecked". So now it's looking good and toggling - but what about the hidden "real" checkbox? - let's add a line of code to toggle the checked attribute.
$(document).ready(function(){
$(".fakecheck").click(function(){
($(this).hasClass('fakechecked')) ? $(this).removeClass('fakechecked') : $(this).addClass('fakechecked');
$(this.hash).trigger("click");
return false;
});
});
As you can see, I'm using the hash value from the anchor to reference the id of the checkbox (hence they must match).
In a nutshell - that's it.... however things do turn sour if you refresh the page with some items checked (depending on your browser) and if you want the initial state to be checked as the above assumes all are unchecked. No problem, the following code will do everything above and also check the status of all (hidden) checkboxes and match them to the fake ones.
$(document).ready(function(){
// check for what is/isn't already checked and match it on the fake ones
$("input:checkbox").each( function() {
(this.checked) ? $("#fake"+this.id).addClass('fakechecked') : $("#fake"+this.id).removeClass('fakechecked');
});
// function to 'check' the fake ones and their matching checkboxes
$(".fakecheck").click(function(){
($(this).hasClass('fakechecked')) ? $(this).removeClass('fakechecked') : $(this).addClass('fakechecked');
$(this.hash).trigger("click");
return false;
});
});
That's it! - hopefully this will be of some use to you. :)
Introducing iPhone-style Checkboxes
Ever wanted those flash iPhone on/off toggle switches on your webpage? Love jQuery? Well then I've got something special for you. iphone-style-checkboxes implements the iPhone toggles as replacements for standard HTML checkboxes. Simply run the script and your site will be updated with these specialized controls. Best of all, the underlying checkbox is not touched and backend system will never know the difference. The change is purely visual.
UPDATED: Now with Prototype-based version here.
Examples
A checkbox defaulting to checked |
|
A checkbox defaulting to unchecked |
|
Download and implement
In keeping with the jQuery philosophy, using the iphone-style-checkboxes library is very simple. Download the package, unzip it and place the javascript, images and stylesheet where you please. You'll need to update the stylesheet to point to the new location of your images if they have changed relative to the stylesheet.
Once the files are available to your site, activating the script is very easy:
<head>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="jquery/iphone-style-checkboxes.js" type="text/javascript"></script>
<link rel="stylesheet" href="path_to/style.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$(':checkbox').iphoneStyle();
});
</script>
</head>
The initialization method takes a handful of options.
-
checkedLabel sets the text of the "on" state. Defaults to: ON
-
uncheckedLabel sets the text of the "off" state. Defaults to: OFF
For example:
$(':checkbox').iphoneStyle({
checkedLabel: 'YES',
uncheckedLabel: 'NO'
});
A checkbox defaulting to checked |
|
A checkbox defaulting to unchecked |
|
Contribute
The source is available, and forkable, on GitHub at http://github.com/tdreyno/iphone-style-checkboxes. Please direct comments, support requests, bug reporting and pull requests to there.
分享到:
相关推荐
jQuery in Action, Third Edition, is a fast-paced guide to jQuery, focused on the tasks you'll face in nearly any web dev project. In it, you'll learn how to traverse the DOM, handle events, perform ...
我们提出两级遮挡识别GAN,如图1,来消除任意面部遮挡,使去遮挡过程更加透明。在其中,两级GANs有不同工作,第一个生成器G1用于合成遮挡的图像(分离遮挡),第二个合成器G2用于合成去遮挡的图片。...
人脸识别jquery插件demo
methods (ArcFace) to improve their results in face ver ification (TAR=89.59% for FAR=1e-6). (5) By employ ing light-weight backbone networks, RetinaFace can run real-time on a single CPU core for a ...
论文翻译,保留原文排版。 SphereFace: Deep Hypersphere Embedding for Face Recognition
Predicting face attributes in the wild is challenging due to complex face variations. We propose a novel deep learning framework for attribute prediction in the wild. It cascades two CNNs, LNet and ...
LFW人脸库的基本情况介绍,是目前公认的人脸识别性能验证基准。
jQuery in Action, Third Edition, is a fast-paced guide to jQuery, focused on the tasks you'll face in nearly any web dev project. In it, you'll learn how to traverse the DOM, handle events, perform ...
包括Vec2Face Unveil Human Faces from their Blackbox Features inFace Recognition论文和文献阅读报告
We present a neural network-based face detection system. A retinally connected neural network examines small windows of an image, and decides whether each window contains a face. The system arbitrates...
A new face tracking algorithm, and a human-computer interaction technique based on this algorithm, are proposed for use on mobile devices.
face-alignment-in-3000fps-master
we survey the recent advances in face detection for the past decade. The seminal Viola-Jones face detector is first re- viewed. We then survey the various techniques according to how they extract ...
jQuery in Action, Third Edition, is a fast-paced guide to jQuery, focused on the tasks you'll face in nearly any web dev project. In it, you'll learn how to traverse the DOM, handle events, perform ...
E-FaceID 0.3 Bluewind Intelligent Face (Face Recognition System in Video) A specific description please visit:http://www.sciencenet.cn/m/user_content.aspx?id=261470
Deep Convolutional Neural Networks (DCNNs) for large- scale face recognition is the design of appropriate loss func- tions that enhance discriminative power. Centre loss pe- nalises the distance ...
Neural networks have recently become good at engaging in dialog. However, current approaches are based solely on verbal text, lacking the richness of a real face-to-face conversation. We propose a ...
face detection and recognition in csharp
"The Matrix" face for Android Wear By Dheera Venkatraman http://dheera.net/ This project is released under the GNU General Public License. Feel free to hack at it and share your contributions. ...
additive margin softmax for face vertification人脸识别