All gists matching topic javascript

timmy / 📊 Tabulator ESM 範例：純瀏覽器也能輕鬆玩表格！

0 likes
0 forks
1 files
Last active 8 months ago
使用 ES Module 方式導入 Tabulator.js，不靠打包工具就能打造互動表格，支援排序、欄位配置，超輕巧前端神器 ✨
data-table esm frontend interactive-ui javascript tabulator vanilla-js
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>Tabulator ESM 範例</title>
7 <!-- 引入 Tabulator 的 CSS -->
8 <link href="https://unpkg.com/tabulator-tables@6.3.1/dist/css/tabulator.min.css" rel="stylesheet">
9 </head>
10 <body>

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

0 likes
0 forks
6 files
Last active 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 likes
0 forks
1 files
Last active 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 likes
0 forks
1 files
Last active 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 likes
0 forks
1 files
Last active 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 likes
0 forks
1 files
Last active 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 likes
0 forks
1 files
Last active 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 整合 Lit Web Component

0 likes
0 forks
1 files
Last active 10 months ago
此範例展示如何在 Streamlit 應用中嵌入 Lit Web Component，而不依賴 CDN。使用 Web Components 技術，可封裝自訂 UI 元件，並透過 JavaScript 互動，適用於建立模組化的前端元件，提升 Web 應用的可維護性與重用性。
frontend interactive-gui javascript lit streamlit ui-design web-component
1 import streamlit as st
2 import streamlit.components.v1 as components
3
4 st.title("使用 Lit Web Component (無 CDN)")
5
6 lit_component = """
7 <script type="module">
8 class MyLitComponent extends HTMLElement {
9 constructor() {
10 super();

timmy / Streamlit 嵌入 HTML

0 likes
0 forks
2 files
Last active 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 likes
0 forks
1 files
Last active 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;
Newer Older

Powered by Opengist ⋅ Load: 200ms⋅

English