0.0.7 • Published 6 years ago

gitbook-plugin-expand-collapse-popup-window v0.0.7

Weekly downloads
24
License
-
Repository
-
Last release
6 years ago

Add expand-collapse effect to an area of content.Show a popup window on mouseover

Preview:

npm.io

Usage:

{{ "head text" | exp_pop(level,"JS_var","popup text") }}
content to be expand-collapse
{{ ""|exp_pop_end }}

Note:Your javascript var should define in your_gitbook_dir/js/expand-collapse-popup-window.js

parameters:

  • head text : String to add effect
  • level :
    • if 0,the content to be expand-collapse is JS_var,whitch is a javascript string var
    • if 1-5,the content to be expand-collapse is content to be expand-collapse, end with {{ ""|exp_pop_end }}.The larger level ,the lighter of the font color of head text
  • JS_var : A javascript string var to be add into the html/markdown to be expand-collapse. If set with 0, there will be no content to be add.
  • popup text : Text to show in a popup window onmouseover

Examples:

  • Expand_collapse content
List of the names of students'.
{{ "Click to see details" | exp_pop(1,0,0) }}    
Tom<br>
Mike<br>
Zoey<br>
Lilei<br>
Hanmeimei<br>
Michle<br>
Tony<br>
Ryan<br>
{{ ""|exp_pop_end }}

Preview:
npm.io

  • Nesting expand_collapse content
{{ "List of the names sort by sex" | exp_pop(1,0,0) }}
<tt>
|-- {{ "boys" | exp_pop(2,0,0) }}
|....|-- Tom<br>
|....|-- Mike<br>
|....|-- Tony<br>
|....|-- Ryan<br>
|....|-- {{ "newcomer" | exp_pop(3,0,0) }}
|....|....|-- Lilei<br>
        {{ ""|exp_pop_end }}
    {{ ""|exp_pop_end }}
|-- {{ "girls" | exp_pop(2,0,0) }}
|....|-- Hanmeimei<br>
|....|-- Avel<br>
|....|-- Zoey<br>
|....|-- Lucy<br>
|....|-- Lili<br>
</tt>
    {{ ""|exp_pop_end }}
{{ ""|exp_pop_end }}

Preview:
npm.io

  • Customize content
<script>
    var my_text="Hello this is an example of customize content.<br>\
if you want to wrap ,you have to type a '<br>',and '\r\n' is no use.<br>\
Like this \r\n see, no use.";
</script>
{{ "Click here" | exp_pop(0,"my_text",0) }}

Preview:
npm.io

  • Popup window
{{ "Move cursor over here." | exp_pop(0,0,"This is a popup window on mouseover.") }}

Preview:
npm.io

  • Comprehensive example
{{ "Click to see students' details" | exp_pop(1,0,0) }}
<tt>
|-- {{ "boys" | exp_pop(2,0,0) }}
|....|-- {{ "Tom" | exp_pop(0,"Tom_info",0) }}
|....|-- Mike<br>
|....|-- Tony<br>
|....|-- Ryan<br>
|....|-- {{ "newcomer" | exp_pop(3,0,0) }}
|....|....|-- {{ "Lilei" | exp_pop(0,0,"Lilei come to our school last week.") }}
        {{ ""|exp_pop_end }}
    {{ ""|exp_pop_end }}
|-- {{ "girls" | exp_pop(2,0,0) }}
|....|-- Hanmeimei<br>
|....|-- Avel<br>
|....|-- Zoey<br>
|....|-- Lucy<br>
|....|-- Lili<br>
</tt>
    {{ ""|exp_pop_end }}
{{ ""|exp_pop_end }}

Preview
npm.io

0.0.7

6 years ago

0.0.6

6 years ago

0.0.5

6 years ago

0.0.4

6 years ago

0.0.3

6 years ago

0.0.2

6 years ago

0.0.1

6 years ago