JQueryを使用してトグルボタンを作成する方法は？

Question

jQueryを使用してトグルボタンを作成するにはどうすればよいですか？ Wordや他のテキストエディタから "B"、 "I"、 "U"のようなボタンが必要です。

Answer 1

this JSFiddle codeがあなたに役立つかどうかを確認してください。

<p><b>Disclaimer:</b> Due to a webkit bug involving pseudo classes and sibling selectors this may not work in some webkit-based browsers.</p> 

<p>Here's our finished toggle button.</p> 

<label id="label"> 
    <input type="checkbox" id="checkbox" /> 
    <span id="off">Off</span> 
    <span id="on">On</span> 
</label> 

<p>Here's how we build it. First you start off with a label containing a checkbox and two spans.</p> 

<label id="label"> 
    <input type="checkbox" /> 

    <span>Off</span> 
    <span>On</span> 
</label> 

<p>Simple and not much to look at. Let's style those two spans to look like buttons and hide the checkbox.</p> 

<label id="label"> 
    <input type="checkbox" id="checkbox" /> 
    <span id="off">Off</span> 
    <span id="on" style="display:block;">On</span> 
</label> 

<p>Now, the key is to hide the "On" span initially with "display: none;". Then we show it when the checkbox is checked while hiding the "Off" span at the same time. This is done with this CSS:</p> 

<pre> 
#checkbox:checked + #off { 
    display: none; 
} 
#checkbox:checked + #off + #on { 
    display: block; 
} 
</pre> 

<p>So, when the checkbox is checked we are targeting its sibling "off" and we are also targeting the sibling of the checkbox's sibling which is "on".</p> 

<p>At this point you could use server-side code or javascript to react to the hidden checkbox being checked just like you would with a normal checkbox.</p> 
​ 

p { 
    margin: 10px; 
} 
pre { 
    margin: 10px; 
} 

#label { 
    cursor: pointer; 
    display: block; 
    margin: 20px auto; 
    width: 200px; 
} 
#checkbox { 
    display: none; 
} 
#checkbox:checked + #off { 
    display: none; 
} 
#checkbox:checked + #off + #on { 
    display: block; 
} 
#off { 
    background: #ff3019; 
    background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); 
    background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); 
    background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); 
    background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); 
    background: linear-gradient(top, #ff3019 0%,#cf0404 100%); 
    border: 2px solid #cf0404; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -o-border-radius: 10px; 
    border-radius: 10px; 
    color: white; 
    display: block; 
    font: 1em "Amaranth", sans-serif; 
    padding: 4px 10px; 
    text-align: center; 
    -moz-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none; 
    user-select: none; 
} 
#on { 
    background: #b4ddb4; 
    background: -moz-linear-gradient(top, #b4ddb4 0%, #83c783 17%, #52b152 33%, #008a00 67%, #005700 83%, #002400 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4ddb4), color-stop(17%,#83c783), color-stop(33%,#52b152), color-stop(67%,#008a00), color-stop(83%,#005700), color-stop(100%,#002400)); 
    background: -webkit-linear-gradient(top, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); 
    background: -o-linear-gradient(top, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); 
    background: -ms-linear-gradient(top, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); 
    background: linear-gradient(top, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%); 
    border: 2px solid #002400; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -o-border-radius: 10px; 
    border-radius: 10px; 
    color: white; 
    display: none; 
    font: 1em "Amaranth", sans-serif; 
    padding: 4px 10px; 
    text-align: center; 
    -moz-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none; 
    user-select: none; 
} 
​ 

Answer 2

jQuery UIには、チェックボックス用にレンダリングされたボタンが用意されています。このソリューションを参照してください：http://jqueryui.com/demos/button/#checkbox