差異處

這裏顯示兩個版本的差異處。

--- dokuwiki:syntax:popup [2016/06/13 16:46]
ghsrobert 內建註解功能的逆襲！
+++ dokuwiki:syntax:popup [2020/03/21 20:03] (目前版本)
ghsrobert [自助] 放入測試 CSS + JS 範例
@@ 行 2: / 行 2: @@
 ===== plugin =====
   * ++embedover|{{url>https://www.dokuwiki.org/plugin:embedover}}++
+  * [[doku>plugin:abbr|abbr]]\\ <abbr>TW [台灣]</abbr> <abbr>Taiwan Independence (TI)</abbr>
+  * [[doku>plugin:annotate|annotate]]\\ <anno:1>諸夏</anno> <@anno:1>東亞諸國</@anno>
+    * 預覽時似乎看不到效果
+  * [[doku>plugin:autotooltip|autotooltip]]\\ <autott><content>本週主題</content><tip>感謝　神、聖靈吧</tip><title>本週主題</title></autott>
+    * 預覽時似乎看不到效果
 ===== 試用 =====
 ==== embedover ====
@@ 行 10: / 行 14: @@
 ===== 內建註解功能 =====
-  * /^20160613^/ 剛剛逛 DokuWiki.org 時發現，內建 footnote 功能是附有 popup 的！回來測試一下，footnote 裡可以放 include 的語法，包括引用個別段落！真想不到啊……想了一個多月，沒有合用的 plugin，然後 [[slider]] 法也失敗(({{section>slider&header&footer&editbtn}}))，最後發現 footnote 功能卻可能是最接近理想的方式……
+  * /^20160613^/ 剛剛逛 DokuWiki.org 時發現，內建 footnote 功能是附有 popup 的！回來測試一下，footnote 裡可以放 include 的語法，包括引用個別段落！真想不到啊……想了一個多月，沒有合用的 plugin，然後 [[slider]] 法也失敗，最後發現 footnote 功能卻可能是最接近理想的方式……
+===== Bootstrap Wrapper =====
+/^20160615^/ 天哪！之前知道有這套 plugin，不以為意，今天才知道裡面有這個東西：++Popovers [Lotar's Wiki]|[[http://www.lotar.altervista.org/dokuwiki/wiki/plugin/bootswrapper/popover|（原文連結）]]
+{{url>http://www.lotar.altervista.org/dokuwiki/wiki/plugin/bootswrapper/popover ,700px}}++
+  * <todo #ghsrobert:2016-06-15>測試 Bootstrap Wrapper popover</todo>
+    * <popover html="true" title="**Dismissible** popover" content="And here's some amazing content. \\ **It's very engaging**. \\ Right?"><btn type="success">Dismissible Popover</btn></popover> 預覽模式中無效？← 對，要儲存出去才可以
+    * 試著 include 其他頁面時不行：<code html><popover html="true" title="**測試**引用其他頁面" content="{{page>this:changelog}}">看一下本站更新紀錄</popover></code>錯誤訊息：<code>Bootstrap Wrapper - Malformed tag (<popover html="true" title="**測試**引用其他頁面" content="{{page\>). Please check your code!</code>原因當然是因為 ''%%{{page%%**>**...}}'' 語法裡面的 ''>'' 導致 popover 的 tag 提早結束了。/-得提 bug 了-/← <wrap hi>解決了！</wrap>↓
+      * 如果把 ''>'' 用 entity 取代呢？<code html><popover html="true" title="**測試**引用其他頁面" content="{{page&gt;this:changelog}}" trigger="focus"><btn type="success">看一下本站更新紀錄</btn></popover></code><popover html="true" title="**測試**引用其他頁面" content="{{page&gt;this:changelog}}" trigger="focus"><btn type="success">看一下本站更新紀錄</btn></popover>\\ ↑可以了！我要哭了！感謝　神！<<大哭>>
+  * <todo>若能改 popover 的寬度就更好了</todo>
+    * 似乎是改 ''bootstrap.min.css'' 的 <code css>
+.popover {
+	max-width:500px;
+}
+</code>這邊
+缺點：
+  * 語法繁複麻煩
+  * DW 模板不支援 Bootstrap 時就無用武之地
+===== 自助 =====
+實在受夠 DW 欠缺一個真正的 popup plugin 了！
+用 HTML 做，也不難啊！（但看來至少一定要附 JS）
+  - ☞ [[https://www.w3schools.com/howto/howto_js_popup.asp|How To Create Popups]]
+  - 然後，透過 [[doku>plugin:inlinejs]]，把範例 HTML + CSS + JS 放到任何一個 DW 頁面上，++也能順利呈現啊！|<html>
+<div class="popup" onclick="myFunction()">khíeu
+  <span class="popuptext" id="myPopup">箍 <span class="wrap_zh">圈起來</span></span>
+</div>
+</html>
+<CSS>
+/* Popup container */
+.popup {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+}
+/* The actual popup (appears on top) */
+.popup .popuptext {
+  visibility: hidden;
+  width: 160px;
+  background-color: #555;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 8px 0;
+  position: absolute;
+  z-index: 1;
+  bottom: 125%;
+  left: 50%;
+  margin-left: -80px;
+}
+/* Popup arrow */
+.popup .popuptext::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #555 transparent transparent transparent;
+}
+/* Toggle this class when clicking on the popup container (hide and show the popup) */
+.popup .show {
+  visibility: visible;
+  -webkit-animation: fadeIn 1s;
+  animation: fadeIn 1s
+}
+/* Add animation (fade in the popup) */
+@-webkit-keyframes fadeIn {
+  from {opacity: 0;}
+  to {opacity: 1;}
+}
+@keyframes fadeIn {
+  from {opacity: 0;}
+  to {opacity:1 ;}
+}
+</CSS>
+<JS>
+// When the user clicks on <div>, open the popup
+function myFunction() {
+  var popup = document.getElementById("myPopup");
+  popup.classList.toggle("show");
+}
+</JS>++
+    * 而且我測試過了，popup 內的文字，也可以打入自訂的文字及任何 HTML 元素
+那麼，就試試把它[[..:dev:plugin:popup|做成 plugin]]，大幅簡化輸入？
+  * 當然，比較簡單的方法，似乎是把 JS 放到 conf/userscript.js 中就可以用了(([[doku>devel:javascript]]))
 {{tag>todo}}