--- /dev/null
+/* ========================================================
+ * bootstrap-tabs.js v1.4.0
+ * http://twitter.github.com/bootstrap/javascript.html#tabs
+ * ========================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ======================================================== */
+
+
+!function( $ ){
+
+ "use strict"
+
+ function activate ( element, container ) {
+ container
+ .find('> .active')
+ .removeClass('active')
+ .find('> .dropdown-menu > .active')
+ .removeClass('active')
+
+ element.addClass('active')
+
+ if ( element.parent('.dropdown-menu') ) {
+ element.closest('li.dropdown').addClass('active')
+ }
+ }
+
+ function tab( e ) {
+ var $this = $(this)
+ , $ul = $this.closest('ul:not(.dropdown-menu)')
+ , href = $this.attr('href')
+ , previous
+ , $href
+
+ if ( /^#\w+/.test(href) ) {
+ e.preventDefault()
+
+ if ( $this.parent('li').hasClass('active') ) {
+ return
+ }
+
+ previous = $ul.find('.active a').last()[0]
+ $href = $(href)
+
+ activate($this.parent('li'), $ul)
+ activate($href, $href.parent())
+
+ $this.trigger({
+ type: 'change'
+ , relatedTarget: previous
+ })
+ }
+ }
+
+
+ /* TABS/PILLS PLUGIN DEFINITION
+ * ============================ */
+
+ $.fn.tabs = $.fn.pills = function ( selector ) {
+ return this.each(function () {
+ $(this).delegate(selector || '.tabs li > a, .pills > li > a', 'click', tab)
+ })
+ }
+
+ $(document).ready(function () {
+ $('body').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a')
+ })
+
+}( window.jQuery || window.ender );
<script id="usersGrid" type="text/x-jquery-tmpl">
<h2>Users list</h2>
- <button data-bind='click: addUser' class="btn">
- Add User
- </button>
-
<button data-bind='click: sortByName' class="btn">
Sort by name
</button>
-
- <div id="usersPagination"></div>
-
- <table class="bordered-table zebra-striped" data-bind="simpleGrid: gridViewModel" id="usersTable"></table>
-
- <div id="createUserForm"></div>
+ <ul id="users-view-tabs" class="tabs">
+ <li class="active">
+ <a href="#users-view">Users</a>
+ </li>
+ <li>
+ <a href="#createUserForm">Add User</a>
+ </li>
+ </ul>
+ <div id="users-view-tabs-content" class="tab-content">
+ <div id="users-view">
+ <table class="bordered-table zebra-striped" data-bind="simpleGrid: gridViewModel" id="usersTable"></table>
+ <div id="usersPagination"></div>
+ </div>
+ <div id="createUserForm"></div>
+ </div>
</script>
this.loadUsers = function() {
$.ajax("restServices/redbackServices/userService/getUsers", {
type: "GET",
+ async: false,
dataType: 'json',
success: function(data) {
var mappedUsers = $.map(data.user, function(item) {
window.redbackModel.usersViewModel = new usersViewModel();
window.redbackModel.usersViewModel.loadUsers();
ko.applyBindings(window.redbackModel.usersViewModel,jQuery("#main-content").get(0));
+ $("#users-view-tabs").tabs();
+ $("#users-view-tabs").bind('change', function (e) {
+ //$.log( $(e.target).attr("href") ); // activated tab
+ //e.relatedTarget // previous tab
+ if ($(e.target).attr("href")=="#createUserForm") {
+ window.redbackModel.usersViewModel.addUser();
+ }
+ })
+ $("#users-view-tabs-content #users-view").addClass("active");
}
+
+
userViewModel=function(user) {
this.user=user;
}