From c35891f1fb4876cb99b8649791fe4fa8bbafd56c Mon Sep 17 00:00:00 2001
From: wangzhibo <wangzhibo@shsening.com>
Date: 星期四, 11 十一月 2021 00:52:39 +0800
Subject: [PATCH] 添加 网格 widget
---
widgetsTS/tuglie/view.html | 133 +++++++++++++++++++++++--------------------
1 files changed, 71 insertions(+), 62 deletions(-)
diff --git a/widgetsTS/tuglie/view.html b/widgetsTS/tuglie/view.html
index 7aea0a2..3d42ba4 100644
--- a/widgetsTS/tuglie/view.html
+++ b/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();//鍏堥殣钘忔墍鏈塸鍏冪礌
+ $(function () {
+ $(".showTime").find("p").hide();//鍏堥殣钘忔墍鏈塸鍏冪礌
+ $("#day04").click();
})
$("ul li").click(function () {
- if (!$(this).hasClass("touchOn")) {//$(this)琛ㄧず鎵�鐐瑰嚮鐨勫厓绱狅紝鍦ㄨ繖閲屾瀬涓哄ソ鐢�
- $(this).addClass("touchOn");//缁欐墍鐐瑰嚮鍏冪礌鍔犱笂touchOn绫�
- }
- $(this).siblings().removeClass("touchOn");//绉婚櫎鍏朵粬鍏冪礌鐨則ouchOn绫�
- var id = $(this).attr('id');//鑾峰彇鎵�鐐瑰嚮鍏冪礌鐨刬d
- id = id.slice(4, 5);//鑾峰彇鎵�鐐瑰嚮鍏冪礌鐨刬d鐨勫簭鍙凤紝鏂逛究涓庝笅鏂噋鐨刬d瀵瑰簲
- var showId = $(".showTime").find("p").eq((id - 1)).attr('id');//鍥犱负index浠�0寮�濮嬶紝杩欓噷椤籭d-1
- showId='#'+showId;
- $(showId).show();
- $(showId).siblings().hide();//娉ㄦ剰锛侊紒锛佽繖閲屼笉鑳藉啓$("showId")
+ if (!$(this).hasClass("touchOn")) {//$(this)琛ㄧず鎵�鐐瑰嚮鐨勫厓绱狅紝鍦ㄨ繖閲屾瀬涓哄ソ鐢�
+ $(this).addClass("touchOn");//缁欐墍鐐瑰嚮鍏冪礌鍔犱笂touchOn绫�
+ }
+ $(this).siblings().removeClass("touchOn");//绉婚櫎鍏朵粬鍏冪礌鐨則ouchOn绫�
+ var id = $(this).attr('id');//鑾峰彇鎵�鐐瑰嚮鍏冪礌鐨刬d
+ id = id.slice(4, 5);//鑾峰彇鎵�鐐瑰嚮鍏冪礌鐨刬d鐨勫簭鍙凤紝鏂逛究涓庝笅鏂噋鐨刬d瀵瑰簲
+ var showId = $(".showTime").find("p").eq((id - 1)).attr('id');//鍥犱负index浠�0寮�濮嬶紝杩欓噷椤籭d-1
+ showId = '#' + showId;
+ $(showId).show();
+ $(showId).siblings().hide();//娉ㄦ剰锛侊紒锛佽繖閲屼笉鑳藉啓$("showId")
})
</script>
+
</html>
\ No newline at end of file
--
Gitblit v1.9.1