今天给你们的小免费模板。实际上是 Doug Neiner 的想法,我把它用上了,然后他在最后帮我把一些东西收紧了。
笔记
它是 PHP。所以,如果您下载它来查看它,请将其放到您的 Web 服务器上进行测试(或您在本地运行 PHP 的地方)。
导航
导航使用 jQuery 的 .load() 功能进行 AJAX 处理。我认为它很有趣。它支持“深层链接”,因此,如果您要链接到带有页面哈希标签的此页面(例如 /DocTemplate/#parameters.php),它将看到该标签并加载该页面。
如果您要使用此模板来记录某种 JavaScript 东西,需要注意的是,当以这种方式加载内容时,该页面上的 JavaScript 将不会“活动”。
如果您不喜欢或不能使用 AJAX 导航,只需删除文件 common/doctype-and-head.php 中的两个 JavaScript <script> 链接。它将回退到简单地重新加载页面以转到这些页面,并保持当前导航突出显示。
还有…
index.php 文件包含所有可用的不同文本样式。不多,但只是标题标签、代码样式、强调/粗体标签、链接、突出显示类等的典型层次结构。
从圆角到阴影到 :hover:after 的生成内容,这里有很多 CSS3 的东西。不过,它应该可以很好地降级。
与本网站上的任何其他内容一样,请随意将其用于任何您想要的目的,无需任何形式的归属。
感谢您提供此模板,Chris,我真的很喜欢它
可能是一个很好的 phpDocumentor 小设计。
这将是一个很棒的简历布局!
@Matt
正是我想到的
谢谢,这是一个不错的设计,并且运行良好,除了在进行完整的 AJAX 站点时出现的一件重复的事情……后退和前进按钮不起作用(Safari、Chrome、Firefox、IE),尽管哈希标签会更改,但实际内容不会更改。
我之前使用过 jquery history 插件来解决这个问题 (http://plugins.jquery.com/project/history),但我仍然觉得我没有足够的控制权,而且它仍然有点令人困惑。有谁知道处理这个问题更好的插件/技术吗?
你可以看看 SWFAddress :)
我从来没有使用 history 插件成功过。从未听说过 SWFAddress,但它看起来很酷。
如果有人找到了让后退按钮起作用的方法,我会洗耳恭听,我会更新演示/下载。
好吧,我只是想起来 HTML5 中有 window.onhashchange。它将在 IE8 和 FF 3.6 中工作。当用户点击后退箭头时,哈希将更改,我们将触发该函数来更新内容并设置 .active :)
哦,这很酷,这将是处理它的渐进方式。
好吧,“正常”的方式来支持后退/前进按钮是使用一个 JavaScript 函数,该函数每隔一段时间运行一次(通过 setInterval),它不断检查哈希是否已更改。对我来说,这似乎很丑陋。
看起来很棒!
除了后退按钮之外,还有一个问题
修复左侧菜单的位置——我应该如何在移动浏览器上浏览它?或者在分辨率较小的上网本上呢?
这是一个模板,因此您应该根据您使用它的应用程序的需要调整内容。例如,如果您不喜欢,可以取消固定导航。或者缩短它。就我个人而言,我不太担心使用小手机屏幕的人会因旨在记录代码的网站而感到不便(没有多少人在手机上写代码),但这绝对是一个合理的观点。
我认为此导航历史问题已在 nettuts 文章 如何使用 jQuery 加载和动画内容 中提到过。
一位名为 Patrick 的评论者 (http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/#comment-2856) 建议了一种修复方法并修改了演示,现在它会在您按下后退键时加载页面内容。您可能想查看一下。
http://www.tigerofdoom.com/ajaxContent/howto.html
各位。是什么让你们感到不安——我把页眉、页脚、导航和索引合并到一个 index.php 中,一切正常,即使我把它重命名为 index.htm。
很棒的模板,Chris。
您应该让人们提交他们使用此模板所做的事情。也许举办一个最佳设计比赛。只是一个想法。
FF 3.5 中页面滚动非常慢 =\
所有具有固定背景的网站不都是这样吗?(这是我几乎从不使用它们的主要原因!)
我喜欢固定菜单的概念,整体设计也很新颖。
没有后退按钮会让一些用户感到沮丧,因此,如果有人知道的话,找到一个优雅的解决方案将是一件好事。
此外,内联链接文本具有 decoration:underline,在悬停时变为 border-bottom,看起来有点奇怪。除了继承的 font-family 之外,它实际上看起来没有样式,因此该规则可能被删除了?当然,这是一个简单的修复。
谢谢,你
更高
非常酷。我实际上一直在寻找类似的东西,所以这会很有效。也许这里有人可以修复后退按钮哈希标签,但如果不是,也没关系。非常感谢。
哦,这本身就可以成为一个很棒的 WP 主题,无需所有 AJAX 和固定滚动内容。
非常棒的东西。感谢您的分享。这会派上用场。
谢谢 Chris,
我有一些客户可以使用它。
-Anthony
很高兴看到它发布了……在等我多久?希望很多人使用它并根据自己的需求进行更改。
这是官方的。现在没有哪个开发者有理由发布一个糟糕的网站来宣传他们的新插件/软件/其他东西。他们需要这个模板,并且只需几分钟就可以设置好。
大家好,
我在这里学习一下……
这个例子中的 doctype-and-head.php 文件中的 script 标签包含
"....jquery/1.4/jquery.min.js?ver=1.3.2'"
我知道 jQuery 的 1.4 版本已经出来了,但我不知道“ver=”的作用。它是一个兼容性问题吗,还是最低版本?
我还没有找到相关的文档……
谢谢!
请忽略它,或从 doctype-and-head.php 文件中删除它。我认为这可能是我犯的一个奇怪的错误,我不知道它来自哪里,而且就我所知,它不会影响任何东西。
它太棒了,我现在不会使用它,但总有一天……你很棒!
嗨……
这个看起来真的很酷……祝一切顺利
谢谢你分享这个,我非常需要它。
我已经在一个 Codecanyon 提交中使用了它,你可以在这里看到。
http://geek-like-me.com/simpleAdminPlus/
太棒了。我认为这是理想的用途。
@Balor Rae’
我希望能得到这个 simpleadminPlus
有什么想法吗?
@Chris
再次感谢你的好主意
继续努力
我已经将这些文件上传到 e-junkie,价格为 10 美元,你可以通过 PayPal 购买。
https://www.e-junkie.com/ecom/gb.php?i=609966&c=single&cl=102862
当我发布任何更新时,我会将更新后的代码发送给你。
看起来很棒。祝贺你
我喜欢它。我认为这对于进行客户演示非常有用,尤其是在投影屏幕上。
关于设计,我能提供的唯一建议是,也许不要在菜单中使用水平渐变,或者使用图像右侧的不同阴影,使活动菜单项更突出。
我认为它看起来相当不错。有两个地方让我不太满意:它没有 深度链接地址,而且它在 Gecko 浏览器中存在 Javascript 风格网站通常会遇到的“延迟”问题。除此之外,恕不冒犯,我真的不知道我会用它做什么。
我的剪贴板出问题了。它应该链接到 http://www.asual.com/swfaddress/
我是第一次发帖,但一直是这里的忠实读者。
Chris,我只想说感谢你发布了所有这些屏幕截图和信息。每次我在进行项目或遇到问题时,在那一周内你都会发布一个教程/屏幕截图来描述如何解决我的问题。
总之,我只想说你在这里做的工作很棒,谢谢……
遗憾的是,它似乎与 Lightbox 不兼容。仅仅加载 Lightbox JS 文件就会导致它无法正常工作。你知道为什么吗?
太棒了,Chris,我喜欢它,真的喜欢它
太棒了!感谢你分享。
Chris,这真的很棒!我没有什么需要记录的东西,但当我找到一些需要记录的东西时,我肯定会使用它!这真的太酷了!
太棒了……我喜欢滚动效果。感谢分享:)
点赞!太棒了……
非常酷!感谢你(……也感谢 Doug)。
很棒的模板 - 看起来很棒!感谢你分享这个:-)
看起来很棒!
完全偷走了我想要写的一篇文章的想法(设计和代码已经完成了)!;)
但我真的很喜欢它的外观。:)
看起来我可能会在 WordPress 中使用它来制作一个主题选项面板。如果/当我这样做的时候,我会通知你。顺便说一下,它看起来很棒:)
快速问一下 - 是否可以轻松地编辑它,使其加载的不是新文件,而是主文件中的不同 div?
例如:在一个 index.php 文件中,有四个主要的 div:overview、terms、section、last。
是否可以轻松地隐藏不在“视图中”的 div,并让它们仅在导航中点击时显示?
昨天我把这个放在我朋友的新域名上。 网站本身。这只是一个粗略的开始,但这个模板非常酷。
不幸的是,它将仅以保加利亚语显示。
对于小型企业网站来说,这是一个很棒的模板。我相信将来我会用它来为我的客户服务!谢谢,Chris!
不错,兄弟……我喜欢它,你做得太棒了……
我目前正在将这个模板应用到一个网站(notabene-bg.org/beta/)。不幸的是,我在处理来自 TinyMCE 的 Word 粘贴插件的内容以及一些文章中的表格时遇到了问题。
你可以在这里看看
http://translate.google.bg/translate?hl=bg&sl=bg&tl=en&u=http%3A%2F%2Fnotabene-bg.org%2Fbeta%2Findex.php
谢谢!等我空闲的时候会看看。
嗨,Chris,
我喜欢这个布局!我有一个客户肯定会从这个简单的布局中受益。越简单越好!!
干杯。
非常棒!感谢你免费分享。
我喜欢它,可以用于多种目的
IE6 太失败了,兄弟
为了支持 IE6,我建议删除 Javascript,并使用 这个 来处理 CSS。
IE6 本身就是一个失败,对于今天来说已经过时了。
我昨天一整天都在玩你的模板,决定在这里分享一些东西这里。现在可能没用,但我希望有一天我会找到它的一些实际应用 :)
唯一令人讨厌的是,<title> 对于每个页面都是一样的。我建议在每个页面添加一个页面标题变量,这样看起来会更好 :)
我真的很喜欢这个简单但非常有效的设计。我借鉴了这个想法,在 WordPress 上做了一个小项目。这是粗略版本……
点击
感谢您提供这个美丽的模板。
可爱
但是,如何从同一网站中的另一个内容页面创建到菜单中某个页面的链接?
常规的 href 链接有效,但菜单不会更改为相应的页面
嗨,
你说的没错。我刚写了这个。
但只有一个菜单将你链接到所有页面的想法很棒。特别是在你用手写网站,并且它包含 1500 个页面时。
此致。
Zarko。
这是一个很棒的模板,但不幸的是,有一些错误。如果我在 main-content 中放置一个指向另一个页面的链接,什么也不会发生 - 我在栏上看到页面,但页面仍然保持不变。
如果我放置 URL - 它会在主内容中重新加载页面(页面在页面中出现)
我将所有 4 个页面合并到一个 .php 文件中,没有错误发生 - 它可以正常工作。
我使用这个模板来 -http://asiatbg.com - 这是我朋友的亚洲牧羊犬新网站
以及将其用作一个训练 cms 的模板,位于http://asiatbg.com/1/if,他的妻子想要编辑网站。换句话说,这个模板就是我所说的“非常干净,非常纯粹,非常吸引人”。相信我 - 我印象深刻。
向所有人致敬。
Zarko
我在 IE8 中试过,使用 ajax 和动画加载新页面后,字母显示得不太好。字母看起来变形了。
有人遇到过这个问题吗?
非常棒的布局!感谢您创建它。
我可以将它用于像为 themeforest 创建的主题这样的市场产品吗?