JQUERY 2 Showcases

JQUERY 2 Showcases

by george_black

HTML

<select id="showCases">
    <option value="0">-- Select Showcase --</option>
    <option value="Simplified .show() and .hide() methods">Simplified .show() and .hide() methods</option>
    <option value="Special case with .data() names">Special case with .data() names</option>
    <option value="jQuery.Deferred">jQuery.Deferred</option>
    <option value="jQuery.Deferred is now Promises/A+ compatible">jQuery.Deferred is now Promises/A+ compatible</option>
    <option value=".width(), .height(), .css('width'), and .css('height') to return decimal values (whenever the browser does)">.width(), .height(), .css(“width”), and .css(“height”) to return decimal values (whenever the browser does)</option>
    <option value=".unwrap( selector )">.unwrap( selector )</option>
</select>
<select id="operation">
    <option value="0">-- Select Operation --</option>
    <option value="reset">-- Reset --</option>
</select>
<section class="one">1) Simplified .show() and .hide() methods
    <div class="show">Example DIV</div><span class="show">Example Span</span>

    <div class="show testInline">Example DIV Inline</div>
    <div class="parent parentTestInline">
        <div class="show child">Parent/Child example</div>
    </div>
    <hr/>
</section>
<section class="two">2) Special case with .data() names
    <div class="foo1" data-foo-68="foo-68" data-foo68="foo68">1) data-foo-68</div>
    <div class="foo2" data-foo68="foo68" data-foo-68="foo-68">2) data-foo68</div>
    <div class="foo3" data-foo-bar="foo-bar" data-fooBar="fooBar">3) data-foo-bar</div>
    <div class="foo4" data-fooBar="fooBar" data-foo-bar="foo-bar">4) data-fooBar</div>
    <hr/>
</section>

<section class="three">3) Special case with .data() names
    <div class="foo1" data-foo-68="foo-68" data-foo68="foo68">1) data-foo-68</div>
    <div class="foo2" data-foo68="foo68" data-foo-68="foo-68">2) data-foo68</div>
    <div class="foo3" data-foo-bar="foo-bar" data-fooBar="fooBar">3) data-foo-bar</div>
    <div...

CSS

.float50 {
    width:50%;
    float:left;
}

.testInline {
    display:inline;
}

.parentTestInline > .child {
    display:inline;
}

JavaScript

$('document').ready(function () {

    $('select#showCases').change(function () {
        $('section').hide();
        switch ($(this).val()) {
            case 'Simplified .show() and .hide() methods':

                $('section.one').show();
                showDisplay();

                $('select#operation').append(
                    '<option value=".show()">.show()</option>' +
                    '<option value=".hide()">.hide()</option>' +
                    '<option value="remove ParentTestInline before hide show">remove parent class before hide/show</option>' +
                    '<option value="remove ParentTestInline after hide show">remove parent class after hide/show</option>');
                break;

            case 'Special case with .data() names':
                $('section.two').show();
                showData();
                break;

            case 'jQuery.Deferred':


                // Attach a done, fail, and progress handler for the asyncEvent
                $(".helper").html('');
                $.when(asyncEvent()).then(

                function (status) {
                    alert(status + ", things are going well");
                },

                function (status) {
                    alert(status + ", you fail this time");
                },

                function (status) {
                    $(".helper").append(status);
                });
                break;

            case 'jQuery.Deferred is now Promises/A+ compatible':

                var parent = jQuery.Deferred();
                var child = parent.then(null, function () {
                    return "bar";
                });
                var callback = function (state) {
                    return function (value) {
                        console.log(state, value);
                        throw new Error("baz");
                    };
                };
                var grandchildren = [
                child.then(callback("fulfilled"),...