jQuery selectors, filters

by benjrei

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://cdn3.devexpress.com/jslib/15.1.7/js/dx.all.js"></script>
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/15.1.7/css/dx.common.css">
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/15.1.7/css/dx.light.css">
<script src="https://my.viatracks.com/Scripts/knockout.mapping.js"></script>
<script src="https://dl.dropboxusercontent.com/u/11438746/dummyData/dummyData.js"></script>
<script src="https://dl.dropboxusercontent.com/u/11438746/dummyData/functions.js"></script>
<div data-bind="dxButton: { text: 'jQuery Selectors and Filters', onClick: SPA.ViewModel.basicSelectors }"></div>
<div id="selectors" data-bind="dxPopup:{ title: 'jQuery Selectors and Filters', closeOnOutsideClick: true, visible: true, width:windowWidth(100), height: windowHeight(50), position:{ at: 'center', of: window } }">
    <div class="popup-content">
        <div data-bind="dxScrollView: { direction: 'both', height: windowHeight(130) }">
            <input data-bind='value: SPA.ViewModel.code, valueUpdate: "afterkeydown"' />
            <div data-bind="dxButton: { text: 'Add Border', type: 'success', onClick: function(){ jQuery_addRedBorder(SPA.ViewModel.code());} }"></div>
            <div data-bind="dxButton: { text: 'Remove Border', type: 'danger', onClick: function(){ jQuery_removeBorder(SPA.ViewModel.code());} }"></div>
            <p>Code to run:  $("<b data-bind=" text: SPA.ViewModel.throttledCode()"></b>").css("border", "3px solid red");</p>
            <p>A few examples:</p>
            <ul id="list1">
                <li><b>Basic Selectors</b>

                </li>
                <li><code>$("<i>tag</i>")</code>: Select all of the &lt;tag&gt; elements</li>
               ...

CSS

/*
** Styles used in the jQuery Essential Training course materials
*/
 body {
    font-family:"Open Sans", sans-serif;
    font-size: 12pt;
}
.testContent {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 200px;
}
#example {
    border: 1px solid gray;
    background-color: #b3c8d0;
    top: 40px;
    font-size:12pt;
    padding-left: 10pt;
    padding-right: 10pt;
    min-height: 200px;
}
.box {
    border: 1px solid gray;
    background-color: #b3c8d0;
    font-size:14pt;
    padding-left: 10pt;
    padding-right: 10pt;
    min-height: 200px;
    width: 300px;
}
.box p {
    margin: 0 1pt 0 2pt
}
.smallbox {
    border: 1px solid gray;
    background-color: #b3c8d0;
    font-size:14pt;
    padding-left: 10pt;
    padding-right: 10pt;
    margin-bottom: 10pt;
    margin-right: 0;
    margin-left: 0;
    min-height: 150px;
    width: 200px;
}
.inline {
    display: inline-block;
}
code {
    background-color: #e8e8e8;
    border: 1px solid #a8a8a8;
    border-radius: 3px;
    padding: 0 2pt;
    margin: 2pt;
    font-family:"source-code-pro", Consolas, monospace;
    font-size: .8em;
}
li {
    line-height: 1.3em;
}
button {
    font-size: 14pt;
    margin: 8px;
}
#eventDetails {
    border: 1px solid #aaa;
    margin-top: 8pt;
    padding: 2pt;
}
.lineitem {
    width: 120px;
    display: inline-block
}

JavaScript

window.SPA = {};
SPA.ViewModel = {};

$(function () {
    $model = SPA.ViewModel;
    $model.code = ko.observable("#para4");
    $model.throttledCode = ko.computed($model.code).extend({
        throttle: 100
    });

    $model.basicSelectors = function () {
        $('#selectors').dxPopup('instance').show();
    }

});
ko.applyBindings(SPA.tripViewModel); // This makes Knockout get to work