添加 网格 widget

wangzhibo

2021-11-11 c35891f1fb4876cb99b8649791fe4fa8bbafd56c

 widgetsTS/tuglie/view.html

@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -7,116 +8,124 @@
    <title>图列</title>
    <script src="../../lib/jquery/jquery-1.11.3.min.js"></script>
    <style>
        
        ul {
            list-style: none;
        }
        ul{
        display: flex;
        flex-direction: row;
        padding: 0;
        margin: 0;

        ul {
            display: flex;
            flex-direction: row;
            padding: 0;
            margin: 0;

        }

        ul li {
            width: 70px;
            height: 20px;
            color: aliceblue;
            background: rgba(32,160,255,0.3);
            background: rgba(32, 160, 255, 0.3);
            text-align: center;
            line-height: 20px;
            font-family: Arial, Helvetica, sans-serif;
            box-sizing: border-box;
            /* box-shadow: 3px 3px 3px #eee;; */
            border-right: 1px solid #f5f5f5;
            cursor:pointer
            cursor: pointer
        }
        #day04{

        #day04 {
            width: 100px;
        }

        .showTime{
        .showTime {
            width: 890px;
            height: 200px;
            /* border: 1px solid #ffff66; */
        }
        .showTime p{

        .showTime p {
            width: 100%;
            height:100%;
            height: 100%;
            margin: 0;
        }
        .navbar{

        .navbar {
            display: flex;
            flex-direction: column;
            /* align-items: center; */
            /* justify-content: center; */
        }
        .touchOn{
            background:#ff9966;

        .touchOn {
            background: #ff9966;
            /* font-size: 20px; */
            font-weight: bold;
        }
    </style>
</head>

<body>
    
  <div class="navbar">
    <ul>
        <li id="day01">国控点</li>
        <li id="day02">微站</li>
        <li id="day03">监测点</li>
        <li id="day04">道路与区域</li>
       
    </ul>
    <div class="showTime">
        <p id="content01">
            <img src="../../img/tuglie/gk_pm25.png" alt="">
            <img src="../../img/tuglie/gk_pm10.png" alt="">
            <img src="../../img/tuglie/gk_no2.png" alt="">
            <img src="../../img/tuglie/gk_co.png" alt="">
        </p>
        <p id="content02">
            <img src="../../img/tuglie/wz_pm25.png" alt="">
            <img src="../../img/tuglie/wz_pm10.png" alt="">
            <img src="../../img/tuglie/wz_no2.png" alt="">
            <img src="../../img/tuglie/wz_co.png" alt="">
        </p>
        <p id="content03">
            <img src="../../img/tuglie/jc_tsp.png" alt="">
        </p>
        <p id="content04">
            <img src="../../img/tuglie/other_pm2.5.png" alt="">
            <img src="../../img/tuglie/other_pm10.png" alt="">
            <img src="../../img/tuglie/other_no2.png" alt="">
            <img src="../../img/tuglie/other_no.png" alt="">
            <img src="../../img/tuglie/other_co.png" alt="">
            <img src="../../img/tuglie/other_nox.png" alt="">
        </p>

    <div class="navbar">
        <ul>
            <li id="day01">国控点</li>
            <li id="day02">微站</li>
            <li id="day03">监测点</li>
            <li id="day04">道路与区域</li>

        </ul>
        <div class="showTime">
            <p id="content01">
                <img src="../../img/tuglie/gk_pm25.png" alt="">
                <img src="../../img/tuglie/gk_pm10.png" alt="">
                <img src="../../img/tuglie/gk_no2.png" alt="">
                <img src="../../img/tuglie/gk_co.png" alt="">
            </p>
            <p id="content02">
                <img src="../../img/tuglie/wz_pm25.png" alt="">
                <img src="../../img/tuglie/wz_pm10.png" alt="">
                <img src="../../img/tuglie/wz_no2.png" alt="">
                <img src="../../img/tuglie/wz_co.png" alt="">
            </p>
            <p id="content03">
                <img src="../../img/tuglie/jc_tsp.png" alt="">
            </p>
            <p id="content04">
                <img src="../../img/tuglie/other_pm2.5.png" alt="">
                <img src="../../img/tuglie/other_pm10.png" alt="">
                <img src="../../img/tuglie/other_no2.png" alt="">
                <img src="../../img/tuglie/other_no.png" alt="">
                <img src="../../img/tuglie/other_co.png" alt="">
                <img src="../../img/tuglie/other_nox.png" alt="">
            </p>
        </div>
    </div>
 </div>


</body>
<script>
    var thisWidget;
    function initWidgetView(_thisWidget) {
    thisWidget = _thisWidget
        thisWidget = _thisWidget
    }

    $(function(){
    $(".showTime").find("p").hide();//先隐藏所有p元素
    $(function () {
        $(".showTime").find("p").hide();//先隐藏所有p元素
        $("#day04").click();
    })
    $("ul li").click(function () {
    if (!$(this).hasClass("touchOn")) {//$(this)表示所点击的元素，在这里极为好用
        $(this).addClass("touchOn");//给所点击元素加上touchOn类
    }
    $(this).siblings().removeClass("touchOn");//移除其他元素的touchOn类
    var id = $(this).attr('id');//获取所点击元素的id
    id = id.slice(4, 5);//获取所点击元素的id的序号，方便与下文p的id对应         
    var showId = $(".showTime").find("p").eq((id - 1)).attr('id');//因为index从0开始，这里须id-1
    showId='#'+showId;
    $(showId).show();
    $(showId).siblings().hide();//注意！！！这里不能写$("showId")
        if (!$(this).hasClass("touchOn")) {//$(this)表示所点击的元素，在这里极为好用
            $(this).addClass("touchOn");//给所点击元素加上touchOn类
        }
        $(this).siblings().removeClass("touchOn");//移除其他元素的touchOn类
        var id = $(this).attr('id');//获取所点击元素的id
        id = id.slice(4, 5);//获取所点击元素的id的序号，方便与下文p的id对应         
        var showId = $(".showTime").find("p").eq((id - 1)).attr('id');//因为index从0开始，这里须id-1
        showId = '#' + showId;
        $(showId).show();
        $(showId).siblings().hide();//注意！！！这里不能写$("showId")
    })
</script>

</html>