建立一个类似YAHOO的导航条

yahoo

This sample will demonstrate how to quickly build a simple Yahoo! style navigation bar that displays the paths a user has taken to get to a given directory, and also displays a table of links to the sub-directories of the current directory.

The first thing I like to do when beginning any database driven application is to design the data structure. Of course, once we get into writing the code, many times columns or tables need to be added or modified from the initial design, but having a data framework helps to give us some focus and direction.

Database Layout
I am using an Access2000 database for this example. You can definitely port this to any RDBMS easily; just follow the same table architecture.

Let's start by creating a new Access database, and name it Bread.mdb.
Create a single table and name it tblParents.
Open it up in Design Mode and add the following columns.

* You can skip building all this from scratch by downloading the source files.

Bread.mdb
Column Name Data Type
AID Auto Number (Primary Key)
DirName Text
ChildDir Text
ParentDir Text
ChildDirDescript Memo
DirDescript Memo

* If designing for SQL Server, make the AID Column an Identity Field, with an increment of 1 and make sure allow nulls is off.

Next we will want to populate our table with data, so let me explain the logic of the architecture.

Start by inserting the data for the root directory of your web server. This will be specified by inserting a forward slash / into the DirName column.
Next add the directory below the root to the ChildDir column (make sure you add the exact directory name as it appears on the server)
Since this is the root directory, leave the ParentDir column blank.
For the ChildDirDescript Column, you want to enter whatever you want the text to read for the link to the ChildDir directory that you just entered. (i.e., if you entered music as a ChildDir Name, you may want the link that points to music to also read Music, so you enter Music in the ChildDirDescript column for this entry. If you want it to read Modern Music, enter that)
For the DirDescript column, enter the text you want to appear to describe the current directory, which in this case is the root folder. I used the word Home as the description so that users will always know that clicking on this link will bring me back to the beginning.
Repeat this process for each sub directory you have below your web root.
Note: Make sure to create the actual directory structure on the web server if it does not already exist.
Your data should look similar to this:

After you complete this process make sure you also make entries in the database for the directories you just added. In my case I added a directory Music, so now I must add the appropriate Fields for Music. Since Music has a parent directory (Root), we must specify it by adding a forward slash for ParentDir.

Populate the data for Music and any other Sub Directories you like.

You may refer to the screenshot below for my example.

* The ChildDir columns should contain all the directories below the Root.

The Code
Now that we have some valid data, let's start by creating a couple of functions. We will house these functions in an include file, named folderFunctions.asp. The first function we want is a function to return the current physical directory of the web server. We will use this function when we do a database lookup to build the appropriate links and path history. I named this function GetThisPath.

First thing our function needs to do is get the current full path from the server. We will use the Path_Info method of the ServerVariables collection to look it up.

Since we only want the current directory name, we will split the string returned from Path_Info at the forward slash, which will create an array containing all the directories above the current directory. Then we will need to loop thru the entire array to pull only the data we need (the current directory). We will accomplish this by setting our loop to exit at the next to the last entry in the array (The very last entry would be the page name and we don't want that). The way we do this is to tell the loop to execute as many times as values the array holds minus one. We get that information by asking the array for it's upper Bounds.

Then we will set the functions return value to the last entry in our loop by overwriting the return value in each loop, which will be the current directory. However, if the array is empty, it means we are at the root of the server and we need to set the return value

时间: 2024-08-02 19:26:02

建立一个类似YAHOO的导航条的相关文章

开发类似微软中国导航条的控件

导航|控件|微软 开发类似微软中国导航条的控件-ios 导航条上添加控件"> 比较好看吧.根据书上例子自己写了一下,用VS2005写,特别方便,代码如下 using System; using System.ComponentModel; using System.Web.UI; using System.Web.UI.WebControls; using System.Drawing; namespace ClingingBoy {  [DefaultProperty("tex

如何在浏览器里建立一个类似心电图的动态曲线图,B/S结构的

问题描述 如何在浏览器里建立一个类似心电图的动态曲线图,B/S结构的.可以动态的随着数据库的数据变化而变化. 解决方案 解决方案二:vml解决方案三:用Flash应该可以的吧解决方案四:svg解决方案五:可以用image吧.用GDI+画出图片,然后放到image里面就行了.画的时候可能会比较麻烦

FLASH制作一个可以伸缩的导航条

导航|伸缩 制作过程使用FLASH MX 中文版,效果如下: 点击这里下载源文件 由于时间比较紧:我作的比较粗糙:请大家谅解:本教程只是希望能给大家一个思路:细节方面自已有时间时再作吧:以 下是制作过程: 一.新建一个大小为:200*200Px:帧频:45:背景色:#FFFFFF:的影片: 二.首先我们来制作四个导航条:由于时间关系:我只作一个:然后复制:因为作法都一样:     步骤A:新建一影片剪辑:起名字为"zishu1":在这个剪辑中共建四个图层:从下到下名字分别为:AS.BT

创建一个纯CSS的水平导航条

css|创建 按照传统的方法,导航条由放在一行表格单元里的图形图像构成.由于人们不再推荐用表格来定位任何非表格的页面内容,所以很多制作Web的人正在寻找(新的)方法,用结构化的XHTML标记和CSS格式来创建导航条. 一个简单的CSS导航条 创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里,就像例A里的一样. 这种方法看起来很合理也很直观.但问题是,把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白.所以,为了避免所有的链接都挤在一起,你最后通常都不得不插入

Bootstrap入门书籍之(五)导航条、分页导航_javascript技巧

导航条 导航条(navbar)和上一节介绍的Bootstrap入门书籍之(四)菜单.按钮及导航.导航(nav),就相差一个字,多了一个"条"字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式.它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式. 基础导航条 实际上,导航条和导航在外观上的差别并不是那么的大,但

全面接触神奇的Bootstrap导航条实战篇_javascript技巧

导航条(navbar)在Bootstrap中是一个独立组件,导航条(navbar)和导航(nav)在Bootstrap中是有明显的区别的.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接.表单.表单和导航一起结合等多种形式. 1.实战一-带二级菜单和表单的导航条 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>导航条</title>

Flash MX 2004实例制作视频教程:导航条的制作

导航|教程|视频教程 第 40 节:导航条的制作 课程目标:制作一个简易的网站导航条. 课程要点:使用Flash MX2004制作一个简易的网站导航条,主要应用了按钮及脚本实现.例中使用到的ActionScript脚本请下载源文件查看. 观看教程:[全屏观看] (2.60MB) (必须安装Flash Player 7.0或更高版本的播放器,[官方下载]) 下载教程:[下载教程] [下载源文件] 本节实例效果预览:

JS组件Bootstrap导航条使用方法详解_javascript技巧

导航条是在您的应用或网站中作为导航标头的响应式元组件. 1.默认的导航条 导航条在移动设备上可以折叠(并且可开可关),且在可用的视口宽度增加时变为水平展开模式定制折叠模式与水平模式的阈值根据你所放在导航条上的内容的长度,也许你需要调整导航条进入折叠模式和水平模式的阈值.通过改变@grid-float-breakpoint变量的值或加入您自己的媒体查询CSS代码均可实现你的需求.第一步:最外面的容器nav标签,并添加nav-bar样式类,表示这里面属于导航条 <nav class="navb

第一次接触神奇的Bootstrap导航条_javascript技巧

导航条(navbar)在Bootstrap中是一个独立组件,导航条(navbar)和导航(nav)在Bootstrap中是有明显的区别的.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接.表单.表单和导航一起结合等多种形式. 1.实战一-带二级菜单和表单的导航条 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>导航条</title>