我的第一篇文章，请原谅我，如果我没有正确完成，谢谢你。
我想将“Google自定义搜索”框添加到“Ali Shtarbanov的menuBar / centralizedMenu”的最后一项“关于”的右侧，并在显示器屏幕较小时创建的3栏图标的左侧 - 此菜单将在较小的屏幕上折叠/调整为三个小节。我正在使用html，没有php。
当我添加Google代码时，只是创建一个空白区域，没有搜索框。这是我正在添加的Google功能代码示例：
<script>
(function() {
var cx = 'xxxxxxxxxxxxxxxxxxxxxxx:xxxxxxx’;
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
他的menuBar.html上的代码和输出在这里： http://jsbin.com/cotewaxemi/edit?html,output 并粘贴在这里：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>MenuBar</title>
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Logo and responsive toggle -->
<div class="navbar-header"> <!--This div creates a navigation button visible on smaller screens -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span><!--These tags create the standard 3-lin button logo on top right corner -->
<span class="icon-bar"></span><!--Put the page less than full-screen to see this behavior -->
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown1<span class="caret"></span></a><!--Requires the JavaScript files linked at the end-->
<ul class="dropdown-menu">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">AnotherItem</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Header:</li>
<li><a href="#">MoreItems</a></li>
<li><a href="#">MoreItems</a></li>
<li><a href="#">MoreItems</a></li>
</ul>
</li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- JavaScript is required for the dropdown menu -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.js"></script>
<!-- Bootstrap core JavaScript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
</body>
</html>
再次感谢你， 克里斯蒂娜 附：我想把链接放到我试图做的事情上，但由于我是新成员，它说我不允许这么多链接。
答案 0 :(得分：2)
这是工作版本。
注意：如果您看不到整个菜单，请点击面板右上角的整页。
// Make sure in jsFiddle you have selected option onLoad
(function() {
var cx = '017643444788069204610:4gvhea_mvga'; // Insert your own Custom Search engine ID here
var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
gcse.src = (document.location.protocol == 'https' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.js"></script>
<!-- Bootstrap core JavaScript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Logo and responsive toggle -->
<div class="navbar-header"> <!--This div creates a navigation button visible on smaller screens -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span><!--These tags create the standard 3-lin button logo on top right corner -->
<span class="icon-bar"></span><!--Put the page less than full-screen to see this behavior -->
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown1<span class="caret"></span></a><!--Requires the JavaScript files linked at the end-->
<ul class="dropdown-menu">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">AnotherItem</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Header:</li>
<li><a href="#">MoreItems</a></li>
<li><a href="#">MoreItems</a></li>
<li><a href="#">MoreItems</a></li>
</ul>
</li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">About</a></li>
<li id="gsrc"><a data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</a></li>
<li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- JavaScript is required for the dropdown menu -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- jQuery -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Google Search</h4>
</div>
<div class="modal-body">
<gcse:search></gcse:search>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
答案 1 :(得分：0)
首先，您的代码中存在拼写错误。问题在于结束报价。只需更改线条就可以了。
var TestBscope = $controller('TestBController', {$scope: $scope});
var modalInstance = $uibModal.open({
templateUrl: 'TestB.html',
controller: 'ModalController',
scope: TestBscope
});
到
var cx = 'xxxxxxxxxxxxxxxxxxxxxxx:xxxxxxx’;
第二，如果你想按照你所描述的那样去做，那就有一些工作要做。您必须将var cx = 'xxxxxxxxxxxxxxxxxxxxxxx:xxxxxxx';
放在HTML上的某个位置。
但是，您不希望在约会之后将其作为列表项<gcse:search></gcse:search>，因为在较小的屏幕中查看时整个菜单都会崩溃。所以我建议使用<li>创建一个新的<div>，然后将其ID放在<div class="navbar-header">之内。{/ 1}。
其余的只是css。如果您有使用CSS的经验，那就不会有问题了。
重要提示：请先试试，如果遇到困难，我们可能很乐意提供帮助。告诉我们你到目前为止的表现。发布问题时会有一个代码段工具，您可以将
</button>，JS和CSS粘贴到外部库支持，例如HTML和Jquery。不要犹豫，使用它，