免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

标题: 首页N格免安装、不调用flash版 [打印本页]
作者: flashroad    时间: 2018-8-31 13:52     标题: 首页N格免安装、不调用flash版

【版权】
http://icode.258club.com/thread-46-1-1.html

【说明】
sclub官方提供了 首页N格(缓存版) 的安装和使用，你必须去sclub后台【注意：不是discuz后台】申请安装该插件，然后经过超长时间的等待，才可以在discuz后台【就是我们经常说的后台】配置使用。

本教程就是免除插件安装的，直接按照下面的步骤做，就可以轻松搞定了。
本N格只是将 缓存版的 flash调用图片轮播进行了替换，不需要使用flash，如此一来，在手机端也可以看到图片轮播了
作者: flashroad    时间: 2018-8-31 13:57     标题: 一、导入数据调用文件

[attach]1147[/attach]

将这个xml格式的附件下载，然后进入自己论坛的后台，依次单击：

工具>数据调用>导入

将这个xml文件导入即可
作者: flashroad    时间: 2018-8-31 13:59     标题: 二、新建i_js1模板

  1. /*
  2. 常用页面效果,基于jquery,所有obj对象可用jquery选择器
  3. Author: cosa
  4. Creation Date: 2008-12-23
  5. Updated Date:  2009-1-7
  6. */
  7. /*
  8. ==slightbox==
  9. 属性{对象|关闭对象|不透明度[为0时不显示背景]|关闭延迟}
  10. */
  11. function slightbox(obj,oclose,opacity,ctime){       
  12.         var _this = this;
  13.         _this.d = jQuery(obj);
  14.         var mkdiv

  16.         _this.cenvelop = function(){       
  17.                 if(opacity){
  18.                         mkdiv = document.createElement("div");
  19.                         jQuery(mkdiv).css({position:"absolute",zIndex:"9998",left:"0",top:"0",right:"0",width:"100%",background:"#000000"});
  20.                         jQuery("body").append(jQuery(mkdiv));
  21.                         jQuery(mkdiv).css("opacity",opacity);
  22.                 }
  23.                 _this._resize();
  24.         }
  25.        
  26.         _this._resize = function(){
  27.                 jQuery(mkdiv).css("height",Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight) + "px");
  28.                 jQuery(mkdiv).css("width",document.documentElement.clientWidth + "px");
  29.                 var _x = Math.round((document.documentElement.clientWidth-this.d.width())/2);
  30.                 var _y = Math.round((document.documentElement.clientHeight-this.d.height())/2);
  31.                 _this.d.css({"position":"absolute","zIndex":"9999","left":_x+"px","top":_y+"px"});
  32.         }
  33.        
  34.         _this.closed = function(){
  35.                 jQuery(mkdiv).remove();
  36.                 _this.d.remove();
  37.                 return false;
  38.         }
  39.        
  40.         var sctop = 0;
  41.        
  42.         jQuery(window).resize(function(){
  43.                 _this._resize();
  44.         });
  45.        
  46.         var top = (document.documentElement.clientHeight-this.d.height())/2;
  47.        
  48.         jQuery(window).scroll(function(){
  49.                 jQuery(obj).css("top",document.documentElement.scrollTop - sctop + top + "px");       
  50.                 sctop = document.documentElement.scrollTop;
  51.                 top = parseInt(jQuery(obj).css("top"));
  52.         });
  53.        
  54.         if(ctime){
  55.                 setTimeout(_this.closed, ctime)       
  56.         }
  57.        
  58.         jQuery(oclose).click(function(){_this.closed();})
  59.        
  60.         _this.cenvelop();
  61. }
  62. /*

  64. /*
  65. ==轮播{对象|对象属性}==
  66. 对象属性{宽度|高度|文字大小|自动切换时间}
  67. */
  68. function dk_slideplayer(object,config){
  69.         this.obj = object;
  70.         this.config = config ? config : {width:"300px",height:"200px",fontsize:"12px",right:"10px",bottom:"10px",time:"5000"};
  71.         this.pause = false;
  72.         var _this = this;
  73.         if(!this.config.right){
  74.                 this.config.right = "0px"
  75.         }
  76.         if(!this.config.bottom){
  77.                 this.config.bottom = "1px"
  78.         }
  79.         if(this.config.fontsize == "12px" || !this.config.fontsize){
  80.                 this.size = "12px";
  81.                 this.height = "21px";
  82.                 this.right = "6px";
  83.                 this.bottom = "10px";
  84.         }else if(this.config.fontsize == "14px"){
  85.                 this.size = "14px";
  86.                 this.height = "50px";
  87.                 this.right = "6px";
  88.                 this.bottom = "15px";
  89.         }
  90.         this.count = jQuery(this.obj + " li").size();
  91.         this.n =0;
  92.         this.j =0;
  93.         var t;
  94.         this.factory = function(){
  95.                 jQuery(this.obj).css({position:"relative",zIndex:"0",margin:"0",padding:"0",width:this.config.width,height:this.config.height,overflow:"hidden"})
  96.                 jQuery(this.obj).prepend("<div style='position:absolute;z-index:20;right:"+this.config.right+";bottom:"+this.config.bottom+"'></div>");
  97.                 jQuery(this.obj + " li").css({width:"100%",height:"100%",overflow:"hidden"}).each(function(i){jQuery(_this.obj + " div").append("<a>"+(i+1)+"</a>")});

  99.                 jQuery(this.obj + " img").css({border:"none",width:"100%",height:"100%"})

  101.                 this.resetclass(this.obj + " div a",0);

  103.                 jQuery(this.obj + " p").each(function(i){                       
  104.                         jQuery(this).parent().append(jQuery(this).clone(true));
  105.                         jQuery(this).html("");
  106.                         jQuery(this).css({position:"absolute",margin:"0",padding:"0",zIndex:"1",top:"0",left:"0",height:_this.height,width:"100%",background:"#0080FF",opacity:"0.4",overflow:"hidden"})
  107.                         jQuery(this).next().css({position:"absolute",margin:"0",padding:"0",zIndex:"2",top:"0",left:"0",height:_this.height,lineHeight:_this.height,textIndent:"5px",width:"100%",textDecoration:"none",fontSize:_this.size,color:"#FFFFFF",background:"none",zIndex:"1",opacity:"1",overflow:"hidden"})
  108.                         if(i!= 0){jQuery(this).hide().next().hide()}
  109.                 });

  111.                 this.slide();
  112.                 this.addhover();
  113.                 t = setInterval(this.autoplay,this.config.time);
  114.         }
  115.        
  116.         this.slide = function(){
  117.                 jQuery(this.obj + " div a").mouseover(function(){
  118.                         _this.j = jQuery(this).text() - 1;
  119.                         _this.n = _this.j;
  120.                         if (_this.j >= _this.count){return;}
  121.                         jQuery(_this.obj + " li").hide();
  122.                         jQuery(_this.obj + " p").hide();
  123.                         jQuery(_this.obj + " li").eq(_this.j).fadeIn("slow");
  124.                         jQuery(_this.obj + " li").eq(_this.j).find("p").show();
  125.                         _this.resetclass(_this.obj + " div a",_this.j);
  126.                 });
  127.         }

  129.         this.addhover = function(){
  130.                 jQuery(this.obj).hover(function(){clearInterval(t);}, function(){t = setInterval(_this.autoplay,_this.config.time)});
  131.         }
  132.        
  133.         this.autoplay = function(){
  134.                 _this.n = _this.n >= (_this.count - 1) ? 0 : ++_this.n;
  135.                 jQuery(_this.obj + " div a").eq(_this.n).trigger('mouseover');
  136.         }
  137.        
  138.         this.resetclass =function(obj,i){
  139.                 jQuery(obj).css({float:"left",marginRight:"1px",width:"22px",height:"15px",lineHeight:"15px",textAlign:"center",fontWeight:"800",fontSize:"12px",color:"#FFFFFF",background:"#999",cursor:"pointer",opacity:"0.8"});
  140.                 jQuery(obj).eq(i).css({color:"#FFFFFF",background:"#0080FF",textDecoration:"none",width:"32px"});
  141.         }

  143.         this.factory();
  144. }
  145. /*
  146. 选项卡|显示隐藏层
  147. 选项卡属性设置: {mobj:"#m1",mchild:"li",mclass:"tds",eobj:"#m2",echild:"div",first:"1"};
  148.               mobj: 触发鼠标事件
  149. */
  150. function optioncard(config){
  151.         this.config         = config;
  152.         var _this = this;
  153.        
  154.         this.resetall = function(i){
  155.                 if(!this.config.mchild && !this.config.echild){
  156.                         if(i==0){
  157.                                 jQuery(_this.config.mobj).removeClass(_this.config.mclass);
  158.                                 jQuery(_this.config.eobj).hide();
  159.                                 return;
  160.                         }
  161.                         if(i==1){
  162.                                 jQuery(_this.config.mobj).addClass(_this.config.mclass);
  163.                                 jQuery(_this.config.eobj).show();
  164.                                 return;
  165.                         }
  166.                 }else{
  167.                         jQuery(this.config.mobj).find(this.config.mchild).removeClass(this.config.mclass);
  168.                         jQuery(this.config.eobj).find(this.config.echild).hide();
  169.                         jQuery(this.config.mobj).find(this.config.mchild).eq(i).addClass(this.config.mclass);
  170.                         jQuery(this.config.eobj).find(this.config.echild).hide().eq(i).show();
  171.                 }
  172.         }

  174.         if(this.config.mchild && this.config.echild){
  175.                 if(!this.config.first) this.config.first = 1;
  176.                 this.resetall(this.config.first-1);
  177.                 jQuery(this.config.mobj).find(this.config.mchild).each(function(i){
  178.                         jQuery(this).mouseover(function(){
  179.                                 _this.resetall(i);
  180.                         })       
  181.                 })
  182.         }else{
  183.                 jQuery(this.config.mobj).hover(function(){_this.resetall(1)},function(){_this.resetall(0)});
  184.                 jQuery(this.config.eobj).hover(function(){_this.resetall(1)},function(){_this.resetall(0)});
  185.         }       
  186. }
