Bootstap

Playing with twitters bootstrap

by PAEz

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/1.3.0/bootstrap-twipsy.js"></script>
<script src="http://twitter.github.com/bootstrap/1.3.0/bootstrap-modal.js"></script>
<div class="container">
    This is an example of a sentence with a<br/><br/>
    <span rel="twipsy" title="tooltip example">twipsy</span>
    tooltip.
    <br/>
    
    
    <span class="span2"> X-Large input</span>
    
    <input class="xlarge" id="xlInput" name="xlInput" size="30" type="text">
    <br/>
    <br/>
    <div class="float-right">t</div>
    <span class="span2"> X-Large input</span>
    
    <input class="xlarge" id="xlInput" name="xlInput" size="30" type="text">
    
    
    
    
</div>

<a class="btn" data-backdrop="true" onclick="$('#modal-appsettings').modal('show')">Launch Modal</a>



<div id="modal-appsettings" class="modal fade hide">
    <div class="modal-header">
        <a href="#" class="close">×</a>
        <h3>Application Settings</h3>
    </div>
    <div class="modal-body">
        <div class="row">
            <span class="span2 labell">Title</span>
            <input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" title="Enter a title for the app" >
        </div> 
        <br/>
        <div class="row">
            <span class="span2 labell">Command Line</span>
            <input class="xlarge" id="xlInput" name="xlInput" size="30" type="text" title="Enter the command line used to execute the app" >
        </div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn primary">Save change</a>
        <a href="#" class="btn secondary">Cancel</a>
    </div>
</div>

CSS

div.container {width:450px !important;
    height:450px;
    overflow-y:auto !important;
    background:#f8f8ff;}
div.appslist{
    border-style:solid;
    border-color:#ddd;
    margin:10px;
    padding-top:10px;
    padding-bottom:10px;
    height:150px;
    overflow-y:hidden !important;
}
div.appslist > div.row {
    margin:0px;    
}
div.appslist > span{
    padding-top:55px !important;
}
.float-right {
    float: right;
}
.modal0 {
    width:450px;
}
.modal-footer a {
    float: left !important;
}

JavaScript

//$('span[rel=twipsy]').twipsy({'placement': 'above'});
//$('#edit-modal').modal({backdrop:true});


/*
This is the definition for an extended observable called a "protectedObservable"
-this would generally belong in a separate library
-the idea is that you can still use it just like any observable, but it has more features
-some of the extra features that it provides
  -when someone writes to it, the value is cached until you call its "commit" method
  -a "reset" method will update the bound fields back to the original value
  -the temporary value is exposed, in case you need to send it to the server
  -a dirtyFlag is exposed using a dependentObservable that checks the original vs. temp value
-now you can bind to your observable and any of its sub-observables (temp, isDirty, commit, reset)
-this post explains this idea in more detail: http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html  
*/
ko.protectedObservable = function(initalValue) {
    //private variables
    var _temp = ko.observable(initalValue),
        _actual = ko.observable(initalValue);

    //what we actually return is a writeable dependentObservable, so we can intercept writes to it
    var result = ko.dependentObservable({
        read: function() {
            return _actual();
        },
        write: function(newValue) {
            _temp(newValue);
        }
    });
    
    //expose the temporary value
    result.temp = _temp;

    //expose a flag to indicate that the values are different
    result.isDirty = ko.dependentObservable(function() {
       return _temp() !== _actual();   
    });
    
    //commit the temporary value to our observable
    result.commit = function() {
         _actual(_temp());
    };

    //notify subscribers to update their value with the original
    result.reset = function() {
        _actual.valueHasMutated();
        _temp(_actual());
    };

    return result;
};

//This is a simple custom binding that will fade in or out an...