【2013】孤风大虾回来了！超牛SQL大循环演示jquery精简优化版。这个很不错。-领先建站CMS提供服务商我们专注于CMS建站产品的研发

kesion

<<返回列表上一个主题下一个主题打印本帖复制本帖地址

20139 查看	29 回复

主题：【2013】孤风大虾回来了！超牛SQL大循环演示jquery精简优化版。这个很不错。 [收藏主题]

转到：

孤风大虾当前离线

1700 主题	7 广播	118 粉丝

添加关注

级别:高一年

用户积分:10218 分
登录次数:451 次
注册时间:2006/3/28
最后登录:2022/3/10
官方认证：仿站大师

官方认证：仿站大师

当前不在线

孤风大虾发表于：2013/11/5 13:21:18 | 只看该作者查看该作者主题楼主

科汛在线商城系统(NET)

做官网就用科汛智能建站系统!

原教程地址：http://bbs.kesion.com/forumthread-1126361.html

仔细看看这个教程，确实有点恶心。可能很多朋友都会看晕。虽然是实现了功能。但切片是使用的科讯官方的JS实现的。这是原装JS。事实上，大家在做网站的时候都会使用jquery JS库。那么我们能不能实现用jquery库来精简优化一下呢？

于是我做了尝试。另外，效果做了一些更改，不仅比原来的更加简短。而且，实现效果要比原来的好很多。

当然，前一个教程也是有价值的。比如其中用到了IF判断语句，这对于学习SQL语句来说是非常有帮助的。在本教程中，这一段省略掉了。代码更加简单清晰。

无图无真相，首先看效果图。

如上图所示，当一个栏目没有添加内容的时候，会出现一个可怜的喵星人，然后告诉大家，这个栏目的内容还没有添加。而不像上一个教程，只是留白。

另外，点击切换是有缓动效果的。比原版的效果要好很多。

JS库以及配套JS的下载：

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

====================

正在编辑中，请勿强行插入。

孤风大虾开发的CMS——fengcms 还未上线，官方网站 www.fengcms.com

孤风自己开发了一套CMS系统，博采科讯的长处，去除了无关的功能，有兴趣的百度 FengCms

做新职业技能培训平台就选#科汛网校

反对(0)

回到顶部

回到底部

底部

孤风大虾当前离线

1700 主题	7 广播	118 粉丝

添加关注

级别:高一年

用户积分:10218 分
登录次数:451 次
注册时间:2006/3/28
最后登录:2022/3/10
官方认证：仿站大师

官方认证：仿站大师

当前不在线

孤风大虾发表于：2013/11/5 13:29:54 | 只看该作者查看该作者主题沙发

科汛在线网校系统

有生源找课程就上科汛课堂街!

本教程，不涉及过多div+css的内容。CSS请自己理解。

但是为了新手理解，我将CSS分段演示，并给出简单解释。

CSS部分一

这部分是控制外框，以及第一部分的标题楼层以及更多的。

