Skip to content

Commit aefd702

Browse files
letswritetwletswritetw
committed
Demo 完成，先隱藏筆記文連結
0 parents  commit aefd702

File tree

12 files changed

+457
-0
lines changed

12 files changed

+457
-0
lines changed

‎.gitignore‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.DS_Store
2+
node_modules
3+
4+
5+
# local env files
6+
.env.local
7+
.env.*.local
8+
9+
# Log files
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
pnpm-debug.log*
14+
15+
# Editor directories and files
16+
.idea
17+
.vscode
18+
*.suo
19+
*.ntvs*
20+
*.njsproj
21+
*.sln
22+
*.sw?

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2022 Let's Write
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# 用 JavaScript 做一個 Tooltips 功能
2+
3+
Demo：[demo](https://letswritetw.github.io/letswrite-js-tooltips/)
4+
5+
<!-- 筆記文：[Let's Write](https://www.letswrite.tw/js-tooltips/) -->

‎dist/main.min.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/main.min.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/style.min.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-Hant">
3+
<head>
4+
<meta charset="UTF-8"/>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
7+
<title>用 JavaScript 做一個 Tooltips 功能 - August - Let's Write</title>
8+
<link rel="canonical" href="https://www.letswrite.tw/js-tooltips/"/>
9+
<meta property="og:url" content="https://letswritetw.github.io/letswrite-js-tooltips/"/>
10+
<meta property="fb:app_id" content="911000986339138"/>
11+
<meta property="og:type" content="website"/>
12+
<meta property="og:site_name" content="Let's Write"/>
13+
<meta property="og:title" content="用 JavaScript 做一個 Tooltips 功能 - Augustus - Let's Write"/>
14+
<meta itemprop="name" content="用 JavaScript 做一個 Tooltips 功能 - Augustus - Let's Write"/>
15+
<meta name="description" content="用 JavaScript 做一個 Tooltips 功能"/>
16+
<meta property="og:description" content="用 JavaScript 做一個 Tooltips 功能"/>
17+
<meta itemprop="description" content="用 JavaScript 做一個 Tooltips 功能"/>
18+
<meta itemprop="image" content="https://letswritetw.github.io/letswrite-js-tooltips/fb.jpg"/>
19+
<meta property="og:image" content="https://letswritetw.github.io/letswrite-js-tooltips/fb.jpg"/>
20+
<meta property="og:image:width" content="1200"/>
21+
<meta property="og:image:height" content="630"/>
22+
<meta property="og:image:alt" content="用 JavaScript 做一個 Tooltips 功能"/>
23+
<link rel="shortcut icon" href="https://letswritetw.github.io/letswritetw/dist/img/logo_512.png"/>
24+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.min.css" media="screen"/>
25+
<link rel="stylesheet" href="https://highlightjs.org/static/demo/styles/atom-one-dark.css"/>
26+
<link rel="stylesheet" href="dist/style.min.css" media="screen"/>
27+
<!-- Google Tag Manager-->
28+
<script>
29+
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
30+
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
31+
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
32+
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
33+
})(window,document,'script','dataLayer','GTM-PGQ9WQT');
34+
</script>
35+
</head>
36+
<body>
37+
<!-- Google Tag Manager (noscript)-->
38+
<noscript>
39+
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PGQ9WQT" height="0" width="0" style="display:none;visibility:hidden"></iframe>
40+
</noscript>
41+
<div class="container" id="app">
42+
<div class="text-center">
43+
<h1>用 JavaScript 做一個 Tooltips 功能</h1>
44+
</div>
45+
<hr/>
46+
<!-- install-->
47+
<h2>引用</h2>
48+
<p>下載 JavaScript 的檔案：Let's Write Tooltips</p>
49+
<p>引用方式：</p>
50+
<pre><code class="language-javascript">import { letswriteTooltips } from 'path/letswrite-tooltip.mjs';
51+
</code></pre>
52+
<hr/>
53+
<!-- demo 1-->
54+
<h2>Demo 1：基本使用，都吃預設值</h2>
55+
<pre><code class="language-html">&lt;button type="button"
56+
class="letswrite-tooltips"
57+
data-content="Tooltips 內容">&lt;/button>
58+
<br/>
59+
&lt;script>
60+
const demo1 = new letswriteTooltips();
61+
&lt;/script>
62+
</code></pre>
63+
<button class="letswrite-tooltips" type="button" data-content="Demo1：預設樣式">hover 可看到</button>
64+
<hr/>
65+
<!-- demo 2-->
66+
<h2>Demo 2：加入客製 class name</h2>
67+
<style>
68+
.letswrite-tooltips-custom {
69+
padding: .25rem;
70+
background-color: white;
71+
border: 1px solid #a1a1a1;
72+
border-radius: .25rem;
73+
color: #a1a1a1;
74+
}
75+
</style>
76+
<pre><code class="language-html">&lt;button type="button"
77+
class="letswrite-tooltips-demo2"
78+
data-content="Tooltips 內容">&lt;/button>
79+
&lt;style>
80+
.letswrite-tooltips-custom {
81+
padding: .25rem;
82+
background-color: white;
83+
border: 1px solid #a1a1a1;
84+
border-radius: .25rem;
85+
color: #a1a1a1;
86+
}
87+
&lt/style>
88+
&lt;script>
89+
const demo2 = new letswriteTooltips({
90+
el: '.letswrite-tooltips-demo2',
91+
customClass: 'letswrite-tooltips-custom'
92+
});
93+
&lt;/script></code></pre>
94+
<button class="letswrite-tooltips-demo2" type="button" data-content="Demo2：樣式不一樣">hover 可看到</button>
95+
<hr/>
96+
<!-- demo 3-->
97+
<h2>Demo 3：點擊後執行 function</h2>
98+
<pre><code class="language-html">&lt;button type="button"
99+
class="letswrite-tooltips-demo3"
100+
data-content="Tooltips 內容">&lt;/button>
101+
&lt;script>
102+
const demo3 = new letswriteTooltips({
103+
el: '.letswrite-tooltips-demo3',
104+
callback: (e) => {
105+
e.preventDefault();
106+
alert('callback')
107+
}
108+
});
109+
&lt;/script>
110+
</code></pre>
111+
<button class="letswrite-tooltips-demo3" type="button" data-content="Demo 3：點擊跳 alert">hover 可看到</button>
112+
<hr/>
113+
</div>
114+
<script src="dist/main.min.js"></script>
115+
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
116+
</body>
117+
</html>

