jQuery UI Widgets Forums Navigation Tabs Tabs associated to one div

This topic contains 2 replies, has 2 voices, and was last updated by  aigleborgne 10 years, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Tabs associated to one div #52113

    aigleborgne
    Participant

    Hello,

    Currently, each tab is associated to one div, which is great for classical use cases.
    But I’d like to use tabs with view rendering using angularjs : I’m not interested by the tab rendering, only the tabs selection. Tabs are only used to render a view, and in my case, it is the same view with a different parameter value.
    It is done with angular-bootstrap this way:

    <ul id="type-tabs" class="nav nav-tabs">
      <li data-ng-repeat="type in types" data-ng-class="{ active: $state.includes('param-config.paramList') && $stateParams.typeId == type.id }">
      	<a data-ui-sref="param-config.paramList({typeId: type.id})">{{type.label}}</a>
      </li>
    </ul>
    <div class="tab-view" data-ui-view></div>	 
    

    I tried to do the same thing with jqx-tabs but it is different because selected tab is rendered while others are hidden.
    I think this component could not easily used the same way but I might be wrong?

    Tabs associated to one div #52126

    Dimitar
    Participant

    Hello aigleborgne,

    You can use ng-repeat for the tabs content sections, too. Here is an example that shows how:

    <!DOCTYPE html>
    <html lang="en" ng-app="demoApp">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
        <script type="text/javascript">
            var demoApp = angular.module("demoApp", []);
    
            demoApp.controller('tabsController', function ($scope) {
                $scope.tabs = [{
                    title: "Tab1",
                    content: "Content of Tab1"
                }, {
                    title: "Tab2",
                    content: "Content of Tab2"
                }, {
                    title: "Tab3",
                    content: "Content of Tab3"
                }];
            });
    
            $(document).ready(function () {
                $('#jqxTabs').jqxTabs({ width: '90%', height: 200, position: 'top' });
            });
        </script>
    </head>
    <body class='default' ng-controller="tabsController">
        <div id='jqxTabs'>
            <ul>
                <li ng-repeat="tab in tabs">{{tab.title}}</li>
            </ul>
            <div ng-repeat="tab in tabs">
                {{tab.content}}
            </div>
        </div>
    </body>
    </html>

    We hope it is helpful to you.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Tabs associated to one div #52127

    aigleborgne
    Participant

    It doesn’t solve my issue. This is the code I used:

    <div data-jq-tabs>
    	<ul>
    	  <li data-ng-repeat="mod in mods" data-ng-class="{ active: $state.includes('spells.list') && $stateParams.modId == mod.id }">
    	 	<a data-ui-sref="spells.list({modId: mod.id})">{{mod.name}}</a>
    	  </li>
    	</ul>
    	<div data-ng-repeat="mod in mods"></div>
    </div>
    
    	module.directive('jqTabs', [ '$compile', '$timeout', '$jqCommon', '$jqTabs', function JqTabsDirective($compile, $timeout, $jqCommon, $jqTabs) {
    		return {
    			restrict : 'AE',
    			link : function(scope, element, attributes) {
    				var params = scope.$eval(attributes.jqTabs) || {};
    				var options = angular.extend({}, $jqCommon.options(), $jqTabs.options(), params);
    				$timeout(function() {
    					element.jqxTabs(options);
    				});
    			}
    		};
    	} ]);
    

    Pretty simple, but my tabs have an empty content since I am rendering a unique view for all of them:

    		$stateProvider.state('spells.list', {
    			url : '/:modId',
    			views : {
    				'spell-list' : {
    					controller : 'SpellListController',
    					templateUrl : 'spell/spell-list.tpl.html',
    				}
    			},
    			resolve : {
    				spells : [ 'SpellService', '$stateParams', function(SpellService, $stateParams) {
    					var spells = SpellService.getSpells($stateParams.modId);
    					return angular.isDefined(spells.$promise) ? spells.$promise : spells;
    				} ]
    			}
    		});
    

    So, as for tab content, I have one div pointing to the view:
    <div class="tab-view" data-ui-view></div>

    I will play around to see if I can find a good solution!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.