.web{ width:960px; overflow:hidden; margin:0 auto;}
.home_xh_title {width: 960px;overflow: hidden;background:url(/image/h2_xh.png) no-repeat 0 0;height: 50px;clear: both;margin: 20px 0 0;}
.home_xh_title_f {width: 50px;height: 50px;text-align: center;color: #fff;font:bold 30px/50px arial, Gadget, sans-serif;float: left;}
.home_xh_title_name {float: left;font:bold 30px/40px "微软雅黑","黑体","宋体";padding:0 10px;}
.home_xh_title_more {float: right;padding: 10px 0 0;}
.home_xh_title_more a {display: block;width: 70px;height: 40px;text-indent: -9999em;}

CSS部分二

这部分代码，是控制下面循环内容区的外框，以及左侧的下级栏目导航。

.home_xh {width: 960px;overflow: hidden;}
.home_xh_nav {width: 209px;float: left;overflow: hidden;border-right:1px solid #d5d5d5;height: 459px;background: #F2F2F2;}
.home_xh_nav h3{background:url(/image/xh_nav_title.png) no-repeat 0 0;width: 209px;height:36px;text-indent: -9999em;border-bottom:1px solid #d5d5d5;}
.home_xh_nav ul {background:url(/image/xh_nav_bg.png);width: 210px;overflow: hidden;}
.home_xh_nav ul li {width: 105px;text-align: center;height: 30px;line-height: 30px;float: left;}

CSS代码三

这部分代码是控制右侧的外框，以及右侧上部的切片导航控制区的。

.home_xh_box {width: 750px;float: right;overflow: hidden;}
.home_xh_box_tab {width: 750px;overflow: hidden;background:url(/image/xh_tab_bg.png) repeat-x 0 0;}
.home_xh_box_tab li {width: 149px;float: left;border-right:1px solid #d5d5d5;border-bottom:1px solid #d5d5d5;height: 36px;text-align: center;
font:bold 14px/36px "微软雅黑","宋体";cursor: pointer;}
.home_xh_box_tab .active {background: #fff;border-bottom:1px solid #fff; color: #f60}

CSS代码四

这部分内容是切片内容的外框，以及里面的内容的样式。最后的一个I，是当没有内容的时候，就显示它，背景为一张图片。

.home_xh_box_con {width: 750px;overflow: hidden;height: 422px;}
.home_xh_box_con ul {width: 750px;overflow: hidden;height: 422px;}
.home_xh_box_con li {width: 149px;float: left;overflow: hidden;border-right:1px solid #d5d5d5;border-bottom:1px solid #d5d5d5;background: #fff;}
.home_xh_box_con li a {display: block;width: 130px;padding:10px;height: 190px;}
.home_xh_box_con li a:hover {text-decoration: none;background: #f4f4f4;}
.home_xh_box_con li a img {display: block;width: 130px;vertical-align:middle;height: 130px;}
.home_xh_box_con li a em {font-style:normal;display: block;height: 24px;line-height: 24px;text-align: center;color: #666;}
.home_xh_box_con li a strong {font-family: arial,verdana,sans-serif;font-size: 14px;color: #f60;}
.home_xh_box_con li a span {display: block;width: 130px;height: 24px;text-align: center;line-height: 24px;overflow: hidden;padding: 5px 0 0;}
.home_xh_box_con i {display: block;background:url(/image/nocontent.png) 0 0 no-repeat;height: 422px;}

DIV的部分都在SQL循环体里面。下面自行说明。代码含义请自行理解。不再解释。

做考试题库就用#科汛在线考试系统!

反对(0)

回到顶部

回到底部

底部

孤风大虾当前离线

1700 主题	7 广播	118 粉丝

添加关注

级别:高一年

用户积分:10218 分
登录次数:451 次
注册时间:2006/3/28
最后登录:2022/3/10
官方认证：仿站大师

官方认证：仿站大师

当前不在线

孤风大虾发表于：2013/11/5 13:33:26 | 只看该作者查看该作者主题藤椅

科汛在线考试系统(NET)

有课程找生源就上科汛课堂街

首先，要分析，我们可以把这一块内容分成三个部分

1、栏目头。包含1F字样的楼层代码、栏目标题、以及更多链接。

2、栏目的包含的子栏目的导航。

3、切片区。切片区包含两个部分，1、切片的控制区，2切片的显示区。

1、我们要做一个SQL标签，这个标签读取产品栏目子类并循环，利用{$AutoID}，可以制作1F这样的楼层效果。

2、子栏目导航，还是读取栏目表，根据传递的TN值，来获取子栏目。这个懂SQL的都简单。

3、切片控制区。这里是读取前5个子栏目。和2类似。

4、切片内容外框。这里和3一样，也是读取子栏目。只是HTML结构不一样。

5、里面的内容，可以根据TN值查找内容表的TID值，相等的就查出来。这个没有问题。问题是，如果子栏目还有子栏目怎么办，这是困扰我的问题。当然，我找到了解决方案。大家可以往下看。

==========================

和昨天发的教程类似，SQL结构并没有改变，只是优化了代码。我们一个一个来解析。

做新职业技能培训平台就选#科汛网校

反对(0)

回到顶部

回到底部

底部

孤风大虾当前离线

1700 主题	7 广播	118 粉丝

添加关注

级别:高一年

用户积分:10218 分
登录次数:451 次
注册时间:2006/3/28
最后登录:2022/3/10
官方认证：仿站大师

官方认证：仿站大师

当前不在线

孤风大虾发表于：2013/11/5 13:36:15 | 只看该作者查看该作者主题板凳

有课程找生源就上科汛课堂街

首先，我们新建一个“首页大循环外”的SQL标签。

查询语句：

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

循环体：

[loop=8]<script type="text/javascript">$(function($){ $("#tabgo{$AutoID}").switchTab({effect: "fade"});});</script>
<div class="web" id="go_to_{$AutoID}">
<div class="home_xh_title">
  <div class="home_xh_title_f">{$AutoID}F</div>
  <div class="home_xh_title_name">{$Field(FolderName,Text,0,...,0,)}</div>
  <div class="home_xh_title_more">
<a href="{$Field(ID,GetInfoUrl,100,1)}" title="{$Field(FolderName,Text,0,...,0,)}" target="_blank">{$Field(FolderName,Text,0,...,0,)}</a>
  </div>
</div>
<div class="home_xh" id="tabgo{$AutoID}">
  <div class="home_xh_nav">
<h3>{$Field(FolderName,Text,0,...,0,)}</h3>
<ul>{SQL_首页大循环内导航({$Field(ID,Text,0,...,0,)})}</ul>
  </div>
  <div class="home_xh_box">
<div class="home_xh_box_tab">
<ul>{SQL_首页大循环内切片导航({$Field(ID,Text,0,...,0,)})}</ul>
</div>
<div class="home_xh_box_con">{SQL_首页大循环内切片内容外框({$Field(ID,Text,0,...,0,)})}</div>
  </div>
</div>
</div>[/loop]

循环体的结构，和昨天的教程是一致的。但是JS代码部分更换了。这里用了JQ，另外，不在使用顶级栏目ID作为控制代码，而是直接使用{$AutoID}。这样代码更加简短。

<div class="web" id="go_to_{$AutoID}">

和昨天的教程不同，这里的最外框，我加了一个ID是go_to_{$AutoID}，这是为了实现首页板块之间的快速跳转的。利用的是<a href="#go_to_1">板块一</a>这样原理的本页跳转。本教程主要讲SQL部分，这部分可自行百度。或者我回头再写教程。

===================================================

我们分析的第一部分，可以直接读取出来，不需要有下级循环。非常简单就做到了。

而第二部分，是子栏目导航。如果你做过类似的项目，应该很容易就理解了。需要有一个子栏目循环的标签。我在这里命名为“首页大循环内导航”

第三部分是内容区，分为切片控制区和内容区。我分别命名为首页大循环内切片导航和首页大循环内切片内容外框

科汛商学院助您快速入门

反对(0)

回到顶部

回到底部

底部

孤风大虾当前离线

1700 主题	7 广播	118 粉丝

添加关注

级别:高一年

用户积分:10218 分
登录次数:451 次
注册时间:2006/3/28
最后登录:2022/3/10
官方认证：仿站大师

官方认证：仿站大师

当前不在线

孤风大虾发表于：2013/11/5 13:40:29 | 只看该作者查看该作者主题报纸

科汛智能建站系统

有课程找生源就上科汛课堂街

首页大循环内导航的制作

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

循环语句如下：

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

=============

这部分和前一个教程是一模一样的。没有任何变化。

一分钟快速开通线上知识店铺

反对(0)

回到顶部

回到底部

底部

孤风大虾当前离线

1700 主题	7 广播	118 粉丝

添加关注

级别:高一年

用户积分:10218 分
登录次数:451 次
注册时间:2006/3/28
最后登录:2022/3/10
官方认证：仿站大师

官方认证：仿站大师

当前不在线

孤风大虾发表于：2013/11/5 13:43:28 | 只看该作者查看该作者主题地板

有课程找生源就上科汛课堂街

首页大循环内切片导航的制作

查询语句如下：

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

查询语句和前面是一模一样的。但是循环体就简单多了。不可思议。

[loop=5]
<li>{$Field(FolderName,Text,0,...,0,)}</li>[/loop]

简单吧。直接循环一个LI就可以了。没有样式，没有判断。JQ真神奇。

发帖时间小于2分钟，还不让发帖了，随便打两个字消耗时间。JQ是非常神奇的东西。给大家一个JQ特效的网站吧。这个网站有很多特效。http://www.17sucai.com/category/1

做新职业技能培训平台就选#科汛网校

反对(0)

回到顶部

回到底部

底部

孤风大虾当前离线

1700 主题	7 广播	118 粉丝

添加关注

级别:高一年

用户积分:10218 分
登录次数:451 次
注册时间:2006/3/28
最后登录:2022/3/10
官方认证：仿站大师

官方认证：仿站大师

当前不在线

孤风大虾发表于：2013/11/5 13:47:00 | 只看该作者查看该作者主题 7楼

科汛在线考试系统(NET)

有生源找课程就上科汛课堂街!

首页大循环内切片内容外框的制作

查询语句：

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

循环语句：

[loop=5]
<div>{SQL_首页大循环内容列表({$Field(ID,Text,0,...,0,)})}<i></i></div>[/loop]

循环体非常简单。这里加了一个I，是为了当栏目没有添加内容的时候，显示的喵星人。

做新职业技能培训平台就选#科汛网校

反对(0)

回到顶部

回到底部

底部

孤风大虾当前离线

1700 主题	7 广播	118 粉丝

添加关注

级别:高一年

用户积分:10218 分
登录次数:451 次
注册时间:2006/3/28
最后登录:2022/3/10
官方认证：仿站大师

官方认证：仿站大师

当前不在线

孤风大虾发表于：2013/11/5 13:52:25 | 只看该作者查看该作者主题 8楼

科汛在线网校系统

有课程找生源就上科汛课堂街

首页大循环内容列表的制作

如果子栏目下没有子栏目的查询语句：

select top 10 ID,Tid,Title,Adddate,Hits,Intro,PhotoUrl,KS_jiage from KS_U_cpxt where tid='{$Param(0)}' order by Adddate desc

如果子栏目下还有子栏目的查询语句：

select top 10 KS_U_cpxt.ID,KS_U_cpxt.Tid,KS_U_cpxt.Title,KS_U_cpxt.Adddate,KS_U_cpxt.Hits,KS_U_cpxt.Intro,KS_U_cpxt.PhotoUrl,KS_U_cpxt.KS_jiage,KS_Class.ID as KS_Classid,KS_Class.TN from KS_U_cpxt,KS_Class where TN='{$Param(0)}' and KS_Class.ID=KS_U_cpxt.TID order by Adddate desc

这个查询语句的具体解释请看前面的教程。

循环代码如下：

<ul>[loop=10]<li><a href="{$Field(ID,GetInfoUrl,111,1)}" target="_blank" title="{$Field(Title,Text,0,...,0,)}">
<img src="{$Field(PhotoUrl,Text,0,...,0,)}" alt="{$Field(Title,Text,0,...,0,)}" />
<span>{$Field(Title,Text,0,...,0,)}</span>
<em>价格：<strong>￥ {$Field(KS_jiage,Text,0,...,0,)}</strong></em>
</a></li>
[/loop]</ul>

和前面的教程不一样的是，我把UL从首页大循环内切片内容外框里面，挪到了首页大循环内容列表里面，这样，但栏目没有添加内容的时候就不输出UL了。其实没啥。

本教程献给科讯官方。献给所有热爱科讯CMS的朋友们。这个教程有些生涩。如果不仔细研究很容易看晕。仅献给有耐心研究科讯SQL标签的朋友们。客户的站，演示地址不发了。希望大家多多学习多多努力。

教程结束，请君随便插~

有课程找生源就上科汛课堂街

反对(0)

回到顶部

回到底部

底部

ygr1971 当前离线

1404 主题	44 广播	45 粉丝

添加关注

级别:版主

用户积分:8683 分
登录次数:124 次
注册时间:2011/11/13
最后登录:2021/11/2

当前不在线

ygr1971 发表于：2013/11/5 14:26:58 | 只看该作者查看该作者主题 9楼

科汛智能建站系统

做考试题库就用#科汛在线考试系统!

一如既往地NB。

做官网就用科汛智能建站系统!

反对(0)

回到顶部

回到底部

底部

浪侠当前离线

416 主题	4 广播	1 粉丝

添加关注

级别:四年级

用户积分:2073 分
登录次数:299 次
注册时间:2007/2/12
最后登录:2019/3/14

当前不在线

浪侠发表于：2013/11/5 16:07:14 | 只看该作者查看该作者主题 10楼

科汛在线考试系统(NET)

做考试题库就用#科汛在线考试系统!

孤风大虾回来了！超牛SQL大循环演示

做新职业技能培训平台就选#科汛网校

反对(0)

回到顶部

回到底部

底部

＜上一主题 | 下一主题＞

<< 返回列表

首页 1 2 3 下一页

Powered By KesionCMS Version X1

厦门科汛软件有限公司 © 2006-2016 页面执行0.25000秒 powered by KesionCMS 9.0