All gists matching topic html

timmy / 🚀 網站轉址全攻略：前後端 redirect 一次看懂！

0 polubień
0 forków
6 plików
Ostatnio aktywne 8 months ago
從 Express、Flask 到 PHP、HTML 與 JavaScript，轉址技巧一次收下！快轉跳轉不求人 ✨
backend express flask frontend html javascript php redirect web-dev
1 const express = require('express');
2 const app = express();
3
4 app.get('/oldpage', (req, res) => {
5 res.redirect('https://www.newpage.com');
6 });
7
8 app.listen(3000, () => {
9 console.log('Server is running on port 3000');
10 });

timmy / SortableJS Grid 拖曳排序

0 polubień
0 forków
1 plików
Ostatnio aktywne 9 months ago
本範例使用 SortableJS 實現 Grid 佈局的可拖放排序，允許用戶調整區塊順序，適用於 視覺化管理、儀表板排序、圖片排列與動態 UI 佈局 等應用。
dom-manipulation drag-and-drop grid-layout html javascript sortablejs ui-interaction
1 <!DOCTYPE html>
2 <html lang="zh-TW">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>SortableJS Grid 拖曳排序</title>
7 <style>
8 .grid-container {
9 display: flex;
10 flex-wrap: wrap;

timmy / SortableJS 巢狀清單拖放排序

0 polubień
0 forków
1 plików
Ostatnio aktywne 9 months ago
本範例展示如何使用 SortableJS 實現可拖放的巢狀清單，允許用戶調整層級結構與順序，適用於 層級式資料管理、分類管理、階層式 UI 排序 等應用。
dom-manipulation drag-and-drop html javascript nested-list sortablejs ui-interaction
1 <!DOCTYPE html>
2 <html lang="zh-TW">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>SortableJS 巢狀清單</title>
7 <style>
8 .nested-list {
9 list-style: none;
10 padding-left: 20px;

timmy / SortableJS 多清單拖放排序

0 polubień
0 forków
1 plików
Ostatnio aktywne 9 months ago
本範例展示如何使用 SortableJS 在多個清單之間拖放項目，允許用戶在不同分類間移動內容，適用於 任務管理、拖放式分類、視覺化數據管理 等應用。
dom-manipulation drag-and-drop html javascript multi-list sortablejs ui-interaction
1 <!DOCTYPE html>
2 <html lang="zh-TW">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>SortableJS 多清單範例</title>
7 <style>
8 .container {
9 display: flex;
10 gap: 20px;

timmy / SortableJS 進階拖放排序

0 polubień
0 forków
1 plików
Ostatnio aktywne 9 months ago
本範例展示如何使用 SortableJS 來實現可拖放排序功能，並即時顯示更新後的順序，適用於動態 UI、可視化管理、任務清單與數據重組等應用。
dom-manipulation drag-and-drop dynamic-list html javascript sortablejs ui-interaction
1 <!DOCTYPE html>
2 <html lang="zh-TW">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>SortableJS 進階範例</title>
7 <style>
8 .list {
9 list-style: none;
10 padding: 0;

timmy / SortableJS 拖放排序

0 polubień
0 forków
1 plików
Ostatnio aktywne 9 months ago
SortableJS 是一個輕量級 JavaScript 函式庫，可讓使用者透過拖放方式重新排序 HTML 清單項目，適用於動態 UI、可視化管理及交互式應用。
dom-manipulation drag-and-drop html javascript sortablejs ui-interaction
1 <!DOCTYPE html>
2 <html lang="zh-TW">
3 <head>
4 <meta charset="UTF-8">
5 <title>SortableJS 範例</title>
6 <style>
7 .list {
8 list-style-type: none;
9 padding: 0;
10 width: 200px;

timmy / Streamlit 顯示自訂物件的 HTML 表示

0 polubień
0 forków
1 plików
Ostatnio aktywne 10 months ago
此範例展示如何在 Streamlit 應用中，透過 st.write 和 unsafe_allow_html=True 來顯示自訂物件的 HTML 格式輸出，使物件能夠以自訂的 HTML 樣式呈現。
custom-object display html rendering streamlit
1 import streamlit as st
2
3 class MyObject:
4 def _repr_html_(self):
5 return "<h1 style='color:blue;'>這是一個自訂物件的 HTML 表示</h1>"
6
7 obj = MyObject()
8 st.write(obj._repr_html_(), unsafe_allow_html=True)

timmy / Streamlit 超連結

0 polubień
0 forków
1 plików
Ostatnio aktywne 10 months ago
此範例展示如何在 Streamlit 應用中使用 st.markdown 搭配 unsafe_allow_html=True 來插入 HTML 連結，使使用者能夠點擊超連結並在新視窗開啟指定網站。
html hyperlink markdown streamlit webapp
1 import streamlit as st
2
3 st.markdown(
4 '<a href="https://www.example.com" target="_blank">點擊這裡瀏覽範例網站</a>',
5 unsafe_allow_html=True
6 )

timmy / Streamlit 嵌入 HTML

0 polubień
0 forków
2 plików
Ostatnio aktywne 10 months ago
此範例展示如何在 Streamlit 應用中嵌入 HTML、CSS 和 JavaScript，允許自訂 UI 元素、樣式和互動功能，使 Web 應用更具靈活性和可視化效果。
css customization html integration javascript streamlit ui webapp
1 import streamlit as st
2
3 st.title("嵌入 HTML 的範例")
4
5 html_code = """
6 <div style="border: 2px solid #4CAF50; padding: 10px; border-radius: 5px;">
7 <h2 style="color: #4CAF50;">這是一個 HTML 區塊</h2>
8 <p>你可以在這裡嵌入 HTML, CSS, 甚至 JavaScript。</p>
9 <button onclick="alert('Hello, Streamlit!')">點擊我</button>
10 </div>

timmy / 增強版頁面內導航與動畫效果

0 polubień
0 forków
1 plików
Ostatnio aktywne 10 months ago
這是一個帶有固定導航欄的 HTML 範例，實現了頁面內導航、滾動高亮導航連結、區塊進入視窗時的動畫效果，以及返回頂部按鈕功能，並使用 JavaScript 自訂平滑滾動效果增強用戶體驗。
css html javascript navigation smooth-scroll ui-animation web-design
1 <!DOCTYPE html>
2 <html lang="zh-Hant">
3 <head>
4 <meta charset="UTF-8">
5 <title>增強版頁面內導航範例</title>
6 <style>
7 body {
8 font-family: Arial, sans-serif;
9 /* 移除 CSS 平滑滾動，使用 JavaScript 控制 */
10 margin: 0;
Nowsze Starsze

Obsługiwane przez Opengist ⋅ Load: 236ms⋅

Polski