教学 ♥ 显示 / 隐藏按钮 ( spoiler )
06 February 2012 @ 11:56 AM



给 W.Er 的


转帖请留言和附上链接 ♥




今天教你们怎样弄这样的按钮 , 例子 :




其实呢 这个按钮的名称是 spoiler .

它可以用在两个地方 .

第一个就是 sidebar 小工具那里 .

还有就是帖子内容里面 .

教学开始 :D




步骤 ①

放在 sidebar 小工具的方法 :

Design - Edit layout - Add a gadget( Html/Javascript )

放在帖子内容的方法 :

New post - Edit Html模式


步骤 ②

放入以下代码 :
<center><div id="spoiler">
<div>
<input value="按钮显示的字" style="width:200px;height:30px;font-size:16px;background: transparent;-moz-border-radius: 5px; border-radius: 5px;margin:13px;padding:3px;border-style: 4px solid #000000;" type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" />
<div id="show" style="display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-width:0px; padding:3px; width:90%">
按了按钮后显示的内容 .</div></div></div></center>


红色的 是按钮的宽度 .
橙色的 是按钮的高度 .
青色的 是按钮显示的字的大小 .
蓝色的 是按钮的背景 .

粉红色 highlight 的 是按钮的圆角度 ; 两个号码要一样

灰色 highlight 的 是按钮框框的粗细度 .

紫色 highlight 的 是按钮框框的种类 .

蓝色 highlight 的 是框框的颜色 .


步骤 ③

保存 Save .




任何疑问请在 tagboard 问我

在评论箱留言的请通知我你已留下评论 (:


版权所有 翻印必究. ♥