主题：由Venom提供的Vdrag，或如何与其方块一起玩耍！！

发布者： kris_fr于2007/7/30 22:49:42 9918次阅读
Vdrag（基于“Mor.Pho.GEN.e.sis”）是Vart的一种“变体”，但宽度限制为980px，并且没有横幅。

这个主题具有使用拖放系统（滑动、放置）来放置其块…每个页面都可以有不同的布局，并将位置记录在cookie中。

Resized Image

下载 & 演示

羡慕让你的主题做出拖放效果
网站“http://www.dhtmlgoodies.com”提供了一个简单脚本给我们：你只需要在theme.html中调用一个“js”文件（将在压缩包的“JS”文件中找到它，被命名为dragable-content.js），在<{$xoops_module_header}>顶部之间插入到<"head">和<"/head">之间。
<script type="text/javascript">
var rememberPositionedInCookie = true;
var rememberPosition_cookieName = 'dragable';
script>    
<script type="text/javascript" src="<{xoImgUrl /js/dragable-content.js}>">script>


然后你必须为每个需要移动的块创建一个新的< "div">。
“内容”元素的示例
<div class="dragableElement">
<div id="xo-content"><{$xoops_contents}>div>
div>


对于左右修改块的区域，像这样修改blockzone.hmtl
<{foreach from=$blocks item=block}>
<div class="dragableElement">
<div class="xo-block <{$block.module}>">
<{if $block.title}><div class="xo-blocktitle"><{$block.title}>div><{/if}>
<div class="xo-blockcontent"><{$block.content}>div>
div>
div>
<{/foreach}>


然后正确地调整您块的尺寸，您确保自己将在我们的主题的 block.css 的末尾找到必须通知的大小。
/* block central top and bottom */
#xo-page-topleftblocks .xo-block, #xo-page-toprightblocks .xo-block,#xo-page-bottomleftblocks .xo-block, #xo-page-bottomrightblocks .xo-block {
width: 280px;
}
/*block central */
#xo-page-topcenterblocks .xo-block, #xo-page-bottomcenterblocks .xo-block {
width: 600px;
}
/* block right */
#xo-canvas-rightcolumn .xo-block {
width: 170px;
}
/* block left */
#xo-canvas-leftcolumn .xo-block {
width: 190px;
}


这些“可拖动”的块记录在访客的计算机的 cookie 中，所有页面都可以进行不同的个性化设置。
感谢Kris_fr的调试。