账号通
    

注册

找回密码

账号  

密码  

话题
互动
会员
服务
<<返回列表上一个主题 下一个主题 打印本帖 复制本帖地址

20137

查看

29

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

1700

主题

7

广播

118

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

用户积分:10218 分
登录次数:451 次
注册时间:2006/3/28
最后登录:2022/3/10
孤风大虾 发表于：2013/11/5 13:21:18   | 只看该作者 查看该作者主题 楼主 
做在线知识付费 选科汛云开店
做线上考试培训 就选#科汛网校

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


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


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


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


无图无真相，首先看效果图。点击查看原图


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


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


JS库以及配套JS的下载：

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

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

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

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


 
孤风自己开发了一套CMS系统，博采科讯的长处，去除了无关的功能，有兴趣的百度 FengCms
一分钟快速开通线上知识店铺
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
孤风大虾 当前离线

1700

主题

7

广播

118

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

用户积分:10218 分
登录次数:451 次
注册时间:2006/3/28
最后登录:2022/3/10
孤风大虾 发表于：2013/11/5 13:29:54   | 只看该作者 查看该作者主题 沙发 
科汛智能建站系统
有课程 找生源 就上科汛课堂街

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



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



CSS部分一

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

  2. .web{ width:960px; overflow:hidden; margin:0 auto;}

  3. .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;}

  4.   .home_xh_title_f {width: 50px;height: 50px;text-align: center;color: #fff;font:bold 30px/50px arial, Gadget, sans-serif;float: left;}
  5.   .home_xh_title_name {float: left;font:bold 30px/40px "微软雅黑","黑体","宋体";padding:0 10px;}
  6.   .home_xh_title_more {float: right;padding: 10px 0 0;}
  7.    .home_xh_title_more a {display: block;width: 70px;height: 40px;text-indent: -9999em;}



CSS部分二



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



  2. .home_xh {width: 960px;overflow: hidden;}

  3.   .home_xh_nav {width: 209px;float: left;overflow: hidden;border-right:1px solid #d5d5d5;height: 459px;background: #F2F2F2;}
  4.    .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;}
  5.    .home_xh_nav ul {background:url(/image/xh_nav_bg.png);width: 210px;overflow: hidden;}
  6.     .home_xh_nav ul li {width: 105px;text-align: center;height: 30px;line-height: 30px;float: left;}



CSS代码三



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



  2. .home_xh_box {width: 750px;float: right;overflow: hidden;}

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



CSS代码四



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



  2. .home_xh_box_con {width: 750px;overflow: hidden;height: 422px;}

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



DIV的部分都在SQL循环体里面。下面自行说明。代码含义请自行理解。不再解释。
 
做考试题库 就用#科汛在线考试系统!
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
孤风大虾 当前离线

1700

主题

7

广播

118

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

用户积分:10218 分
登录次数:451 次
注册时间:2006/3/28
最后登录:2022/3/10
孤风大虾 发表于：2013/11/5 13:33:26   | 只看该作者 查看该作者主题 藤椅 
做考试题库 就用#科汛在线考试系统!

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

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

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

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



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



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



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



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



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



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



和昨天发的教程类似，SQL结构并没有改变，只是优化了代码。我们一个一个来解析。
 
有课程 找生源 就上科汛课堂街
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
孤风大虾 当前离线

1700

主题

7

广播

118

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

用户积分:10218 分
登录次数:451 次
注册时间:2006/3/28
最后登录:2022/3/10
孤风大虾 发表于：2013/11/5 13:36:15   | 只看该作者 查看该作者主题 板凳 
做在线知识付费 选科汛云开店
有生源 找课程 就上科汛课堂街!

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


查询语句：


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


循环体：


  1. [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}。这样代码更加简短。


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


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


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


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

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

第三部分是内容区，分为切片控制区和内容区。我分别命名为首页大循环内切片导航和首页大循环内切片内容外框
 
做考试题库 就用#科汛在线考试系统!
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
孤风大虾 当前离线

1700

主题

7

广播

118

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

用户积分:10218 分
登录次数:451 次
注册时间:2006/3/28
最后登录:2022/3/10
孤风大虾 发表于：2013/11/5 13:40:29   | 只看该作者 查看该作者主题 报纸 
做在线知识付费 选科汛云开店
做官网 就用科汛智能建站系统!

首页大循环内导航的制作



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



循环语句如下：

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



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



这部分和前一个教程是一模一样的。没有任何变化。
 
科汛商学院助您快速入门
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
孤风大虾 当前离线

1700

主题

7

广播

118

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

用户积分:10218 分
登录次数:451 次
注册时间:2006/3/28
最后登录:2022/3/10
孤风大虾 发表于：2013/11/5 13:43:28   | 只看该作者 查看该作者主题 地板 
科汛智能建站系统
有课程 找生源 就上科汛课堂街

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



查询语句如下：

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



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



  2. [loop=5]

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



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



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

 
做新职业技能培训平台 就选#科汛网校
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
孤风大虾 当前离线

1700

主题

7

广播

118

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

用户积分:10218 分
登录次数:451 次
注册时间:2006/3/28
最后登录:2022/3/10
孤风大虾 发表于：2013/11/5 13:47:00   | 只看该作者 查看该作者主题 7楼 
科汛在线网校系统
有课程 找生源 就上科汛课堂街

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



查询语句：



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



循环语句：



  2. [loop=5]

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



循环体非常简单。这里加了一个I，是为了当栏目没有添加内容的时候，显示的喵星人。
 
做新职业技能培训平台 就选#科汛网校
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
孤风大虾 当前离线

1700

主题

7

广播

118

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

用户积分:10218 分
登录次数:451 次
注册时间:2006/3/28
最后登录:2022/3/10
孤风大虾 发表于：2013/11/5 13:52:25   | 只看该作者 查看该作者主题 8楼 
科汛在线考试系统(NET)
做官网 就用科汛智能建站系统!

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



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



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



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



  2. 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



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



循环代码如下：

  2. <ul>[loop=10]<li><a href="{$Field(ID,GetInfoUrl,111,1)}" target="_blank" title="{$Field(Title,Text,0,...,0,)}">

  3. <img src="{$Field(PhotoUrl,Text,0,...,0,)}" alt="{$Field(Title,Text,0,...,0,)}" />
  4. <span>{$Field(Title,Text,0,...,0,)}</span>
  5. <em>价格：<strong>￥ {$Field(KS_jiage,Text,0,...,0,)}</strong></em>
  6. </a></li>
  7. [/loop]</ul>



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



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



教程结束，请君随便插~
 
科汛商学院助您快速入门
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
ygr1971 当前离线

1404

主题

44

广播

45

粉丝
添加关注
级别:版主

用户积分:8683 分
登录次数:124 次
注册时间:2011/11/13
最后登录:2021/11/2
ygr1971 发表于：2013/11/5 14:26:58   | 只看该作者 查看该作者主题 9楼 
科汛智能建站系统
做线上考试培训 就选#科汛网校

一如既往地NB。嘿嘿
 
有课程 找生源 就上科汛课堂街
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
浪侠 当前离线

416

主题

4

广播

1

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

用户积分:2073 分
登录次数:299 次
注册时间:2007/2/12
最后登录:2019/3/14
浪侠 发表于：2013/11/5 16:07:14   | 只看该作者 查看该作者主题 10楼 
科汛在线考试系统(NET)
做考试题库 就用#科汛在线考试系统!
孤风大虾回来了！超牛SQL大循环演示
 
做新职业技能培训平台 就选#科汛网校
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
＜上一主题 | 下一主题 ＞
<< 返回列表
Powered By KesionCMS Version X1
厦门科汛软件有限公司 © 2006-2016 页面执行4.08203秒 powered by KesionCMS 9.0