Evan's Blog: 留言/Gadget板里添加扩展标签菜单

这是我刚研究出来的新版留言/Gadget板

结合了留言/Gadget板与扩展标签菜单两项功能,

也许听起来很容易,

但若是单单普通的把这两项功能的代码写在一起是不能成功的...

但我却编写到了新的代码来把这两项功能粘合

*很有成就感啊~这新工具暂时还没有人做到,我就是研发者 =]

所以要是想转载要说声哦,

不然我就知道是你抄袭了 =]

Example:

首先Design-->Add Gadget --> HTML/JavaScript

然后在把以下代码添加进去

<head>
<script src='http://pujangga.googlecode.com/files/jquery.tools.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
});
</script>
<style>
#postit{
position:fixed; width:180px; padding:15px; background: url(图片Direct Link)top no-repeat; border: 2px solid #EAE9F7 ; -moz-border-radius: 30px 30px;
border-radius: 30px 30px;
visibility:hidden; z-index:100; cursor:hand; color: white }
-->
</style>
<div id=postit style="right: 35px; top: 65px">
<div align=right><b><a href="javascript:closeit()">[Close]</a></b></div><br />
<br />

<style type="text/css">
h5 {
font-family: trebuchet-ms, arial, tahoma;
font-size: 13px;
padding: 0 0 1em;
font-weight:bold;
color: #FFFFFF;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#000000;
Border: 1px Double #FFFFFF;
margin:2px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#000000;
}
</style>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/tabmenuaccordion.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mouseover(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>
<div class="msg_list" id="secondpane">
<h5 class="msg_head">标题1</h5>
<div class="msg_body">
<center>
标题1的内容</div>
<h5 class="msg_head">标题2</h5>
<div class="msg_body">
标题2的内容</div>
<h5 class="msg_head">标题3</h5>
<div class="msg_body">
标题3的内容</div>
</div>

<br />
<br />
</div><br />
<script type="text/javascript" language="javascript">
//Post-it only once per browser session? (0=no, 1=yes)
//Specifying 0 will cause postit to display every time page is loaded
var once_per_browser=0
///No need to edit beyond here///
var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all
if (ns4)
crossobj=document.layers.postit
else if (ie4||ns6)
crossobj=ns6? document.getElementById("postit") : document.all.postit
function closeit(){
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
crossobj.visibility="hide"
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function showornot(){
if (get_cookie('postdisplay')==''){
showit()
document.cookie="postdisplay=yes"
}
}
function showit(){
if (ie4||ns6)
crossobj.style.visibility="visible"
else if (ns4)
crossobj.visibility="show"
}
if (once_per_browser)
showornot()
else
showit()
</script>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/tabmenuaccordion.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mouseover(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>
</head>