Question

我要求从移动视图中查看右下角的导航按钮应从登录页面中删除。因为在登录页面中单击按钮时无法显示任何内容。

但它不适合我。

这是我的代码：

<!DOCTYPE html>
<html data-ng-app="titaniaApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="images/favicon.ico">
<link href="bootstrap-3.1.0-dist/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="bootstrap-3.1.0-dist/dist/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<link href="styles/datepicker.css" rel="stylesheet" type="text/css" />
<link href="styles/personaltitania_base.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script src="json/personaltitania.json"></script>
<script type="text/javascript" src="bootstrap-3.1.0-dist/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-cookies.js"></script>
<script type="text/javascript" src="js/angular-local-storage.js"></script>
<script type="text/javascript" src="js/angular-translate.min.js"></script>
<script type="text/javascript" src="js/angular-ui-router.js"></script>
<script type="text/javascript" src="js/angular-translate-loader-url.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/locales/bootstrap-datepicker.fi.js"></script>
<script type="text/javascript" src="js/locales/bootstrap-datepicker.sv.js"></script>

<script src="js/uiBreadcrumbs.js"></script>
<script src="js/spin.js"></script>
<script src="app-modules/titaniaApp.js"></script>
<script src="app-services/authenticationService.js"></script>
<script src="app-services/localize.js"></script>
<script src="app-controllers/findEventsController.js"></script>
<script src="app-controllers/loginController.js"></script>
<script src="app-controllers/findEventsLinkController.js"></script>
<script src="app-directives/loadspinner.js"></script>

<title>{{'TITLE' | translate}}</title>
</head>
<body>
    <header class="navbar navbar-default navbar-static-top" id="my-nav-bar">
        <div style="border-top: 10px solid RGB(227, 25, 55)"></div>
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#navbar-ex-collapse" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span> <span
                        class="icon-bar"></span> <span class="icon-bar"></span> <span
                        class="icon-bar"></span>
                </button>
                <a class="navbar-brand iconAlign"><span
                    style="color: RGB(227, 25, 55)">Menu</span></a> 
                <a class="navbar-brand iconAlign brand_color"><span>{{'LOGIN_PERSON_OWN_EVENTS' | translate}}</span></a>
            </div>
            <div class="collapse navbar-collapse" id="navbar-ex-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a style="margin-right: 100px" data-ng-if="loggedUser">
                        <span class="fa fa-user iconAlign font-icon-size">&nbsp;</span>{{ loggedUser }}</a>
                    </li>
                    <li><div data-ng-if="loggedUser">
                            <button data-ng-click="logout()" type="button" class="btn btn-link logoutButton" >{{'LOGOUT' | translate}}</button>
                            <a data-ng-click="logout()" class="fa fa-sign-out font-icon-size" style="padding-right:-12px;"></a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </header>

    <ui-breadcrumbs data-ng-if="loggedUser"
        displayname-property="data.displayName"
        abstract-proxy-property="data.proxy"
        template-url="app-views/uiBreadcrumbs.html"></ui-breadcrumbs>

    <div class="section" data-ui-view="main"></div>

    <footer class="navbar-fixed-bottom">
      <div class="container">
        <div class="navbar-footer">
          <span style="color: RGB(227, 25, 55)"><img src="images/cgi.png" width="50"></span>
          <span class="brand_color footer_align">Titania</span>
          <span class="brand_color footer_align">Version.16.1.0</span>
        </div>
      </div>
    </footer>

</body>
</html>

这是我的js：

'use strict';
var endPointURL = "";
var loadRemoteURL = function() {
    var serverIP = personaltitaniaOptions.endPointURL;
    endPointURL = serverIP + "/rest/";
};
loadRemoteURL();
var MyApp = angular.module('MyApp', [ 'ui.router',
        'angularUtils.directives.uiBreadcrumbs', 'ngCookies',
        'pascalprecht.translate', 'LocalStorageModule' ]);

MyApp.config([
        '$stateProvider',
        '$urlRouterProvider',
        '$translateProvider',
        'localStorageServiceProvider',
        function($stateProvider, $urlRouterProvider, $translateProvider,
                localStorageServiceProvider) {

            $urlRouterProvider.otherwise('/login/');

            $stateProvider.state('login', {
                url : '/login/:lang',
                views : {
                    'main@' : {

                        templateUrl : 'app-views/loginView.html',
                        controller : 'LoginController'
                    }
                },
                data : {
                    displayName : 'Home'
                }
            }).state('findeventshome', {
                url : '/findEventsLink',
                views : {
                    'main@' : {

                        templateUrl : 'app-views/findEventsLinkView.html',
                        controller : 'findEventsLinkController'
                    }
                },
                data : {
                    displayName : 'BREADCRUMBS_INDEX'
                }
            }).state('findeventshome.findevents', {
                url : '/findEventsOfPerson',
                views : {
                    'main@' : {

                        templateUrl : 'app-views/findEventsView.html',
                        controller : 'findEventsController'
                    }
                },
                data : {
                    displayName : 'LOGIN_PERSON_OWN_EVENTS'
                }
            });
            localStorageServiceProvider.setStorageType('sessionStorage');
        } ]);

MyApp
        .run([
                '$rootScope',
                '$location',
                '$cookies',
                '$http',
                '$translate',
                'localStorageService',
                function($rootScope, $location, $cookies, $http, $translate,
                        localStorageService) {

                    var lang = $cookies.get('language');
                    var allowedLang = [ "fi", "en", "sv" ];

                    lang = (lang == null || lang == '' || allowedLang
                            .indexOf(lang) == -1) ? "fi" : lang;



                    if (localStorageService.get("dictionary") == undefined) {
                        if (lang == 'en') {
                            $rootScope.dictionary = {
                                TITLE : "Titania electronic services",
                                LOGIN_PERSON_OWN_EVENTS : "Personal work time",
                                CLOSE : "Close"

                            };
                        }
                        if (lang == 'fi') {
                            $rootScope.dictionary = {
                                TITLE : " Sähköinen asiointi",
                                LOGIN_PERSON_OWN_EVENTS : "Oma työaika",
                                CLOSE : "Sulje"

                            };
                        }
                        if (lang == 'sv') {
                            $rootScope.dictionary = {
                                TITLE : "asiointi R",
                                LOGIN_PERSON_OWN_EVENTS : "Egen arbetstid",
                                CLOSE : "Sulje R"
                            };
                        }
                    } else {
                        $rootScope.dictionary = localStorageService
                                .get("dictionary");
                    }

                    $rootScope.logout = function() {
                        function onSuccess(data) {
                            //write a code for close menu.
                            $('.navbar-collapse').collapse('hide');
                            $cookies.remove('sessionID');
                            $rootScope.logotSuccess = true;
                            var lang = $cookies.get('language');
                            $location.path('/login/' + lang);

                        }

                        function onFailure(info) {
                            $location
                                    .path('/login/' + $cookies.get('language'));
                        }

                        $http({
                            method : 'POST',
                            url : endPointURL + 'logout',
                            data : $cookies.get('sessionID')

                        }).then(onSuccess, onFailure);
                    };

                } ]);

这是我的loginController.js

'use strict';

angular.module('titaniaApp').controller('LoginController', LoginController);

LoginController.$inject = [ '$scope', '$location', 'AuthenticationService',
        '$rootScope',  '$translate', '$cookies', '$http','LocalizeService' ,'localStorageService'];
