当前位置：网站首页>Shandong University project training (VII) add navigation bar to select city

Shandong University project training (VII) add navigation bar to select city

2022-06-29 18:33:00 【MeditationRain】

List of articles

Our project is mainly divided into two parts , One is to check the air quality of city stations , By marking points ; The other is to check the pollution level of the city , By rendering the background color block color . The whole project includes... In Shandong Province 16 Cities —— jinan 、 Qingdao 、 zibo 、 Zaozhuang 、 dongying 、 yantai 、 weifang 、 Jining 、 Taian 、 weihai 、 sunshine 、 Linyi 、 Texas 、 Liaocheng 、 Binzhou 、 Heze , So I designed a two-level navigation bar , First, choose whether to check the air quality of the city site or the pollution level of the city , Then the next level is to choose the city .

One 、layUI Introduce ：

layui（ homophonic ： class UI) It's an open source set Web UI Solution , Using its own classic modular specification , And follow the original HTML/CSS/JS Development mode , Easy to use , Use immediately . Its style is simple and light , And the components are elegant and rich , Every detail from the source code to the method of use has been carefully carved , Very suitable for the rapid development of web interface .layui Different from those based on MVVM The underlying front-end framework , But it's not against the road , It's about returning to nature . To be exact , It's more for back-end developers , You don't have to get involved in front-end tools , Just face the browser itself , Let all the elements and interactions you need , Come from here .

Two 、layUI introduce

layui get ：https://github.com/layui/layui

layUI Introduce more critical code ：

<link rel="stylesheet" href="./layui/css/layui.css">

<script src="./layui/layui.js"></script>

Quick start ：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title> Start using  layui</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
  <!--  introduce css file  -->
</head>
<body>
 
<!--  Yours  HTML  Code  -->
 
<script src="./layui/layui.js"></script>
<!--  introduce js file  -->
<script> layui.use(['layer', 'form'], function(){
       var layer = layui.layer ,form = layui.form; layer.msg('Hello World'); }); </script> 
<!--  Set flyout layer  -->
</body>
</html>

3、 ... and 、layUI Use

I am going to use layUI The navigation bar ：

Insert picture description here

Related codes ：

<ul class="layui-nav">
  <li class="layui-nav-item layui-this"><a href=""> Choose </a></li>
  <li class="layui-nav-item">
    <a href="javascript:;"> routine </a>
  </li>
  <li class="layui-nav-item"><a href=""> Navigation </a></li>
  <li class="layui-nav-item">
    <a href="javascript:;"> Sub level </a>
    <dl class="layui-nav-child">
      <dd><a href=""> menu 1</a></dd>
      <dd><a href=""> menu 2</a></dd>
      <dd><a href=""> menu 3</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item">
    <a href="javascript:;"> Options </a>
    <dl class="layui-nav-child">
      <dd><a href=""> Options 1</a></dd>
      <dd class="layui-this"><a href=""> Options 2</a></dd>
      <dd><a href=""> Options 3</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href=""> demonstration </a></li>
</ul>

