账号通
    

账号  

密码  

55130

查看

70

回复
主题:【2013】孤风大虾又回来了,好事成双,带来超炫SQL导航标签教程★★★ [收藏主题] 本贴被认定为精华 转到:  
孤风大虾 当前离线

1700

主题

7

广播

118

粉丝
添加关注
级别:高一年

用户积分:10218 分
登录次数:451 次
注册时间:2006/3/28
最后登录:2022/3/10
孤风大虾 发表于:2013/11/4 21:43:22   | 只看该作者 查看该作者主题 楼主 
科汛在线商城系统(NET)

首先看演示图(帖子编辑完成了,版主想插就随便插啊~哥闪先!~)

点击查看原图


好不好,先看图。但是看图是不够的。

以下内容只有回复后才可以浏览,请先登录!

可又但是,这是客户站点,我就不随意公开了。放出演示站,大家看下


http://www.xfsbuy.com/


这个站不是我做的,是客户让抄袭的站点。大家可以看下效果。我要做的效果和他类似。


超牛逼SQL大循环教程,请看http://bbs.kesion.com/forumthread-1126361.html

 
孤风自己开发了一套CMS系统,博采科讯的长处,去除了无关的功能,有兴趣的百度 FengCms
  支持(1) | 反对(0) 回到顶部顶端 回到底部底部
孤风大虾 当前离线

1700

主题

7

广播

118

粉丝
添加关注
级别:高一年

用户积分:10218 分
登录次数:451 次
注册时间:2006/3/28
最后登录:2022/3/10
孤风大虾 发表于:2013/11/4 21:48:34   | 只看该作者 查看该作者主题 沙发 
科汛智能建站系统

遇到困难,不要害怕,我们认真的分析,一定能给出解决方案。

配套JS以及CSS,不是我要讲的重点。

首先,调用JQ库。这个是原站的JQ。应该1.X版本的JQ库都可以的。抄袭了人家的东西,给人家做个外链吧。攒人品嘛!

http://www.xfsbuy.com/js/jquery.js

然后是控制JS

  1. function addClrCSS(id, c) { $(id).hover(function() { $(this).addClass(c); }, function() { $(this).removeClass(c); });}


自己复制新建一个JS文件,然后调用进去即可。

 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
孤风大虾 当前离线

1700

主题

7

广播

118

粉丝
添加关注
级别:高一年

用户积分:10218 分
登录次数:451 次
注册时间:2006/3/28
最后登录:2022/3/10
孤风大虾 发表于:2013/11/4 21:51:39   | 只看该作者 查看该作者主题 藤椅 
科汛智能建站系统

JS调用好了,我们来调用CSS代码。同样,我不过多解释。

  1. #pro_nav{width: 208px;float: left;border: 1px solid #d0d0d0; background: #f2f2f2;padding:9px 0; position:relative;}

  2.   #pro_nav h3 {height: 30px;line-height: 30px;background:url(/image/bar_nav_line.png) no-repeat center bottom;}
  3.    #pro_nav h3 a {display: block;font-size: 14px;background:url(/image/bar_nav_do.png) no-repeat 10px center;text-indent: 20px;color: #000;}
  4.    #pro_nav .i-mc {  display: none; position: absolute; left: 208px;  top:0;width: 730px; min-height: 568px; border: 1px solid #d0d0d0; _height: 568px;
  5.        background: #fff;padding: 10px;z-index:99999;
  6.        }
  7.    #pro_nav .hover h3 {background: #d0d0d0;}
  8.    #pro_nav .hover .i-mc {display: block;z-index:99999;}
  9.     #pro_nav dl {width: 730px;overflow: hidden;clear: both; border-top: 1px dotted #E1E49F;}
  10.     #pro_nav .first {border-top: none}
  11.      #pro_nav dl dt {width: 70px;float: left;text-align:right; border-right: 1px;line-height: 2;color:#f60;padding:0 10px 0 0;}
  12.       #pro_nav dl dt a {color: #f60;font-weight: bold;}
  13.      #pro_nav dl dd {width: 650px;float: left;zoom: 1; }
  14.       #pro_nav dl dd a {white-space: nowrap;float: left; height: 14px;margin: 4px 0; line-height: 14px; padding: 0 8px;border-left: 1px solid #eee; }



其实这段CSS还是很简单的。你直接在这里看不懂是正常的,复制到Dreamweaver里,立马就看懂了。



好了,配套做好了之后,我们切如正题。



首先,我们要分析一下效果,其实可以分为三个区域

1、一级栏目循环。

2、二级栏目循环。

3、三级栏目循环。

你看,这个分析多么的简单明了,我真佩服自己能写出这种废话。

 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
孤风大虾 当前离线

1700

主题

7

广播

118

粉丝
添加关注
级别:高一年

用户积分:10218 分
登录次数:451 次
注册时间:2006/3/28
最后登录:2022/3/10
孤风大虾 发表于:2013/11/4 21:55:38   | 只看该作者 查看该作者主题 板凳 
科汛在线商城系统(NET)

首先,制作“一级栏目”的SQL标签。



新建SQL标签,命名为“一级栏目”,



查询代码如下:



  1. SELECT TOP 50 ID,FolderName,TS,TN FROM KS_Class Where  tj=2 ORDER BY root,FolderOrder



因为我是把所有的分类都放在一个叫“产品展示”的栏目下面。所以这里TJ是2而不是1。



