Spry v1.6 下载（含源文件Demo演示文件） 展示 source.html源代码
- 下载整个 - 类型：.html文件
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&!-- Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. --&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=ISO-8859-1& /&
&title&Products Demo Source&/title&
&link href=&../../css/screen.css& rel=&stylesheet& type=&text/css& /&
&body id=&codesample&&
&div id=&wrap&&
&h1&Products Demo Source&span class=&return&&&a href=&../index.html&&Back to Demos&/a&&/span&&span class=&demo&&&a href=&index.html&&Return to Products Demo&/a&&/span& &/h1&
&div class=&sample&&
&pre class=&codeSample&&
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
Copyright (c) 2006. Adobe Systems Incorporated.
All rights reserved.
The trademarks, logos, and service marks (&Marks&) displayed in this sample
application are the property of Adobe or other third parties. You are not
permitted to use the Marks without the prior written consent of Adobe or such
third party that may own the Marks. Adobe and the Adobe logo are trademarks of
Adobe Systems Incorporated.
For a current list of Adobe's Marks, as well as certain third-party Marks,
please refer to trademark information. (/misc/trademarks.html)
&html xmlns=&http://www.w3.org/1999/xhtml& &span class=&highlightedcode&&xmlns:spry=&/spry&&/span&&
&meta http-equiv=&Content-Type& content=&text/ charset=iso-8859-1& /&
&title&Products Demo&/title&
&span class=&highlightedcode&&&script type=&text/javascript& src=&../../includes/xpath.js&&&/script&
&script type=&text/javascript& src=&../../includes/SpryData.js&&&/script&
&script type=&text/javascript& src=&../../includes/SpryNestedXMLDataSet.js&&&/script&&/span&
&script type=&text/javascript& src=&../../widgets/accordion/SpryAccordion.js&&&/script&
&script type=&text/javascript&&
&span class=&highlightedcode&&var dsProducts = new Spry.Data.XMLDataSet(&products.xml&, &products/product&);&/span&
&span class=&highlightedcode&&var dsProductFeatures = new Spry.Data.NestedXMLDataSet(dsProducts, &features/feature&);&/span&
&link href=&../../css/screen.css& rel=&stylesheet& type=&text/css& /&
&noscript&&h1&This page requires JavaScript. Please enable JavaScript in your browser and reload this page.&/h1&&/noscript&
&div id=&wrap&&
& & & & &div id=&header&&
& & & & & & & & &h1&Products Demo&span class=&return&&&a href=&../index.html&&Back to Demos&/a&&/span&&span class=&source&&&a href=&source.html&&View Source &/a&&/span&&/h1&
& & & & &/div&
& & & & &div &span class=&highlightedcode&&spry:region=&dsProducts&&/span& id=&content&&
& & & & & & & & &table id=&products&&
& & & & & & & & & & & & &caption&
& & & & & & & & & & & & Adobe Software
& & & & & & & & & & & & &/caption&
& & & & & & &tbody&
& & & & & & & & & & & & &tr&
& & & & & & & & & & & & & & & & &th scope=&col& &span class=&highlightedcode&&spry:sort=&name&&/span&&Product&/th&
& & & & & & & & & & & & & & & & &th scope=&col& &span class=&highlightedcode&&spry:sort=&category&&/span&&Category&/th&
& & & & & & & & & & & & &/tr&
& & & & & & &/tbody&
& & & & & & & & & & & & &tbody &span class=&highlightedcode&&spry:repeatchildren=&dsProducts&&/span& &span class=&highlightedcode&&spry:choose=&choose&&/span&&
& & & & & & & & & & & & & & & & &tr &span class=&highlightedcode&&spry:when=&{ds_RowID} == {ds_CurrentRowID}&&/span& class=&&span class=&highlightedcode&&{ds_EvenOddRow}&/span&& &span class=&highlightedcode&&spry:setrow=&dsProducts&&/span& &span class=&highlightedcode&&spry:hover=&rowHover&&/span& &span class=&highlightedcode&&spry:select=&rowSelected&&/span& &span class=&highlightedcode&&spry:selected=&selected&&/span&&
& & & & & & & & & & & & & & & & & & & & &td&&span class=&highlightedcode&&{name}&/span&&/td&
& & & & & & & & & & & & & & & & & & & & &td&&span class=&highlightedcode&&{category}&/span&&/td&
& & & & & & & & & & & & & & & & &/tr&
& & & & & & & & & & & & & & & & &tr &span class=&highlightedcode&&spry:default=&default&&/span& class=&&span class=&highlightedcode&&{ds_EvenOddRow}&/span&& &span class=&highlightedcode&&spry:setrow=&dsProducts&&/span& &span class=&highlightedcode&&spry:hover=&rowHover&&/span& &span class=&highlightedcode&&spry:select=&rowSelected&&/span&&
& & & & & & & & & & & & & & & & & & & & &td&&span class=&highlightedcode&&{name}&/span&&/td&
& & & & & & & & & & & & & & & & & & & & &td&&span class=&highlightedcode&&{category}&/span&&/td&
& & & & & & & & & & & & & & & & &/tr&
& & & & & & & & & & & & &/tbody&
& & & & & & & & &/table&
& & & & &/div&
& & & & &div id=&sidebar&&
& & & & & & & & &p &span class=&highlightedcode&&spry:detailregion=&dsProducts&&/span& id=&boxshot&&&img src=&&span class=&highlightedcode&&{boximage}&/span&& alt=&product box shot& width=&238& height=&130& /&&/p&
& & & & & & & & &div id=&Acc1& class=&Accordion&&
& & & & & & & & & & & & &div class=&AccordionPanel&&
& & & & & & & & & & & & & & & & &div class=&AccordionPanelTab&&
& & & & & & & & & & & & & & & & & & & & &h3&Product Overview&/h3&
& & & & & & & & & & & & & & & & &/div&
& & & & & & & & & & & & & & & & &div &span class=&highlightedcode&&spry:detailregion=&dsProducts&&/span& class=&AccordionPanelContent&&
& & & & & & & & & & & & & & & & & & & & &div&&span class=&highlightedcode&&{desc}&/span&&/div&
& & & & & & & & & & & & & & & & &/div&
& & & & & & & & & & & & &/div&
& & & & & & & & & & & & &div class=&AccordionPanel&&
& & & & & & & & & & & & & & & & &div class=&AccordionPanelTab&&
& & & & & & & & & & & & & & & & & & & & &h3&New Features &/h3&
& & & & & & & & & & & & & & & & &/div&
& & & & & & & & & & & & & & & & &div &span class=&highlightedcode&&spry:region=&dsProductFeatures&&/span& class=&AccordionPanelContent&&
& & & & & & & & & & & & & & & & & & & & &div&
& & & & & & & & & & & & & & & & & & & & & & & & &ul&
& & & & & & & & & & & & & & & & & & & & & & & & & & & & &li &span class=&highlightedcode&&spry:repeat=&dsProductFeatures&&/span&&&span class=&highlightedcode&&{feature}&/span&&/li&
& & & & & & & & & & & & & & & & & & & & & & & & &/ul&
& & & & & & & & & & & & & & & & & & & & &/div&
& & & & & & & & & & & & & & & & &/div&
& & & & & & & & & & & & &/div&
& & & & & & & & &/div&
& & & & &/div&
& & & & &p class=&clear&&&/p&
&script type=&text/javascript&&
var Acc1 = new Spry.Widget.Accordion(&Acc1&);
- 下载整个
相关源码/软件：
- Rialto (Rich Internet Application Toolkit)是基于Ajax的...
- 一套基于Ext2.0与Prototype联合开发的开源的JavaScript Jabber Mess...
- JavaScript 图片无底洞展示效果，顺着窗口看进去，会无限放大下去，直到把多个的图片展示完成，...
- 这是一套基于jQuery 的带缩图图片滚动切换效果，目前有不少大网站在用本款效果。简要介绍一下，这个...
- 国外的JavaScript相册，少量代码需要PHP程序支持。整个相册感觉很精致、小巧，打开后看不到什...
- jQuery s3Slider 2种形式的图片切换实例，这两个图片切换的转场特效都是渐入渐出，这个你...
- Tickbox 是一款基于 jQuery的图片展示特效插件，原插件由国外开发，后经legal翻译，现...
- firstebox开发的一个用来展示图片的特效插件，具备图片放大显示的相册效果，功能和thickbo...
- 带有菜单导航的JavaScript相册，是一个完整的实例包，有许多图片，因此压缩包比较大。　...
- jQuery mbGallery 专辑相册（支持自动播放），跟FLASH相册很相似，jQuery相册...
- 粒子生成系统Delphi实例，可生成瀑布、星空、喷泉、射线等样式的粒子动态图，个别还挺逼真，本程序虽...
- 一款由Delphi独立开发的足彩缩水算法，具有国内同类软件中最高的压缩率，delphi7开发 ，源文...
- ESBDates v3.0，一款超全的Delphi日期/时间处理函数库，ESB出品的函数库，包括世界...
- 一款基于Delphi的电子提醒簿软件，包含的功能主要有日程提醒、电子闹钟、报时提醒等，参数设置做的不...
- AES Interface Unit 加密算法接口演示程序，支持 128 / 192 / 256 位...
- 试写的Delphi照相（抓图）小软件，根据我的设想而做的，不怎么好，有些功能还没有实现，可以开启摄像...
- 主要用于刷新FXJ的大盘报价表，没有实时接收或接口补数的用户适用，请先下载和导入FXJ当天的日线数据...
- Delphi人事系统，SQL实例版，按F2先登录服务器，功能比较单一，适合作一个小范例来参考，在de...
- 关于Windows NT系统用户的建立，删除，禁用等操作。在Delphi7下直接编译就行了。它可设定...
- 点击按钮会枚举系统以下特权：　　SeChangeNotifyPrivilege 跳过遍历检查...望书阁：没有弹窗广告 小说免费阅读
欢迎您，[]或[]
无限YY(原名:Y行天下) 全文阅读
小说类别&小说作者&小毛小说状态&连载中收 藏 数&17全文长度&245287字最后更新&
总点击数&4549本月点击&47本周点击&23
总推荐数&16本月推荐&5本周推荐&0
/g,'\n'));}});">加入书架/g,'\n'));}});">推荐本书
通告 ：下载无限YY(原名:Y行天下)txt全集第九书库高速下载完全免费！
注意 ：本站小说无限YY(原名:Y行天下)TXT文本只供测试，不作商业用途，下载后请二十四小时后删除；
&&&&最近章节：
内容简介：
&&&&&a href=&javascript:void(0)& onclick=&moredesc(2);&&&/a&&/li&
&&&&&li&作者标签：&span class=&green&&&/span&
&&&&&li class=&button2 white&&
&&&&&a href=&www.jinbang.org&&点此阅读 &/a&&a href=&www.jinbang.org/modules/article/addbookcase.php?bid=19616&&收藏此书 &/a&
&&&&&a href=&www.jinbang.org/modules/article/uservote.php?id=19616&&我要推荐......
&&&&书友分享最新章节：第一百三十八章 妖精猎人
&&&&喜欢本书，请支持作者，点击页面右边的分享按钮，分享一下吧！望书阁提醒：读书三件事－&b&收藏、推荐 、分享&/b&！
&&&&关键字：
[]&&& []&&& 无限YY(原名:Y行天下)评论
顶顶顶顶顶顶顶，写很和我胃口作者： -发表于：10-24 12:39
不错作者： -发表于：07-14 13:08
您的评论内容(请勿灌水影响其他书友阅读)作者： -发表于：07-14 13:08
好作者： -发表于：04-22 00:35
发表评论：
验证码： &
望书阁没有弹窗广告，所有小说都能免费阅读。找好看的小说网站，就到望书阁。
Copyright & 2011 () All Rights Reserved.HTML精确定位:scrollLeft,scrollWidth,clientWidth,offset_小组_ThinkSAAS
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offset
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offset
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
　　以上主要指IE之中，FireFox差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
　　测试代码：
CODE:[Copy to clipboard]&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &&&
&html xmlns=&& lang=&gb2312&&
&title& 代码实例：关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较 &/title&
&meta http-equiv=&content-type& content=&text/ charset=gb2312& /&
&meta name=&author& content=&枫岩,CnLei.y.&&
&meta name=&copyright& content=&& /&
&meta name=&description& content=&关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较& /&
&style type=&text/css& media=&all&&
body {font-size:14}
a,a:visited {color:#00f;}
#Div_CnLei {
height:200
padding:10
border:10px solid #
background:#
font-size:12
#Div_CnLei p {margin:0;padding:10background:#}
&script type=&text/javascript&&
function Obj(s){
return document.getElementById(s)?document.getElementById(s):s;
function GetClientWidth(o){
return Obj(o).clientW
function GetClientHeight(o){
return Obj(o).clientH
function GetOffsetWidth(o){
return Obj(o).offsetW
function GetOffsetHeight(o){
return Obj(o).offsetH
&p&点击下面的链接:&/p&
&div id=&Div_CnLei&&
&p&&a href=&javascript:alert(GetClientWidth('Div_CnLei'));&&GetClientWidth();&/a& &a href=&javascript:alert(GetClientHeight('Div_CnLei'));&&GetClientHeight();&/a&&/p&
&p&&a href=&javascript:alert(GetOffsetWidth('Div_CnLei'));&&GetOffsetWidth();&/a& &a href=&javascript:alert(GetOffsetHeight('Div_CnLei'));&&GetOffsetHeight();&/a&&/p&
&div id=&Description&&
&p&&strong&IE6.0、FF1.06+：&/strong&&br /&
clientWidth = width + padding = 300+10×2 = 320&br /&
clientHeight = height + padding = 200+10×2 = 220&br /&
offsetWidth = width + padding + border = 300+10×2+10×2= 340&br /&
offsetHeight = height + padding + border = 200+10×2+10×2 = 240&/p&
&p&&strong&IE5.0/5.5：&/strong&&br /&
clientWidth = width - border = 300-10×2 = 280&br /&
clientHeight = height - border = 200-10×2 = 180&br /&
offsetWidth = width = 300&br /&
offsetHeight = height = 200&/p&
用户评论(0)
喜欢这个帖子的用户
加载中......
开发技术学习小组列表
PHP开发框架
缓存Memcache
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
手机客户端
ThinkSAAS接收任何功能的Iphone(IOS)和Android手机的客户端定制开发服务
让ThinkSAAS更好，把建议拿来。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
皮肤名称：Stop Beating
适用版本：PJBlog3_v3.0.6.170（要修改源码），PJBlog2&3
适用模式：全静态，半静态，全动态（完成修改后请 初始化数据）
发布时间：
原皮肤地址：
移植作者：威言威语
截图预览：见下↓
使用说明：1、适应的分辨率：最佳：
2、适应的浏览器：IE6、IE7、FireFox、Opera、Maxthon、Safari 等
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
这个是界面是我很早之前看到的，从看到他就有一种冲动，想仿到PJBlog上面来。
第一次看到的时候有点没有想明白它是怎么样布局的，因为开始我保存图片的发现背景有2个部分组成，左边的橙色背景和右边的深绿色背景，我就想如何在一个层上面定义2个背景，而且是从中间向两边repeat展开。
然后就一直想PJBlog上面能否定义，Google也没有我想的定义2个背景的，没有研究起来，心里很不舒服。
开始也想过用一个很大的背景来类似的表现，但是现在的分辨率都很大，如果在做个超大的背景的话，加载就会很慢，影响博客的速度。
某一天再次打开，查看源代码，突然发现了什么，原来如此。
一直以来已经习惯了DIV+CSS，而忽略的表格的威力，而恰恰这里他用到了表格，将背景分为3个部分，左中右，然后分别定义。然后开始对PJ动手术了，也将PJ分为3个部分，然后CSS定义，成功了，我很是开心。
接下来就相当的迅捷了，这套皮肤意境还是很不错了，适合一些写心情的博主使用。为了达到高仿的目的，修改的小日历，搜索样式，保持与原来的类似，底部的黑色板块我用来放置了版权信息。
下面讲解使用方法：
第一、修改header.asp和footer.asp。
打开header.asp，找到
&a href=&javascript:history.go(-1)& accesskey=&z&&&/a&
在其后面添加
&table border=&0& width=&100%& cellpadding=&0& cellspacing=&0&&
&td id=&weisayleft&&&&/td&
&td id=&weisaycenter&&
打开footer.asp，找到
在其前面加上
&td id=&weisayright&&&&/td&
如果你用的全静态，下面还需要做一步（全动态和半静态不用做），就是打开Template文件夹下的static.htm。
&a href=&javascript:history.go(-1)& accesskey=&z&&&/a&
在其后面添加
&table border=&0& width=&100%& cellpadding=&0& cellspacing=&0&&
&td id=&weisayleft&&&&/td&
&td id=&weisaycenter&&
在其前面加上
&td id=&weisayright&&&&/td&
第二、搜索框的修改，并将其设置到侧边第一个。
侧栏新建一模块（不要设置模块名称，只填标识），编辑模块插入一下代码
&div id=&search&&
id=&searchform&
action=&search.asp&&
&input type=&text& value=&威言威语...& name=&SearchContent& id=&s& onfocus=&if(this.value=='威言威语...')this.value=''& onblur=&if(this.value=='')this.value='威言威语...'& /&
&input type=&submit& id=&searchsubmit& value=&& /&
第三、目录的设置，由于这套皮肤没有设置顶部导航栏，所以必须将侧边栏的目录导航往上面调整，设置到侧边栏的第二个（如果第一个不修改的话，设置到第一个），并取消首页独享。
第四、小日历的修改，修改好了要重新生成数据库，我的小日历是在v300上修改的，当然了，PJBlog3_v3.0.6.170也是可以修改的。实现了全动态，半静态，全静态。
1、修改common/funciton.asp。找到
DateToStr=Right(Year(DateTime),2)&DateMonth
在下面加上
DateToStr=Shortmonth(DateMonth-1)
2、使用全动态模式下，修改class/cls_default.asp和class/cls_article.asp。
在class/cls_default.asp里找到
&div class=&ContentLeft&&&/div&
&DIV class=indexdata&&div class=&ContentLeft&&&p class=&monthB&&&%=DateToStr(webLogArr(4,PageCount),&m&)%&&/p&&p class=&dateA&&&%=DateToStr(webLogArr(4,PageCount),&d&)%&&/p&
&/div&&/div&
在class/cls_article.asp里找到
&div class=&ContentLeft&&&/div&
&DIV class=indexdata&&div class=&ContentLeft&&&p class=&monthB&&&%=DateToStr(log_ViewArr(9,0),&m&)%&&/p&&p class=&dateA&&&%=DateToStr(log_ViewArr(9,0),&d&)%&&/p& &/div&&/div&
3、使用半静态模式，修改class/cls_logAction.asp、Template/ArticleList.asp和Template/Article.asp。
在class/cls_logAction.asp找到
Temp1 = Replace(Temp1, &&$log_PostTime$&&, DateToStr(log_View(&log_PostTime&), &Y-m-d&))
注意，有两处，改第一处，在下面加上
Temp1 = Replace(Temp1, &&$log_PostTime_1$&&, DateToStr(log_View(&log_PostTime&), &m&))
Temp1 = Replace(Temp1, &&$log_PostTime_2$&&, DateToStr(log_View(&log_PostTime&), &d&))
Temp2 = Replace(Temp2, &&$log_PostTime$&&, DateToStr(log_View(&log_PostTime&), &Y-m-d&))
在下面加上
Temp2 = Replace(Temp2, &&$log_PostTime_1$&&, DateToStr(log_View(&log_PostTime&), &m&))
Temp2 = Replace(Temp2, &&$log_PostTime_2$&&, DateToStr(log_View(&log_PostTime&), &d&))
在Template/ArticleList.asp找到
&div class=&ContentLeft&&&/div&
注意，有两处，都替换成
&DIV class=indexdata&&div class=&ContentLeft&&&p class=&monthB&&&$log_PostTime_1$&&/p&&p class=&dateA&&&$log_PostTime_2$&&/p& &/div&&/div&
在Template/Article.asp找到
&div class=&ContentLeft&&&/div&
&DIV class=indexdata&&div class=&ContentLeft&&&p class=&monthB&&&$log_PostTime_1$&&/p&&p class=&dateA&&&$log_PostTime_2$&&/p& &/div&&/div&
4、全静态模式下修改跟半静态模式相似，修改class/cls_logAction.asp、Template/ArticleList.asp和Template/static.htm。
在class/cls_logAction.asp找到
Temp1 = Replace(Temp1, &&$log_PostTime$&&, DateToStr(log_View(&log_PostTime&), &Y-m-d&))
注意，有两处，改第二处，在下面加上
Temp1 = Replace(Temp1, &&$log_PostTime_1$&&, DateToStr(log_View(&log_PostTime&), &m&))
Temp1 = Replace(Temp1, &&$log_PostTime_2$&&, DateToStr(log_View(&log_PostTime&), &d&))
Temp2 = Replace(Temp2, &&$log_PostTime$&&, DateToStr(log_View(&log_PostTime&), &Y-m-d&))
在下面加上
Temp2 = Replace(Temp2, &&$log_PostTime_1$&&, DateToStr(log_View(&log_PostTime&), &m&))
Temp2 = Replace(Temp2, &&$log_PostTime_2$&&, DateToStr(log_View(&log_PostTime&), &d&))
分别在Template/ArticleList.asp和Template/static.htm中找到
&div class=&ContentLeft&&&/div&
&DIV class=indexdata&&div class=&ContentLeft&&&p class=&monthB&&&$log_PostTime_1$&&/p&&p class=&dateA&&&$log_PostTime_2$&&/p& &/div&&/div&
我现在用的v300修改版，半静态。我的小日历也是按照上面修改来了，你可以试试。
当然了，想用这套皮肤话，有些人不希望修改那么多，第一步，第三步必须修改。第二步和第四步可以改可以不改。
本文固定链接:
【上一篇】【下一篇】
您可能还会对这些文章感兴趣！