<script> layui.use('element', function(){
       var element = layui.element; // Navigational hover effect 、 Second level menu and other functions , Need to rely on element modular  // Monitor navigation Click  element.on('nav(demo)', function(elem){
       //console.log(elem) layer.msg(elem.text()); }); }); </script>

Four 、 Project use

Effect display ：

Insert picture description here

Add code ：

First introduced layUI Related documents of .
<link rel="stylesheet" href="./layui/css/layui.css">
<script src="./layui/layui.js"></script>

Then add... To the navigation bar html Content , And make appropriate changes to the style .

<ul class="layui-nav">
	  <li class="layui-nav-item layui-this">
	  		<a href="javascript:;"> Check the air quality of city stations </a>
	  		<dl class="layui-nav-child" style="width: 300px;">
	  		  <dd>
				  <a onclick="change_center(' Jinan City ')" style="display: inline-block;"> jinan </a> 
				  <a onclick="change_center(' Qingdao ')" style="display: inline-block;"> Qingdao </a> 
				  <a onclick="change_center(' Zibo City ')" style="display: inline-block;"> zibo </a>
				  <a onclick="change_center(' Zaozhuang City ')" style="display: inline-block;"> Zaozhuang </a>
			  </dd>
	  		  <dd>
				  <a onclick="change_center(' Dongying City ')" style="display: inline-block;"> dongying </a> 
				  <a onclick="change_center(' Yantai City ')" style="display: inline-block;"> yantai </a> 
				  <a onclick="change_center(' Weifang City ')" style="display: inline-block;"> weifang </a>
				  <a onclick="change_center(' Jining City ')" style="display: inline-block;"> Jining </a>
			  </dd>
			  <dd>
			  		<a onclick="change_center(' Tai'an City ')" style="display: inline-block;"> Taian </a> 
			  		<a onclick="change_center(' Rizhao City ')" style="display: inline-block;"> sunshine </a> 
			  		<a onclick="change_center(' Weihai City ')" style="display: inline-block;"> weihai </a>
			  		<a onclick="change_center(' Binzhou City ')" style="display: inline-block;"> Binzhou </a>
			  </dd>
			  <dd>
			  		<a onclick="change_center(' Texas City ')" style="display: inline-block;"> Texas </a> 
			  		<a onclick="change_center(' Liaocheng City ')" style="display: inline-block;"> Liaocheng </a> 
			  		<a onclick="change_center(' Linyi City ')" style="display: inline-block;"> Linyi </a>
			  		<a onclick="change_center(' Heze City ')" style="display: inline-block;"> Heze </a>
			  </dd>
	  		</dl>
	  </li>
	<li class="layui-nav-item">
			<a href="javascript:;"> Check the pollution level of the city </a>
	  		<dl class="layui-nav-child" style="width: 300px;">
	  		  <dd>
				  <a onclick="change_center(' Jinan City ')" style="display: inline-block;"> jinan </a> 
				  <a onclick="change_center(' Qingdao ')" style="display: inline-block;"> Qingdao </a> 
				  <a onclick="change_center(' Zibo City ')" style="display: inline-block;"> zibo </a>
				  <a onclick="change_center(' Zaozhuang City ')" style="display: inline-block;"> Zaozhuang </a>
			  </dd>
	  		  <dd>
				  <a onclick="change_center(' Dongying City ')" style="display: inline-block;"> dongying </a> 
				  <a onclick="change_center(' Yantai City ')" style="display: inline-block;"> yantai </a> 
				  <a onclick="change_center(' Weifang City ')" style="display: inline-block;"> weifang </a>
				  <a onclick="change_center(' Jining City ')" style="display: inline-block;"> Jining </a>
			  </dd>
			  <dd>
			  		<a onclick="change_center(' Tai'an City ')" style="display: inline-block;"> Taian </a> 
			  		<a onclick="change_center(' Rizhao City ')" style="display: inline-block;"> sunshine </a> 
			  		<a onclick="change_center(' Weihai City ')" style="display: inline-block;"> weihai </a>
			  		<a onclick="change_center(' Binzhou City ')" style="display: inline-block;"> Binzhou </a>
			  </dd>
			  <dd>
			  		<a onclick="change_center(' Texas City ')" style="display: inline-block;"> Texas </a> 
			  		<a onclick="change_center(' Liaocheng City ')" style="display: inline-block;"> Liaocheng </a> 
			  		<a onclick="change_center(' Linyi City ')" style="display: inline-block;"> Linyi </a>
			  		<a onclick="change_center(' Heze City ')" style="display: inline-block;"> Heze </a>
			  </dd>
	  		</dl>
	</li>
</ul>

Finally, click the transformation of the center point of the city map js Code .

function change_center(place) {
      
	//alert(place);
    map.centerAndZoom(place, 12);
}

原网站

版权声明
本文为[MeditationRain]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/180/202206291807386106.html