自动样式复选框与jQuery ui主题 [英] Auto style checkbox with jQuery ui theme

问题描述

（jQuery noob here）

(jQuery noob here)

我试着编写一个脚本，当我写< input type ='checkbox'/> 会自动将其转换为jQuery UI按钮，看起来像一个checkBox。
到目前为止的示例代码...

Im trying to write a script which when I write <input type='checkbox'/> will automatically convert it to jQuery UI button and look like a checkBox. Sample code so far ...

var newCheckboxID = 0;
$( "input:checkbox" ).attr('id', "cbx-" + nextCheckboxID++); // how to do that?
$( "input:checkbox" ).after("<label style='width:16px; height:16px; vertical-align:middle;'></label>");
$( "input:checkbox" ).next().attr("for", $(this).attr('id') ); // doesn't work for sure
$( "input:checkbox" ).button();
$( "input:checkbox" ).button( "option", "text", false );
$( "input:checkbox" ).attr("onclick", "$(this).button( 'option', 'icons', {primary:((this.checked)?'ui-icon-check':null),secondary:null} )");

对不起，如果它太明显但我已经失去了超过一小时...

Sorry, if it's too obvious but I've lost more than hour in that ...

最后用老式方式做了（因为没有工作部件）。
任何关于使其更紧凑和更多jQuery的评论都会受到批评...
代码示例

Finally did it with the old fashioned way (for the doesn't working parts). Any comments for making it more compact and "more jQuery" would be appriciated ... Code sample

// ---- set ids
var checkboxID = 0;
//$( "input:checkbox" ).attr('id', "cbx-" + nextCheckboxID++); // how to do that?
var cboxes = document.getElementsByTagName('input');           // <-- do this instead
for(var i=0; i<cboxes.length; i++){
    if( cboxes[i].getAttribute('type')!='checkbox' ) continue;
    cboxes[i].setAttribute('id', 'cbx-'+checkboxID++);}

// ---- add labels
$( "input:checkbox" ).after("<label style='width:16px; height:16px; vertical-align:middle;'></label>");
//$( "input:checkbox" ).next().attr("for", $(this).attr('id') ); // doesn't work this
for(var i=0; i<cboxes.length; i++){                              // <-- do this instead
    if( cboxes[i].getAttribute('type')!='checkbox' ) continue;
    cboxes[i].nextSibling.setAttribute('for', cboxes[i].getAttribute('id') );}

// ---- create
$( "input:checkbox" ).button();
$( "input:checkbox" ).button( "option", "text", false );
$( "input:checkbox" ).attr("onclick", "$(this).button( 'option', 'icons', {primary:((this.checked)?'ui-icon-check':null),secondary:null} )");

推荐答案

工作示例：

• jsFiddle（不发表评论）


• jsFiddle（没有使用UI主题切换器发表评论！）


• jsFiddle（with comments）


• jsFiddle（只是为了好玩，使用计时器和其他一些jQuery功能，仅供将来参考）


• jsFiddle（只为了好玩，使用计时器并每秒更改UI主题！）

• jsFiddle (without comments)
• jsFiddle (without comments with UI theme switcher!)
• jsFiddle (with comments)
• jsFiddle (Just for fun, uses timer and some other jQuery features, just for future reference)
• jsFiddle (Just for fun, uses timer and changes UI theme every second!)

在下文中，我应该注意2个主要更改。我添加了CSS来执行你想要对代码中的标签做的事情（它实际上不属于它）。

In the following, I should note 2 primary changes. I added CSS to do what you were trying to do to labels in "code" (where it really doesn't belong).

另外，我更改了HTML轻松的jQuery使用。但是，我仍然在评论中注意到您可以轻松地将其更改回来。

Also, I changed the HTML for "ease of jQuery" use. However, I still noted in the comments how you can easily change it back.

HTML

<center>
    <button>Create New CheckBox</button>
</center>
<hr />
<div id="CheckBoxes">
    <input class="inp-checkbox" />
    <input class="inp-checkbox" />
    <input class="inp-checkbox" />
    <input class="inp-checkbox" />
</div>​

CSS

.inp-checkbox+label {
    width:16px; 
    height:16px; 
    vertical-align:middle;
}​

JavaScript / jQuery

// keep in mind, and i will explain, some of these "moving-parts" or not needed, but are added to show you the "ease" of jquery and help you see the solution

//  This global function is designed simply to allow the creation of new checkboxes as you specified, however, if you won't be making check boxes at end user time, then i suggest simply moving it to within the .each statement found later on.
//  Also, this could easily be written as a jQuery plugin so that you could make a "chainable" one-line call to change checkboxes to this but let's get to the nitty gritty first
function createCheckBox(ele, i) {
    //  First I simply create the new ID here, of course you can do this inline, but this gives us a bottleneck for possible errors
    var newID = "cbx-"+i;
    //  below we use the param "ele" wich will be a jQuery Element object like $("#eleID")
    //  This gives us the "chainability" we want so we don't need to waste time writing more lines to recall our element
    //  You will also notice, the first thing i do is asign the "attribute" ID
    ele.attr({ "id": newID  })
        //  Here we see "chainability at work, by not closing the last line, we can move right on to the next bit of code to apply to our element
        //  In this case, I'm changing a "property", keep in mind this is kinda new to jQuery,
        //  In older versions, you would have used .attr but now jQuery distinguishes between "attributes" and "properties" on elements (note we are using "edge", aka. the latest jQuery version
        .prop({ "type": "checkbox" })
        //  .after allows us to add an element after, but maintain our chainability so that we can continue to work on the input
        // here of course, I create a NEW label and then immidiatly add its "for" attribute to relate to our input ID
        .after($("<label />").attr({ for: newID  }))
        //  I should note, by changing your CSS and/or changing input to <button>, you can ELIMINATE the previous step all together
        // Now that the new label is added, lets set our input to be a button,
        .button({ text: false }) // of course, icon only
        //  finally, let's add that click function and move on!
        //  again, notice jQuery's chainability allows us no need to recall our element
        .click(function(e) {
            //  FYI, there are about a dozen ways to achieve this, but for now, I'll stick with your example as it's not far from correct
            var toConsole = $(this).button("option", {
                icons: {
                    primary: $(this)[0].checked ? "ui-icon-check" : ""
                }
            });
            console.log(toConsole, toConsole[0].checked);
        });
    //  Finally, for sake of consoling this new button creation and showing you how it works, I'll return our ORIGINAL (yet now changed) element
    return ele;
}

$(function() {
    //  This .each call upon the inputs containing the class I asiged them in the html,
    //  Allows an easy way to edit each input and maintain a counter variable
    //  Thus the "i" parameter
    //  You could also use your ORIGINAL HTML, just change $(".inp-checkbox") to $("input:[type='checkbox']") or even $("input:checkbox")
    $(".inp-checkbox").each(function(i) {
        // as previously noted, we asign this function to a variable in order to get the return and console log it for your future vision!
        var newCheckBox = createCheckBox($(this), i);
        console.log(newCheckBox);
    });

    //  This next button added is simply to show how you can add new buttons at end-time
    //  ENJOY!!!
    $("button").button().on("click", function(e) {
        var checkBoxCount = $("#CheckBoxes .inp-checkbox").length;
        var newCheckBox = $("<input />").addClass("inp-checkbox").appendTo($("#CheckBoxes"));
        createCheckBox(newCheckBox , checkBoxCount);
        console.log(newCheckBox);
    });
});​

---

---

更新：这里的初衷是纯粹回答这个问题，即创建一个jQuery UI样式复选框，并展示如何以多种方式使用jQuery。但是，后来的评论询问了如何在其中加入传统的样式标签。虽然有十亿个选项，但我只需从上面开始并扩展。

第一个选项我拿的很简单。使用 jsFiddle（没有使用UI主题切换器发表评论！） ，我做了以下更改：

The first option I took is pretty simple. Using jsFiddle (without comments with UI theme switcher!), I made the following changes:

JavaScript / jQuery

// First I add a new variable.
// It will simply be for a new "wrapper" element, in which to ensure our button is encased. 
// Giving this element a new class gives easy access for later CSS or Event Triggering of sub elements (like the checkbox)
var newID = "cbx-"+i,
    wrapper = $('<div />', { 'class': 'ui-checkbox-wrapper' }).appendTo('#CheckBoxes');
//  Then I added a line to our ele series of methods.
//  This line simply append our element (checkbox) to our new wrapper
// Take Note at how I added this method at start rather than at end.
// Had I not done this, then the label would not have been wrapped!
ele.appendTo(wrapper)   //  <-- new line!
    .attr({ "id": newID  })

然后我只是添加以下内容CSS：

Then I simply added the following CSS:

#CheckBoxes .ui-button .ui-button-text {
    background: #A9A9A9;
    display: inline;
    font-size: 16px;
    left: 19px;
    padding: 0;
    position: relative;
    text-indent: 0;
    top: -4px;
}

结果！

这篇关于自动样式复选框与jQuery ui主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！