‎index.pug‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
- var link = 'js-tooltips'
2+
- var title = '用 JavaScript 做一個 Tooltips 功能'
3+
- var description = '用 JavaScript 做一個 Tooltips 功能'
4+
5+
<!DOCTYPE html>
6+
html(lang="zh-Hant")
7+
head
8+
meta(charset="UTF-8")
9+
meta(name="viewport", content="width=device-width, initial-scale=1.0")
10+
meta(http-equiv="X-UA-Compatible", content="ie=edge")
11+
title #{title} - August - Let's Write
12+
13+
link(rel="canonical", href=`https://www.letswrite.tw/${link}/`)
14+
meta(property="og:url", content=`https://letswritetw.github.io/letswrite-${link}/`)
15+
16+
meta(property="fb:app_id", content="911000986339138")
17+
meta(property="og:type", content="website")
18+
19+
meta(property="og:site_name", content="Let's Write")
20+
meta(property="og:title", content=`${title} - Augustus - Let's Write`)
21+
meta(itemprop="name", content=`${title} - Augustus - Let's Write`)
22+
23+
meta(name="description", content=description)
24+
meta(property="og:description", content=description)
25+
meta(itemprop="description", content=description)
26+
27+
meta(itemprop="image", content=`https://letswritetw.github.io/letswrite-${link}/fb.jpg`)
28+
meta(property="og:image", content=`https://letswritetw.github.io/letswrite-${link}/fb.jpg`)
29+
meta(property="og:image:width", content="1200")
30+
meta(property="og:image:height", content="630")
31+
meta(property="og:image:alt", content=title)
32+
33+
link(rel="shortcut icon", href="https://letswritetw.github.io/letswritetw/dist/img/logo_512.png")
34+
35+
//- css
36+
link(rel="stylesheet", href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.min.css", media="screen")
37+
link(rel="stylesheet", href="https://highlightjs.org/static/demo/styles/atom-one-dark.css")
38+
link(rel="stylesheet", href="dist/style.min.css", media="screen")
39+
40+
// Google Tag Manager
41+
script.
42+
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
43+
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
44+
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
45+
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
46+
})(window,document,'script','dataLayer','GTM-PGQ9WQT');
47+
body
48+
49+
// Google Tag Manager (noscript)
50+
noscript
51+
iframe(src="https://www.googletagmanager.com/ns.html?id=GTM-PGQ9WQT", height="0", width="0", style="display:none;visibility:hidden")
52+
53+
#app.container
54+
.text-center
55+
h1=title
56+
//- p 筆記文：
57+
a(href="https://www.letswrite.tw/js-tooltip/") Let's Write
58+
59+
hr
60+
61+
// install
62+
h2 引用
63+
p 下載 JavaScript 的檔案：Let's Write Tooltips
64+
p 引用方式：
65+
pre
66+
code.language-javascript.
67+
import { letswriteTooltips } from 'path/letswrite-tooltip.mjs';
68+
69+
hr
70+
71+
// demo 1
72+
h2 Demo 1：基本使用，都吃預設值
73+
74+
pre
75+
code.language-html.
76+
&lt;button type="button"
77+
class="letswrite-tooltips"
78+
data-content="Tooltips 內容">&lt;/button>
79+
<br/>
80+
&lt;script>
81+
const demo1 = new letswriteTooltips();
82+
&lt;/script>
83+
84+
button(type="button", class="letswrite-tooltips", data-content="Demo1：預設樣式") hover 可看到
85+
86+
hr
87+
88+
// demo 2
89+
h2 Demo 2：加入客製 class name
90+
91+
style.
92+
.letswrite-tooltips-custom {
93+
padding: .25rem;
94+
background-color: white;
95+
border: 1px solid #a1a1a1;
96+
border-radius: .25rem;
97+
color: #a1a1a1;
98+
}
99+
pre
100+
code.language-html.
101+
&lt;button type="button"
102+
class="letswrite-tooltips-demo2"
103+
data-content="Tooltips 內容">&lt;/button>
104+
&lt;style>
105+
.letswrite-tooltips-custom {
106+
padding: .25rem;
107+
background-color: white;
108+
border: 1px solid #a1a1a1;
109+
border-radius: .25rem;
110+
color: #a1a1a1;
111+
}
112+
&lt/style>
113+
&lt;script>
114+
const demo2 = new letswriteTooltips({
115+
el: '.letswrite-tooltips-demo2',
116+
customClass: 'letswrite-tooltips-custom'
117+
});
118+
&lt;/script>
119+
button(type="button", class="letswrite-tooltips-demo2", data-content="Demo2：樣式不一樣") hover 可看到
120+
121+
hr
122+
123+
// demo 3
124+
h2 Demo 3：點擊後執行 function
125+
pre
126+
code.language-html.
127+
&lt;button type="button"
128+
class="letswrite-tooltips-demo3"
129+
data-content="Tooltips 內容">&lt;/button>
130+
&lt;script>
131+
const demo3 = new letswriteTooltips({
132+
el: '.letswrite-tooltips-demo3',
133+
callback: (e) => {
134+
e.preventDefault();
135+
alert('callback')
136+
}
137+
});
138+
&lt;/script>
139+
140+
button(type="button", class="letswrite-tooltips-demo3", data-content="Demo 3：點擊跳 alert") hover 可看到
141+
142+
hr
143+
144+
script(src="dist/main.min.js")
145+
script(src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js")

‎package.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"name": "letswrite-js-tooltips",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"repository": "https://github.com/letswritetw/letswrite-js-tooltip.git",
6+
"author": "Let's Write <letswritetw@gmail.com>",
7+
"license": "MIT"
8+
}

0 commit comments

Comments
 (0)