jQuery 宏

jQuery 宏

jQuery 是一个成熟和强大的 JavaScript 扩展框架，往往只需要向网页中添加一个简单的 JavaScript脚本，就可以为网页添加绚烂的特效。jQuery 宏 命令会根据不同的参数包含不同的 JavaScript 脚本到网页中。

用法：

  • <<jQuery>>

    • 会在网页中嵌入 <script type="text/javascript" src="/m/common/js/jquery.js"></script>

  • <<jQuery(extension)>>

    • 会执行名为 '<extension>' 的扩展，或者

    • 简单的包含名为 jquery_<extension>.js 脚本到页面中。

  • <<jQuery(extension, args...)>>

    • 提供使用参数 args，调用 extension.

1. jQuery(example)

该扩展简单的包含 jquery.js 和 jquery_example.js 到页面中。 凡是在 Example 样式的文字块中定义的附件或者外部图片，自动添加消隐功能

示例代码 

  • <<jQuery(example)>>

{{{#!wiki Example
 * [[attachment:jquery_example.js|Click to view code: jquery_example.js]]
 * [[attachment:no_lastchild_for_ie.png]]
 * [[http://www.ossxp.com/HelpCenter/00000_OSSXP/AboutUs_Slide?action=AttachFile&do=get&target=animate.gif|Click to display external image]]
}}}

显示效果

2. jQuery(mark)

该扩展简单的包含 jquery.js 和 jquery_mark.js 到页面中。

  • 为列表中最后一个 li 元素添加 'last-child' 样式；

  • 目的是修正 IE 无法对列表的最后一个元素进行定制的缺陷；

  • 在 "组织结构图" 等页面中，需要使用该扩展，以便在 IE 和 Firefox 中有一致的显示。

示例代码 

  • <<jQuery(mark)>>

{{{#!wiki tree
{icon:building} Company
  * {icon:person} CEO: Name of CEO
  * {icon:building} R&D Dept
    * {icon:person} CTO - Name of CTO
    * {icon:persons} Devs - Dev1, Dev2, Dev3
}}}

演示效果

  • 使用 <<jQuery(mark)>> 宏的效果：

      • {icon:building} Company

        • {icon:persion} CEO: Name of CEO

        • {icon:building} R&D Dept

          • {icon:persion} CTO - Name of CTO

          • {icon:persions} Devs - Dev1, Dev2, Dev3

  • 不使用 <<jQuery(mark)>> 宏，在 MicroSoft IE 中可能的显示效果：

    • no_lastchild_for_ie.png

3. jQuery(toggle)

参考了 jQuery plugin: Animated Collapsible DIV，增加文字块缩放的特效。

该 jQuery 插件的调用稍微复杂，需要针对每个显示区域进行设置，并设置按钮样式，因此需要多次用不同的参数调用该插件。

用法:

  • <<jQuery(toggle, set, #id|.class, fade=1,hide=1,group=demo,persist=1)>>

  • <<jQuery(toggle, show, #id|.class, type=radio|button|link, name=name, text=text)>>

  • <<jQuery(toggle, hide, #id|.class, type=radio|button|link, name=name, text=text)>>

  • <<jQuery(toggle, toggle, #id|.class, type=radio|button|link, name=name, text=text)>>

  • 其中：

    • toggle 插件的第一个参数代表动作，其余参数用于对该动作进行设定。

      • set 动作是设定显示区域的属性

      • show/hide/toggle 显示按钮。其中 show 具有显示区域功能，hide具有隐藏功能，toggle是切换显示和隐藏

    • #<id> 或者 .<class> 用于指定区域

    • name 用于设定分组

    • type 用于设定显示的按钮的样式： radio 或者按钮，或者文字链接

    • text 用于设定按钮的文字

说明:

  • 只要该插件被调用，就会一次性包含相关 JavaScript 脚本并做相应的初始化。 

    • <script type="text/javascript" src="/m/common/js/jquery_3stateradiobutton.js"></script>
<script type="text/javascript" src="/m/common/js/jquery_animatedcollapse.js"></script>
<script type="text/javascript">animatedcollapse.init();</script>

  • 调用该插件的 set 方法，设置各个显示区域的属性：相关区域的 id 或者 css_class，区域是否分组，初始是隐藏还是显示，是否需要淡入淡出效果等。 

    • <<jQuery(toggle,set,.region1,hidden=1,group=demo,fade=1)>>
<<jQuery(toggle,set,.region2,hidden=1,group=demo,fade=1)>>
<<jQuery(toggle,set,.region3,hidden=1,fade=1)>>

  • 调用该插件三个方法： show（显示区域）， hide（隐藏区域）， toggle（切换显示和隐藏状态），以显示按钮。相关的参数设置：按钮控制的区域（用相关区域的 id 或者 css_class 表示），按钮的类型（按钮或者radio），按钮文字等: 

    • <<jQuery(toggle,show,.region1,.region2,.region3,type=button,text=显示所有)>>
<<jQuery(toggle,hide,.region1,.region2,.region3,type=button,text=隐藏所有)>>
<<jQuery(toggle,toggle,.region1,type=radio,name=grp1,text=显示1)>>
<<jQuery(toggle,toggle,.region2,type=radio,name=grp1,text=显示2)>>
<<jQuery(toggle,toggle,.region3,type=button,text=显示3)>>

  • 在 Wiki 页面中定义 ID 或者 css_class 名称： 

    • {{{#!wiki region1 hidden left
~+'''文字块1'''+~
这是文字块 1 的内容...
}}}

示例代码 

  • <<jQuery(toggle)>>
<<jQuery(toggle,set,.region1,hidden=1,group=demo,fade=1)>>
<<jQuery(toggle,set,.region2,hidden=1,group=demo,fade=1)>>
<<jQuery(toggle,set,.region3,hidden=1,fade=1)>>

<<jQuery(toggle,show,.region1,.region2,.region3,type=button,text=显示所有)>>
<<jQuery(toggle,hide,.region1,.region2,.region3,type=button,text=隐藏所有)>>

<<jQuery(toggle,toggle,.region1,type=radio,name=grp1,text=显示1)>>
<<jQuery(toggle,toggle,.region2,type=radio,name=grp1,text=显示2)>>
<<jQuery(toggle,toggle,.region3,type=button,text=显示3)>>

{{{#!wiki region1 hidden left
~+'''文字块1'''+~
这是文字块 1 的内容...
}}}

{{{#!wiki region2 hidden left
~+'''文字块2'''+~
这是文字块 2 的内容...
}}}

{{{#!wiki region3 hidden left
~+'''文字块3'''+~
这是文字块 3 的内容...
}}}

演示效果

  • 显示1

    显示2

相关页面: