标签: 〖插件〗


TiddlyWiki 隐藏/显示右边栏的插件

原文:http://tw.lewcid.org/#ToggleSideBarMacro

描述:

提供了一个侧栏切换能见度按钮。您可以选择初始时侧栏是隐藏还是显示。

用法:

<<toggleSideBar>> »

带参数的调用:

<<toggleSideBar label tooltip show/hide>>

其中:
label         =按钮的自定义标签,
tooltip       =自定义的按钮提示,
show/hide =使用其中一个,决定工具栏初始时是显示还是隐藏(默认是显示侧栏)。

此按钮您可以添加到您的 tiddler 工具栏中,您的主菜单中,或者您喜欢的任何地方。

如果您使用的是横向主菜单按钮,并希望右对齐,请在您的样式表中加如下内容:

.HideSideBarButton {float:right;}

代码:

/***

|Name|ToggleSideBarMacro|
|Created by|SaqImtiaz|
|Location|http://tw.lewcid.org/#ToggleSideBarMacro|
|Version|1.0|
|Requires|~TW2.x|
!Description:
Provides a button for toggling visibility of the SideBar. You can choose whether the SideBar should initially be hidden or displayed.

!Demo
<<toggleSideBar "Toggle Sidebar">>

!Usage:
{{{<<toggleSideBar>>}}} <<toggleSideBar>>
additional options:
{{{<<toggleSideBar label tooltip show/hide>>}}} where:
label = custom label for the button,
tooltip = custom tooltip for the button,
show/hide = use one or the other, determines whether the sidebar is shown at first or not.
(default is to show the sidebar)

You can add it to your tiddler toolbar, your MainMenu, or where you like really.
If you are using a horizontal MainMenu and want the button to be right aligned, put the following in your StyleSheet:
{{{ .HideSideBarButton {float:right;} }}}

!History
*23-07-06: version 1.0: completely rewritten, now works with custom stylesheets too, and easier to customize start behaviour.
*20-07-06: version 0.11
*27-04-06: version 0.1: working.

!Code
***/
//{{{
config.macros.toggleSideBar={};

config.macros.toggleSideBar.settings={
         styleHide :  "#sidebar { display: none;}\n"+"#contentWrapper #displayArea { margin-right: 1em;}\n"+"",
         styleShow : " ",
         arrow1: "«",
         arrow2: "»"
};

config.macros.toggleSideBar.handler=function (place,macroName,params,wikifier,paramString,tiddler)
{
          var tooltip= params[1]||’toggle sidebar’;
          var mode = (params[2] && params[2]=="hide")? "hide":"show";
          var arrow = (mode == "hide")? this.settings.arrow1:this.settings.arrow2;
          var label= (params[0]&&params[0]!=’.')?params[0]+" "+arrow:arrow;
          var theBtn = createTiddlyButton(place,label,tooltip,this.onToggleSideBar,"button HideSideBarButton");
          if (mode == "hide")
             {
             (document.getElementById("sidebar")).setAttribute("toggle","hide");
              setStylesheet(this.settings.styleHide,"ToggleSideBarStyles");
             }
};

config.macros.toggleSideBar.onToggleSideBar = function(){
          var sidebar = document.getElementById("sidebar");
          var settings = config.macros.toggleSideBar.settings;
          if (sidebar.getAttribute("toggle")==’hide’)
             {
              setStylesheet(settings.styleShow,"ToggleSideBarStyles");
              sidebar.setAttribute("toggle","show");
              this.firstChild.data= (this.firstChild.data).replace(settings.arrow1,settings.arrow2);
              }
          else
              {   
               setStylesheet(settings.styleHide,"ToggleSideBarStyles");
               sidebar.setAttribute("toggle","hide");
               this.firstChild.data= (this.firstChild.data).replace(settings.arrow2,settings.arrow1);
              }

     return false;
}

setStylesheet(".HideSideBarButton .button {font-weight:bold; padding: 0 5px;}\n","ToggleSideBarButtonStyles");

//}}}

怎样安装此:

简单,只需要在自己的 TiddlyWiki 中增加一篇文章,

标题是:ToggleSideBarMacro
内容是:上面的代码
标签是:systemConfig lewcidExtension

然后保存 TiddlyWiki ,刷新页面。

调用就是在您喜欢的位置加上“用法”一节提到的宏调用语句。

发表评论

试用谷歌友链(Google Friend Connect )过程截图

地址是这里:

http://www.google.com/friendconnect/admin/site/setup?hl=en_US

关键的四个步骤:加两个必须的文件到你服务器 > 拷贝“members gadget”代码 > 粘贴到你网站页面 > 选择更多喜欢的交际组件。

clip_image002

1. 填写网站名字和网址

clip_image004

2. 下载这两个文件并上传到网站根目录

clip_image006

3. 检测一下网址和要上传的文件是否弄妥

clip_image008

4. 将会员工具的代码粘贴到网站任意页面,使访问者可以籍此登录你的网站,一旦这个工具加上后,还可以选择更多其他社交工具。

clip_image010

5. 定制一下界面(宽窄、颜色、行数),把代码复制下来粘贴到合适的网页。

clip_image012

代码大概是这样:

<!– Include the Google Friend Connect javascript library. –>

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>

<!– Define the div tag where the gadget will be inserted. –>

<div id="div-75122463568332015" style="width:280px;border:1px solid #999999;"></div>

<!– Render the gadget into a div. –>

<script type="text/javascript">

var skin = {};

skin['BORDER_COLOR'] = ‘#999999′;

skin['ENDCAP_BG_COLOR'] = ‘#cc9933′;

skin['ENDCAP_TEXT_COLOR'] = ‘#ffffff’;

skin['ENDCAP_LINK_COLOR'] = ‘#ffff33′;

skin['ALTERNATE_BG_COLOR'] = ‘#ffffff’;

skin['CONTENT_BG_COLOR'] = ‘#ffffff’;

skin['CONTENT_LINK_COLOR'] = ‘#999900′;

skin['CONTENT_TEXT_COLOR'] = ‘#333333′;

skin['CONTENT_SECONDARY_LINK_COLOR'] = ‘#7777cc’;

skin['CONTENT_SECONDARY_TEXT_COLOR'] = ‘#666666′;

skin['CONTENT_HEADLINE_COLOR'] = ‘#333333′;

skin['NUMBER_ROWS'] = ‘4′;

google.friendconnect.container.setParentUrl(’/’ /* location of rpc_relay.html and canvas.html */);

google.friendconnect.container.renderMembersGadget(

{ id: ‘div-75122463568332015’,

site: ‘66580134565482603510′ },

skin);

</script>

将此代码放在合适的网页,将其中<div id="div-75122463568332015" style="width:280px;border:1px solid #999999;"></div>移放在的合适位置即可。

————–

作为初学,我这种方法肯定是最笨拙的,仅作学习记录,这里有个Google Friend Connect 的 WP 插件,看起来不错,有兴趣可学习下:

google-friend-connect-pluginsGoogle Friend Connect integration with Wordpress, Drupal and PHPBB

发表评论