个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在创建一个 ionic map 应用程序，并尝试向我的导航栏添加一个可切换的搜索栏。我通过 ion-nav-buttons side="left"(搜索图标、输入栏)添加到导航栏左侧的所有内容都无法单击/聚焦。奇怪的是，如果它们溢出导航栏，我可以点击这些元素的区域。下面的代码和测试图像:
<body ng-app="radar">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar bar-positive" ng-controller="MenuController" delegate-handle="navBar" align-title="center">
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-navicon" menu-toggle="right">
</button>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<div class="searchBar">
<i class="icon ion-search placeholder-icon searchButton" ng-click="newSearch()"></i>
<div class="searchTxt" ng-show="showSearch">
<div class="bgdiv"></div>
<div class="bgtxt">
<input type="text" class="searchInput" placeholder="Search..." ng-model="search">
</div>
</div>
</div>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content ng-controller="MapController" class="mapCanvas has-header">
<ion-nav-view></ion-nav-view>
<div id="map" data-tap-disabled="true"></div>
<button id="GeoButton" ng-click="geoLocate()"><i class="icon ion-android-locate"></i></button>
</ion-content>
</ion-side-menu-content>
<!-- RIGHT SLIDE MENU -->
<ion-side-menu class="rightMenu" side="right">
<header class="bar bar-dark bar-header rightMenuHeader">
<h1 class="title">Right Menu</h1>
</header>
<ion-content class="has-header">
<ion-nav-view name="RIGHT MENU"></ion-nav-view>
<div class="button-bar logReg">
<a class="button" ng-click="">Login</a>
<a class="button" ng-click="">Register</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
和一些 CSS:
.searchBar {
color: white;
margin: 0 !important;
padding: 0;
}
.searchBar .icon {
font-size: 27px;
line-height: 1.2;
position: fixed;
color: white;
padding-left: 6px;
padding-right: 6px;
}
.searchBar .searchTxt {
left: 55px;
width: 50%;
position: fixed;
height: calc(100% - 10px);
color: white;
}
.searchIcon {
position: fixed;
width: 50px;
height: 50px;
background-color: black;
}
.searchBar .searchTxt > .bgdiv {
background-color: darkBlue;
width: 50%;
height: 100%;
position: absolute;
opacity: 0.3;
}
.searchBar .searchTxt > .bgtxt {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
}
.searchBar .searchTxt input {
background-color: inherit;
color: white;
padding-left: 5px;
padding-right:5px;
}
.rightMenu {
background-color: rgb(50,50,50);
}
最佳答案
根据您的代码，您的 www/js/controllers.js 文件中应该有一个名为“MenuController”的 Controller ，它具有函数 newSearch()。
这是我在我的 controllers.js 文件中使用 Controller “NavCtrl”和函数 .getPhoto() 捕获导航栏中的按钮单击的内容
.controller('NavCtrl', function($scope, $cordovaCamera) {
$scope.getPhoto = function() {
//alert("button clicked");
navigator.camera.getPicture(function(imageURI) {
}, function(err) {
console.err(err);
});
}
关于angularjs - ion-nav-bar 中的元素无法点击，无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27716061/
25
4
0
我是 Bootstrap 的新手。每次我使用 Bootstrap 创建导航栏时，我都会使用这些元素/类，但所有这些都让我感到困惑: .nav .navbar .navbar-nav 谁能解释一下这些
我正在使用最新的 Angular Bootstrap 版本。当屏幕尺寸缩小到 768 像素以下时，类“nav nav-pills nav-justified”不会堆叠选项卡。 我引用了网站 http:
我有以下代码，div 内有两个 ul 元素，每个元素都有导航、导航丸、导航堆叠类。 All Pending K
我正在使用 Bootstrap pill 在同一页面上进行切换。有两个导航丸和两个分别对应的 div。我已经正确构建了第一个 div，并且工作正常。但是当我试图构建第二个 div 时，第一个 div
似乎 NAV 的潜在性质是抵制要求强制填充字段。对于我们的业务逻辑，必须填充某些字段才能使数据有效。例如，客户记录必须至少有姓名和电话号码。我搜索了很多地方，但没有找到合适的解决方案。那么如何做到这一
Bootstrap Navbars Toggle navigation
我注意到，在 Dynamics NAV 2013 中，一些 TextConst 已开始使用 @@@ 作为语言代码。 例如在 Codeunit 12 中: PurchaseAlreadyExistsEr
如何像图片一样更改引导菜单中打开的链接的颜色。它适用于鼠标悬停和单击后更改为菜单的默认颜色。 我需要像图片一样的东西。 HTML @Html.Action
我正在尝试列出我的 drop-down它工作正常，但在我点击财务报告链接后，我想要 的剩余内容标签向下移动和 drop-down应该在里面打开， .请提供任何帮助，我很感激。 这是我的代码:
我正在使用 Angular4，nav nav-tabs 样式似乎不起作用，我得到的只是无序的垂直列表，如下图 - 我的选项卡组件代码是 - @Component({ selector: 'tabs',
当我尝试构建我的网页时，我的菜单链接底部和我的主导航区域之间有一个非常小的空间(大约 2 像素)。我只使用颜色来查看布局的工作原理，但有人能告诉我为什么会有差异吗？当然他们应该是相同的高度？当前状态可
即使我不是一个新程序员，Html 和 Css 问题对我来说也是无解的。简单阅读文档/规范似乎还不够，因为每个示例都带有一个新的标签和类早午餐来演示其中一个的使用。我的代码基于 Bootsrap 官方演
我喜欢导航标签的外观，所以我想使用它。这是 Web 应用程序现在的样子: 不幸的是，如果我单击其他选项卡(例如“Buscar alojamiento”)，事件选项卡不会更改。这是我的代码:
我正在尝试使用 nav navbar-nav navbar-right 创建一个下拉菜单。我让它在移动设备(较小的屏幕)上对齐但是当我点击下拉菜单时它不会将菜单项向下推但是而是下拉其他菜单项。我不确定
工具提示在这种情况下工作正常 Home 但是一旦我将它嵌套在带有 nav 和 nav-side
我有一个应用程序，如果我提取代码并创建一个单独的 html 文件，只用它工作的代码，它就可以工作。 About
我对 Twitter Bootstrap 有疑问。我创建了一个简单的下拉菜单，但是当我在 chrome 检查器中检查代码时，我看到类 nav nav-pills被添加到 元素。 如何删除这些类？
我正在尝试删除我的菜单和后续部分之间的 Bootstrap 空白。我的菜单 HTML 是:
我正在使用 Bootstrap 4 并尝试使导航项与我的导航栏具有相同的高度，这样当我向其添加背景色时，它看起来就像穿过导航栏的条纹。 最初，该元素居中，并在顶部和下方留有空间。我添加了负边距以使其与
我是一名优秀的程序员,十分优秀！