dokuwiki:syntax:popup

差異處

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

連向這個比對檢視

Both sides previous revision 前次修改
下次修改 		前次修改
dokuwiki:syntax:popup [2016/05/31 23:27]
ghsrobert 開始試用 		dokuwiki:syntax:popup [2020/03/21 20:03] (目前版本)
ghsrobert [自助] 放入測試 CSS + JS 範例
行 2: 行 2:
 ===== plugin ===== ===== plugin =====
   * ++embedover|{{url>https://www.dokuwiki.org/plugin:embedover}}++   * ++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 ==== ==== embedover ====
 {(按|出來)} {(按|出來)}
 +
 +↑誤會了。這並不是我想要的。
 +
 +===== 內建註解功能 =====
 +  * /^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()">khí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}}
  • 上一次變更: 2016/05/31 23:27
  • 由 ghsrobert