循环语句如下:



  1. <div id="pro_nav">

  2. [loop=50]

  3.   <div class="item">
  4.    <h3><a href="{$Field(ID,GetInfoUrl,100,1)}">{$Field(FolderName,Text,0,...,0,)}</a></h3>
  5.    {SQL_二级栏目({$Field(ID,Text,0,...,0,)})}
  6.   </div>
  7. [/loop]

  8. </div>

非常简单的循环代码。我们在这里面要循环“二级栏目”的SQL标签。我们接着制作吧!

 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
孤风大虾 当前离线

1700

主题

7

广播

118

粉丝
添加关注
级别:高一年

用户积分:10218 分
登录次数:451 次
注册时间:2006/3/28
最后登录:2022/3/10
孤风大虾 发表于:2013/11/4 21:59:41   | 只看该作者 查看该作者主题 报纸 
科汛智能建站系统

我们接着制作“二级栏目”标签!



查询语句:



  1. SELECT TOP 30 ID,FolderName,TN FROM KS_Class Where TN='{$Param(0)}' ORDER BY Root,FolderOrder



没什么特殊的,我们用到了 TN='{$Param(0)}' 这个万能膏药。呵呵。



循环语句:



  1. <div class="i-mc"><div class="subitem">

  2. [loop=1]<dl class="first"><dt><a href="{$Field(ID,GetInfoUrl,100,1)}">{$Field(FolderName,Text,0,...,0,)}</a></dt>
  3. {SQL_三级栏目({$Field(ID,Text,0,...,0,)})}
  4. </dl>[/loop]
  5. [loop=29]<dl><dt><a href="{$Field(ID,GetInfoUrl,100,1)}">{$Field(FolderName,Text,0,...,0,)}</a></dt>
  6. {SQL_三级栏目({$Field(ID,Text,0,...,0,)})}
  7. </dl>[/loop]
  8. </div></div>



因为第一个循环需要加上“ class="first"”这个样式,所以我单拉出来循环了一下。其实是可以用IF判断来更加完善的。不过,懒么,实现了就行。关于如何使用IF判断,请看我今天发的另一个教程。



好,通过这样的循环,就可以循环出二级栏目了。下面再做三级栏目。

 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
孤风大虾 当前离线

1700

主题

7

广播

118

粉丝
添加关注
级别:高一年

用户积分:10218 分
登录次数:451 次
注册时间:2006/3/28
最后登录:2022/3/10
孤风大虾 发表于:2013/11/4 22:04:51   | 只看该作者 查看该作者主题 地板 
科汛智能建站系统

我们接着制作“三级栏目”标签!



查询语句:



  1. SELECT TOP 30 ID,FolderName,TN FROM KS_Class Where TN='{$Param(0)}' ORDER BY Root,FolderOrder



其实和二级导航是一样的。嘿嘿。



循环代码如下:



  1. <dd>

  2. [loop=30]<a href="{$Field(ID,GetInfoUrl,100,1)}">{$Field(FolderName,Text,0,...,0,)}</a>[/loop]
  3. </dd>

这个循环代码最简单了。一看就懂,直接循环一个A就可以了。



好了,本教程结束了。



写在最后:其实一般的SQL标签不是很难的。只需要你非常认真的去分析,然后去实践就可以了。当客户给我看演示站的时候,我差点都晕过去了。这他妈的开玩笑啊!

躲不掉,那就干呗,仔细分析下,也就是这样嘛,毛毛雨啦!

希望大家也能努力学习,多写教程来分享。我一年多不写教程,教程区尽然还全是我的帖子,这叫人情何以堪啊!



不是我牛逼,是你们太懒啦!



最后,感谢CCAV,感谢KESION!版主,你可以插了!

 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
ygr1971 当前离线

1404

主题

44

广播

45

粉丝
添加关注
级别:版主

用户积分:8683 分
登录次数:124 次
注册时间:2011/11/13
最后登录:2021/11/2
ygr1971 发表于:2013/11/4 22:18:32   | 只看该作者 查看该作者主题 7楼 
科汛智能建站系统
好了。现在我来插吧。孤风的教程依然是这么NB,这么生动。谢谢。
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
abcdznz200 当前离线

32

主题

2

广播

0

粉丝
添加关注
级别:学前班

用户积分:440 分
登录次数:140 次
注册时间:2012/12/15
最后登录:2014/10/20
abcdznz200 发表于:2013/11/12 9:51:20   | 只看该作者 查看该作者主题 8楼 
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
cxb520cn 当前离线

780

主题

5

广播

4

粉丝
添加关注
级别:六年级

用户积分:8470 分
登录次数:1202 次
注册时间:2008/10/9
最后登录:2018/9/29
cxb520cn 发表于:2013/11/12 22:16:34   | 只看该作者 查看该作者主题 9楼 
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
taiyi123 当前离线

199

主题

10

广播

1

粉丝
添加关注
级别:一年级

用户积分:172 分
登录次数:72 次
注册时间:2013/6/4
最后登录:2018/8/2
taiyi123 发表于:2013/11/13 13:18:25   | 只看该作者 查看该作者主题 10楼 
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
<上一主题 | 下一主题 >
Powered By KesionCMS Version X1
厦门科汛软件有限公司 © 2006-2016 页面执行1.25488秒 powered by KesionCMS 9.0