function LoginController($scope, $location, AuthenticationService, $rootScope,
         $translate, $cookies, $http,LocalizeService,localStorageService) {
    $scope.viewLoading = true;
    $('.navbar-header').addClass('hidden-xs');
    $rootScope.dictionary=undefined;
    var url=$location.url();
    var lenght=url.length;
    var lang =url.slice((lenght-2),lenght);

    var allowedLang = [ "fi", "en", "sv" ];

    lang = (lang == null || lang == '' || allowedLang.indexOf(lang) == -1) ? "fi"
            : lang;

    if(lang=='en'){
        $rootScope.dictionary={
                TITLE : "Titania electronic services",
                LOGIN_PERSON_OWN_EVENTS : "Personal work time",
                CLOSE : "Close",
                LOGIN_USERNAME : "Username",
                LOGIN_PASSWORD : "Password",
                LOGIN_LOGIN : "Log in",
                LOGIN_CONNECTION : "Communication problem",
                LOGOUT_SUCCESS : "Logout successfully",
                LOGIN_TITLE: "Titania Electronic Services - login"

        };
        }
        if(lang=='fi'){
            $rootScope.dictionary={
                    TITLE : " Sähköinen asiointi",
                    LOGIN_PERSON_OWN_EVENTS : "Oma työaika",
                    CLOSE : "Sulje",
                    LOGIN_USERNAME : "Käyttäjätunnus",
                    LOGIN_PASSWORD : "Salasana",
                    LOGIN_LOGIN : "Kirjaudu",
                    LOGIN_CONNECTION : "viestintä virhe",
                    LOGOUT_SUCCESS : "Logout onnistuneesti",
                    LOGIN_TITLE: "Sähköinen asiointi - kirjautuminen"

            };
            }
        if(lang=='sv'){
            $rootScope.dictionary={
                    TITLE : " Sähköinen asiointi R",
                    LOGIN_PERSON_OWN_EVENTS : "Egen arbetstid",
                    CLOSE : "Sulje R",
                    LOGIN_USERNAME : "Användar ID",
                    LOGIN_PASSWORD : "Lösenord",
                    LOGIN_LOGIN : "Logga in",
                    LOGIN_CONNECTION : "viestintä virhe R",
                    LOGOUT_SUCCESS : "Logout onnistuneesti R",
                    LOGIN_TITLE: " Elektronisk upphandling - inloggning"

            };
            }



    $rootScope.loggedUser = false;

    $scope.user = {};
    $scope.user.updTerminal = $location.host();
    if($cookies.get('language')!=lang){
        $rootScope.logotSuccess = false;
    }

    $cookies.put('language', lang);



    $scope.login = function() {

        AuthenticationService.Login($scope.user, function(response) {
            $('.navbar-toggle').addClass('visible-xs');
            if (response.success) {
                $rootScope.loggedUser = response.user.updUserName;
                $cookies.put('sessionID', response.user.sessionId);
                $cookies.put('user', response.user.updUserName);
                $location.path('/findEventsLink');

            } else {
                if(response.message.data==null){
                    $scope.error = "LOGIN_CONNECTION";
                }else {
                $scope.error = response.message.data;
                }
                $rootScope.loggedUser = false;
                $rootScope.logotSuccess = false;
            }
        });
    };




        var onSuccess =function(data) {
            $rootScope.dictionary = data.data;
            localStorageService.set("dictionary", data.data);


        $scope.viewLoading = false;
        };

        var onFailure=function(info) {
            if(info.data==null){
                $scope.error="LOGIN_CONNECTION";
            }
            $scope.viewLoading = false;
        };

        $http({
            method : 'POST',
            url : endPointURL + 'restLocalization',
            data : lang,
            headers : {
                'Content-Type' : 'application/json'
            }
        }).then(onSuccess, onFailure);



}

我想要导航按钮，即：

仅在移动视图中删除。请帮帮我。

Answer 1

按钮本身中的hidden-xs怎么样：

class AddVideoTitleViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
    TextView TitleScreenTitle;
    ImageView TitleScreenImage;

    public AddVideoTitleViewHolder(View itemView) {
        super(itemView);

        TitleScreenTitle = (TextView) itemView.findViewById(R.id.AddVideoTitleSingleRowTextView);
        TitleScreenImage = (ImageView) itemView.findViewById(R.id.AddVideoTitleSingleRowImageView);
        TitleScreenImage.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {

        final  ImageView TitleImage = (ImageView) v.findViewById(R.id.TitleImageimageView);
        AddTitlesInformation current = data.get(getAdapterPosition());
        TitleImage.setImageResource(current.titleImageId);

    }

它将在小屏幕中隐藏菜单切换按钮。

修改要在登录页面上应用它（如果你不能直接使用它），只能在登录页面中使用以下jquery：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-ex-collapse" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

Answer 2

您只需使用移动视图响应式css添加css代码，并将属性添加到display：none，如下所示：

@media only screen
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.menunameClass{
display:none;
}
}

可能会解决您的问题。

Answer 3

试试这个。

if($(window).width() <= 480 && window.location.href == 'your.login.pageurl'){
$(".navBtn").css("display","none");
}

如何从登录页面删除导航按钮

3 个答案: