Auto style checkbox with jQuery ui theme

前端 未结 1 1423
时光说笑
时光说笑 2021-02-09 08:56

(jQuery noob here)

Im trying to write a script which when I write will automatically convert it to jQuery UI button and look

相关标签:
1条回答
  • 2021-02-09 09:12

    Working examples:

    • 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!)

    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).

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

    the 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>​
    

    the CSS

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

    the 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);
        });
    });​
    

    Update: The original intent here was to purely answer the question, which was to create a jQuery UI styled checkbox and show how jQuery can be used in multiple ways. However, a later comment queried how to include a traditional style label with it. While there are a billion options for this, I'll simply take from the above and extend.

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

    the 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  })
    

    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;
    }
    

    Results!

    0 讨论(0)
提交回复
热议问题