复制
作者: flashroad    时间: 2018-8-31 14:07     标题: 三、新建jq库

这里，你有两种选择，请任选其一。不要同时都选择！

选择一：
已经在自己的论坛内安装了jq库的朋友，请无视本楼
===================================================
选择二：
没有安装过jq库的朋友，你有两种选择【请单选，不要两个都选】：
【1】建议你安装jq库，因为这个东西需要经常使用:，打开下帖安装即可：
http://flashroad.joinbbs.net/thread-970-1-1.html
注意，只看上贴的2楼！ 3楼不用管【除非你需要用章鱼之家的jq库，那就只看3楼，不要看2楼】
`````````````````````````````````````````````
【2】如果你不想安装jq库，请新建一个i_js2的模板，内容就是jq库的所有代码，你可以打开这个网址：
http://flashroad.joinbbs.net/templates/default/jquery.htm
将里面的所有代码复制、粘贴到这个i_js2的模板内即可
作者: flashroad    时间: 2018-8-31 14:08     标题: 四、新建i_xshow 模板

说明，这个新建的模板内需要添加下面的内容
代码中的2、3两行，需要将default修改为自己风格对应的名字
第3行中的templates/default/i_js2.htm就是楼上的jq库。 如果你安装了jq库，请去掉整个第3行
  1. <script type="text/javascript" src="images/xshow/title.js"></script>
  2. <script type="text/javascript" src="templates/default/i_js1.htm" ></script>
  3. <script type="text/javascript" src="templates/default/i_js2.htm" ></script>

  5. <style type="text/css">
  6. .xshow{width:99.9%;margin:0 auto 4px;padding:5px 0 2px 0;background:{WRAPBG};border:{WRAPBORDER} solid {WRAPBORDERCOLOR};}
  7. .xshow table {background:{WRAPBG};text-align:left;border:none;}
  8. .xshow .header td{text-align:center;height:31px;border-bottom:3px solid {COMMONBORDER};}
  9. .xshow .border{border-right:1px solid {COMMONBORDER};}
  10. .xshow .txt_con td{padding:5px;}
  11. .xshow .txt td{padding:0;vertical-align:top;}
  12. .xshow .txt div{width:100%;height:20px;background:url('images/xshow/listbg.gif') repeat-x;overflow:hidden;}
  13. .xshow .txt span{float:right;}
  14. .xshow .fiveline{border-top:1px solid {COMMONBORDER};padding: 0 5px;}
  15. .xshow .fiveline img{width:48px;heigth:48px;margin:2px 8px 0 0;border:1px solid {COMMONBORDER};}
  16. .xshow li {list-style: none;}
  17. </style>

  19. <div class="xshow">
  20.   <table cellspacing="0" cellpadding="0" width="99%" align="center">
  21.      <tr class="header">
  22.       <td class="border"><h3>精彩图片</h3></td>
  23.       <td class="border"><h3>最新帖子</h3></td>
  24.       <td class="border"><h3>最新回复</h3></td>
  25.       <td class="border"><h3>精华帖子</h3></td>
  26.       <td><h3>会员排行</h3></td>
  27.     </tr>
  28.     <tr class="txt_con">
  29. <td width="28%" class="border">
  30. <div class="tlb-disma" id="tbca_01">
  31. {eval request('仿火狼_精彩图片');}
  32. <script type="text/javascript">new dk_slideplayer("#tbca_01",{width:"100%",height:"213px",fontsize:"12px",time:"5000"});</script>
  33. </div>
  34. </td>
  35. <td width="20%" class="border">
  36.         <table cellpadding="0" cellspacing="0" class="txt">
  37.           <tr>
  38.             <td><img src="images/xshow/list.gif" alt="" /></td>
  39.             <td width="100%">
  40. {eval request('i_最新主题');}
  41.             </td>
  42.           </tr>
  43.         </table>
  44.       </td>
  45. <td width="20%" class="border">
  46.         <table cellpadding="0" cellspacing="0" class="txt">
  47.           <tr>
  48.             <td><img src="images/xshow/list.gif" alt="" /></td>
  49.             <td width="100%">
  50. {eval request('i_最新回复');}
  51.             </td>
  52.           </tr>
  53.         </table>
  54.       </td>
  55. <td width="20%" class="border">
  56.         <table cellpadding="0" cellspacing="0" class="txt">
  57.           <tr>
  58.             <td><img src="images/xshow/list.gif" alt="" /></td>
  59.             <td width="100%">
  60. {eval request('i_精华帖子');}
  61.             </td>
  62.           </tr>
  63.         </table>
  64.       </td>
  65.       <td>
  66.         <table cellpadding="0" cellspacing="0" class="txt">
  67.           <tr>
  68.             <td><img src="images/xshow/list.gif" alt="" /></td>
  69.             <td width="100%">
  70. {eval request('i_金币飙升榜');}
  71.             </td>
  72.           </tr>
  73.         </table>
  74.       </td>
  75.     </tr>
  76.   </table>
  77. {eval request('i_新会员');}
  78. </div>
复制
作者: flashroad    时间: 2018-8-31 14:15     标题: 五、修改discuz模版

找到
$pluginhooks[index_header]

在它的下边加
{template i_xshow}

就可以了！


【特别说明】如果你之前安装并使用了sclub官方提供的 首页N格(缓存版) ，填上上面的代码后，就会出现两个N格，此时需要先去掉首页N格(缓存版)
方法是：还是在discuz模版 找到并删除{template xshow}即可
作者: flashroad    时间: 2018-8-31 14:19     标题: 补充说明

如果想自定义显示的版块，请至后台

工具>数据调用>[i]
发现有如下5个项目：

新会员       
最新主题       
最新回复       
精华帖子       
金币飙升榜

点击某一个项目右边的“编辑”
就可以设置了
进入编辑后，你可以设置调用的版块 等信息，非常方便



欢迎光临 flash之路-flash技术交流 (http://flashroad.joinbbs.net/) Powered by Discuz! 7.2