显示标签为“技术问题”的博文。显示所有博文
显示标签为“技术问题”的博文。显示所有博文

利用纯CSS创建折线图


不得不说,今天我所看到的这个东西不仅仅是让我感觉有所发现,更深刻的感觉是'吃惊',以前我推荐过几个通过jQuery或者其他js插件实现的表效果,当然也有通过flash实现的.但是今天我们要看到的是只利用CSS和普通的Html代码时间的折线图效果.
当然了,这个东西用来欣赏或者膜拜一下作者也就可以了,在使用上虽然简单,但是功能太过于单一.
好了,下面上一张效果图:
..

演示地址:演示
下载地址:下载
发布地址:点击进入

 (阅读全文...)

0 留言

ajax链接检查代码Ajaxed Link checker

今天无意中看到这样一个效果,感觉挺有趣的,如果基于他做一个友情链接的话应该是挺酷的,这个插件可以在页面打开后对页面内的链接进行可连接性检查,如果连接不到会在页面中显示出来.

如下图:



演示地址:演示
代码:直接在演示页面点右键->查看页面源代码即可 (阅读全文...)

0 留言

40多个Ajax,DHTML和Javascript应用技术

原文: Best of Ajax, Dhtml and Javascript- part1
翻译: 帕兰
感谢原作者的收集,并且感谢帕兰的翻译,下面是文章,点击标题或者阅读全文进入查看.


本文收集了Ajax的滚动技术，渐变效果，实时快速编辑，互动元素，视觉效果，动画，幻灯片，手风琴，评级以及更多的javascripts例子，你可以从中找到很多有用的元素，作用于你的AJAX的Web应用。
Scrolling Techniques 滚动技术
1) Ajax dynamic scrolling pages-Ajax动态滚动页面

这个脚本从你的服务器中载入内容并插入一个HTML空白元素(比如DIV标签)到你的页面中。新的页面可以添加动态效果，脚本将向下滚动显示新页面的内容。

(2) Control.Scroller- Control.Scroller是一个基于Prototype和 script.aculo.us JavaScript 框架的脚 本. 它在script.aculo.us使用Control.Slider并且进行扩大, 使用你可以控制你一个内容容器，对它进行裁剪和滚动。

(3) Text Scroller-文本滚动器。这是另一个可以通过鼠标的滑动来实现文本滚动的脚本。

(4) A Slider DataPager with Dynamic Tooltips- 这是一个小小的Smooth Javascript滚动脚本。

(
渐变效果
5) CSS Text Gradient- CSS文本渐变。文本渐变是简单的CSS技巧，允许你为网页中重要的标题字体添加渐变效果，而仅仅需要使用CSS和一张PNG图片。

(6) CSS Gradient Text Effect- 同样是使用CSS和一张PNG图片实现文本的渐变效果。之前帕兰有专门做过介绍。

(
AJAX 实时编辑
7) Instant Edit－实时编辑

(8 ) Digg Style Update Characters While Typing-类似Digg风格的字符输入限制

教你如何实现类似Digg风格的实时显示文本输入的字符数，并且一旦超过你设置的字符限制，将不能再继续输入任何字符。

(9) Easy AJAX inline text edit 2.0-一个简单的Ajax内文编辑应用。让你实时编辑一个文本区域而且不需要使用提交按钮。

(
图像特效
10) SWF Image Replacement -使用JavaScript和Flash, swfIR 解决了一些在CSS和标准的HTML应用中的设计局限, 同时仍然符合标准的设计概念。

(11) Style Your Image Links-这个优秀的脚本可以让你为图片添加悬浮特效，当鼠标悬浮在图片时，出现一个互动作用的点击提示。

(12) Loupe- 可以让你添加一个Loupe也就是放大镜到你网页上的图片中。它使用一个简单的javascript脚本，这意味着你可以保持你的你的代码简洁，并且它支持大多数的主流浏览器。

(
AJAX 星形评级
13) Starbox: star rating script for prototype -Starbox可让你只需要一张PNG图片就创建一个简单的星形评级盒 . 这个脚本基于Prototype javascript框架.

(14) AJAX Star Rating-一个非常小巧但却非常实用的星级评级系统。

(15) Rabid Ratings v1.2-RabidRatings is a simple but eye-caching ratings system which allows users to your website to rate virtually anything.

(
Accordions－手风琴效果
16) Simple Javascript Accordions-一个非常轻量级的手风琴效果Javascript脚本，很容易使用和整合到页面中去。 不需要任何Javascript框架并且支持大多数主流浏览器。

(17)Accordion- 来自RapidWeaver的一个插件. 它从你的网页文本和图像中创建一个动态的交互菜单驱动。

(
SlideShows and Galleries－幻灯片和画廊应用
18)MooFlow- MooFlow是一个用于Gallery画廊的Javascript, 它创建出来的效果很像Apple的iTunes.

(19)Flickrshow- 为你提供最简单的方法在你的网页上显示来自Flickr的相册。

(
Manipulating Fields －处理区域
20) TextboxList meets Autocompletion-基于Mootools脚本库，在搜索区域中使用自动提示和自动完成功能，允许用户增加或删除词句。

(21)Toggler v0.1-这是一个模仿桌面系统功能应用的Javascript, 当你点击Chechbox中的一个Lable的时候，如果你保持鼠标按下并移动鼠标，就可以批量选择Lable。

(
Drag & Drop －拖拽
22)Drag & Drop Sortable Lists －可拖拽的分类菜单

(23) Drag & Drop - 可实现图像和多层拖拽

(
Tooltips 提示工具
24) How to add advanced tooltips on your photo-这篇文章向你介绍如何使用 Taggify widget 来提高你博客的功能，主要是为你的网页上的图片添加一个弹出提示。

(25)Nice titles- 可以让你的链接标题显示的漂亮，更重要的是，它在标题里显示链接和URL地址。

(26)Bubble Tooltips- Bubble Tooltips通过一小个CSS和 javascript，为你的任何页面链接分创建一个花俏的弹出效果样式。

(
Date, Time & Calendars 日期，时间和日历
27) The DHTML / JavaScript Calendar- 显示一个弹出或单调和DHTML日历，拥有相配的日期和时间选择样式。

(28) DateJs- Datejs是一个开源的 JavaScript日期库。

(29) JS Calendar- 这是一个兼容各大浏览器的Javascript日历.

(
AJAX poller－Ajax投票系统
30) AJAX poller script- 这是一个简单的Ajax投票演示. 它使用Ajax(Asyncron Javascript 和XML) 发送投票到你的服务器.，并且实时返回处理的投票结果到你的浏览器中。

(31) How To Make an AJAX Poll

这是一篇相关文章，主要介绍如何创建一个Ajax投票系统

(
Must See Examples - 应该了解的一个实例
32) ShadedBorder -JavaScript实现的圆角阴影效果

点击查看 demo

(33) Change Text Size On Click With Javascript-使用一个小小的 JavaScript 脚本和HTML实现文本字体大小的改变。

(34) Fancy Form -一个强大的checkbox复选框替换脚本，它提供HTML元素所不能达到的灵活性。

点击查看demo演示

(35) Ajax Domain Search- 实时搜索检查你的域名(.com, .net, .org, .info, .biz, .us).

(36) Pushing a shopping cart -一个随浏览器移动的购物车系统应用。好处就是随时悬浮，跟随用户。

(37) Timeline- Timeline时间线是一个DHTML-基于AJAXy的日期事件形象化显示的widget. 它的移动效果有点像Google Maps。

(38) Prototype Window- 这个脚本javascrip允许你添加你窗口到HTML页面中.

(39) Ajax Chess widget-这是一个国际象棋的widget，它使用Aajx从服务器中分析响应国际象棋的动作。

(40) ClickHeat | Clicks heatmap- ClickHeat 在一个页面中加入Heatmap, 显示炎热和寒冷的点击地带.

(41) ScrolLovers- Scrollovers提供一种简便快捷的方法增强你的网页能力, 它能让用户来控制网页中的元素效果。比如使用一个色盘来调整网页中特定字符的颜色。

(42) df Javascript Smooth Scroll -使用一个浮动块来调整内容的显示，并弹出详细的提示信息。



 (阅读全文...)

0 留言

在asp.net中利用js简单实现点击后按钮锁定,防止重复点击


    我们经常会遇到这种情况,你制作了一个搜索数据的页面,但是数据的检索过程很慢,进行搜索的人等的不耐烦了,就总是反复的点击,这样造成服务器资源的浪费,你又不想再服务器端进行判断,这样最好的就是能在客户端实现这个判断过程,并且锁定"提交"的按钮.
下面是使用方法:
前台代码:

<script  langugage="javascript">
function btnDisabled()
{
setTimeout('document.form1.btnCx.disabled=true;',100);//form1代表按钮所在的form,btnCx代表按钮的id.
//setTimeout('document.form1.btnCx.disabled=false;',2000); //这段代码的意思是在两秒后将按钮解锁,
}
</script>

后台代码:
        this.btnCx.Attributes.Add("onclick", "javascript:btnDisabled()");//这段代码中binCx表示按钮的id,这段代码请加入到Page_Load里面.
(阅读全文...)

0 留言

基于jQuery的表单美化插件jNice


很漂亮的表单美化插件,当然了如果你对颜色不满意,下载后可以通过更改CSS和图片的颜色来实现,下载了自己看看吧很简单如果实在不知道如何修改颜色的话就给我留言,有留言必定回.

上张图片让大家看看:


由于官方没有教程,这里简单的写点东西,希望能对菜鸟有些帮助,如果是比我强的朋友,不要笑话.

一.下载下面提供的插件包

二.在页面加入下列调用代码(具体文件位置自己定义):

1.页面的基本定义调用base.css,这个里买你的代码很简单,也可以放到自己的页面定义CSS里面
<link href="/jquery/inc/style/base.css" 
rel="stylesheet" type="text/css" />
2.表单的CSS定义,定义了表单的样式,其中有颜色等定义,注意除了这里还有部分颜色是图片实现的.
<link href="jNice.css" rel="stylesheet" type="text/css" />
3.jQuery核心代码,也可以将这个js文件下载到本地进行调用.
<script type="text/javascript" src="http://code.jquery.com/
jquery-latest.pack.js"><script>
4.jNice的核心代码,这里面写了一些用来动态定义表单样式的js代码,高手可以研究一下.
<script type="text/javascript" src="
jquery.jNice.js"><script>
三.将加入你的form标签,例如:
<form class="jNice">

四.下拉列表值插入问题
正常来讲这样就结束了,应该可以正常使用了,但是如果你想用js代码向表单的下拉列表里面插入内容,用正常的语句就无法完成了,不过不用担心,制作这个美化插件的高手当然不会忘记这个问题,所以下面是解决方案.

你可以用以下代码来代替你现在使用的向下拉列表插入项目的代码.
//下面是用来定义你要插入内容的下拉列表的ID, 其中#select2代表你要插入值的下拉列表的ID
var element = $('#select2')[0];
//下面是内容插入代码,其中"My Option"是下拉列表的text值,"123"是value值
var myNewOption = new Option("My Option", "123", true);
element.options[element.options.length] = myNewOption;
$.jNice.SelectUpdate(element);

好了,到这里基本结束,由于时间仓促,主要是我比较懒,这里就不过于详细的介绍了
,如果你有什么不明白的地方,可以在下面留言,我一定会尽快回复.
演示地址:http://www.whitespace-creative.com/jquery/jNice/
下载地址:http://plugins.jquery.com/project/jNice
 (阅读全文...)

0 留言

无刷新表格排序(同样适用于GridView)


下载本教程(含sorttable.js脚本)
原文:http://www.kryogenix.org/code/browser/sorttable/
中文原文:创建一个Ajax效果的表格排序

翻译：帕兰

一些数据这几天我一直在寻找一个好的和简单的方式来排序数据转化为一个表格，一个简单的点击表头，我发现这个有趣的框架：来自Stuart Langridge的sorttable.js. 。本教程讲述了如何使用它来实现这种Ajax效果的数据表格：

Hobo ps:补充一句,这种方法同样适用于GridView,这两天我就是在做.net的数据页面的时候找到了这个插件,的确很方便,超级简单,但是在我使用的过程中这个效果和GridView表头固定表体滚动的那部分冲突了,在设置了表头固定后再滚动一小段并排序会导致表头消失..这个问题还在解决中..

第一步: 调用sorttable.js
创建一个新的页面并在 <head>标签里面调用Sorttable.js:

<script src=“sorttable.js” type=“text/javascript”></script>

第二步: HTML代码和表格排序的设计
创建一个表格并且给表格指定一定Class属性“sortable”:

<table class=“sortable“> … </table>

如果在同一页面有多个表格，你可以把这个Class属性添加到所有你想进行排序效果的表格里面。 下面是一个普通表格的演示，包含表头，单元格等基本元素:

<table class=“sortable”>
<!– Table Header –>
<thead>

<tr>
<th>Company</th>
<th>Ticker</th>
</tr>

</thead>
<!– Tabel body–>
<tbody>

<tr>
<td>Apple Inc</td>
<td>AAPL</td>
</tr>

<tr>
<td>GoogleInc</td>
<td>GOOG</td>
</tr>

</tbody>

<!– Tabel footer–>
<tfoot>

<tr>
<td>Total</td>
<td> 00.00</td>
</tr>

</tfoot>
</table>
在上面这个代码示像中，当你点击”Company”或是”Ticker”时，下面的<tbody>标签 将进行排序。

第三步: 使用PHP填充表格数据
你可以填充用服务器端语言如PHP数据填充到一个表格中，或是ASP也可以。下面是一个PHP的简单示例代码 :

<?php
// Include connection to your database
include(‘dbconnection.php’);
$getCompany_sql = ‘SELECT * FROM COMPANY‘;
$getCompany= mysql_query($getCompany_sql);?>

<table class=“sortable”>
<!– Table Header –>
<thead>

<tr>
<th>Company</th>
<th>Ticker</th>
</tr>

</thead>
<!– Tabel body–>
<tbody>
<?php while ($row = mysql_fetch_array($getCompany)) {?>
<tr>
<th><?php echo $row.['companyName'] ?></th>
<th><?php echo $row.['companyTicker'] ?></th>
</tr>
<?php } ?>
</tbody>

<!– Tabel footer–>
<tfoot>

<tr>
<td> … </td>
<td>…. </td>
</tr>

</tfoot>
</table>

下载本教程(含sorttable.js脚本)


(阅读全文...)

0 留言

用批处理解决IE不支持JavaScript等问题



    在工作中经常出现IE出错,某些网站点登陆按钮的时候无反应等问题.这里是在网上找到的方法,记录下来,以便以后使用,当然了也方便各位可能遇见同样问题的网友.

rem =====批处理开始========

regsvr32 actxprxy.dll
regsvr32 shdocvw.dll
Regsvr32 URLMON.DLL
Regsvr32 actxprxy.dll
Regsvr32 shdocvw.dll
regsvr32 oleaut32.dll
rundll32.exe advpack.dll /DelNodeRunDLL32 C:\WINNT\System32\dacui.dll
rundll32.exe advpack.dll /DelNodeRunDLL32 C:\WINNT\Catroot\icatalog.mdb
regsvr32 setupwbv.dll
regsvr32 wininet.dll
regsvr32 comcat.dll
regsvr32 shdoc401.dll
regsvr32 shdoc401.dll /i
regsvr32 asctrls.ocx
regsvr32 oleaut32.dll
regsvr32 shdocvw.dll /I
regsvr32 shdocvw.dll
regsvr32 browseui.dll
regsvr32 browseui.dll /I
regsvr32 msrating.dll
regsvr32 mlang.dll
regsvr32 hlink.dll
regsvr32 mshtml.dll
regsvr32 mshtmled.dll
regsvr32 urlmon.dll
regsvr32 plugin.ocx
regsvr32 sendmail.dll
regsvr32 comctl32.dll /i
regsvr32 inetcpl.cpl /i
regsvr32 mshtml.dll /i
regsvr32 scrobj.dll
regsvr32 mmefxe.ocx
regsvr32 proctexe.ocx mshta.exe /register
regsvr32 corpol.dll
regsvr32 jscript.dll
regsvr32 msxml.dll
regsvr32 imgutil.dll
regsvr32 thumbvw.dll
regsvr32 cryptext.dll
regsvr32 rsabase.dll
regsvr32 triedit.dll
regsvr32 dhtmled.ocx
regsvr32 inseng.dll
regsvr32 iesetup.dll /i
regsvr32 hmmapi.dll
regsvr32 cryptdlg.dll
regsvr32 actxprxy.dll
regsvr32 dispex.dll
regsvr32 occache.dll
regsvr32 occache.dll /i
regsvr32 iepeers.dll
regsvr32 wininet.dll /i
regsvr32 urlmon.dll /i
regsvr32 digest.dll /i
regsvr32 cdfview.dll
regsvr32 webcheck.dll
regsvr32 mobsync.dll
regsvr32 pngfilt.dll
regsvr32 licmgr10.dll
regsvr32 icmfilter.dll
regsvr32 hhctrl.ocx
regsvr32 inetcfg.dll
regsvr32 trialoc.dll
regsvr32 tdc.ocx
regsvr32 MSR2C.DLL
regsvr32 msident.dll
regsvr32 msieftp.dll
regsvr32 xmsconf.ocx
regsvr32 ils.dll
regsvr32 msoeacct.dll
regsvr32 wab32.dll
regsvr32 wabimp.dll
regsvr32 wabfind.dll
regsvr32 oemiglib.dll
regsvr32 directdb.dll
regsvr32 inetcomm.dll
regsvr32 msoe.dll
regsvr32 oeimport.dll
regsvr32 msdxm.ocx
regsvr32 dxmasf.dll
regsvr32 laprxy.dll
regsvr32 l3codecx.ax
regsvr32 acelpdec.ax
regsvr32 mpg4ds32.ax
regsvr32 voxmsdec.ax
regsvr32 danim.dll
regsvr32 Daxctle.ocx
regsvr32 lmrt.dll
regsvr32 datime.dll
regsvr32 dxtrans.dll
regsvr32 dxtmsft.dll
regsvr32 vgx.dll
regsvr32 WEBPOST.DLL
regsvr32 WPWIZDLL.DLL
regsvr32 POSTWPP.DLL
regsvr32 CRSWPP.DLL
regsvr32 FTPWPP.DLL
regsvr32 FPWPP.DLL
regsvr32 FLUPL.OCX
regsvr32 wshom.ocx
regsvr32 wshext.dll
regsvr32 vbscript.dll
regsvr32 scrrun.dll mstinit.exe /setup
regsvr32 msnsspc.dll /SspcCreateSspiReg
regsvr32 msapsspc.dll /SspcCreateSspiReg

rem =====批处理结束========

　　把上面保存为.bat文件后运行，不管提示什么一直确认下去，结束后重启，一切恢复正常．可以解决ie被破坏的很多问题，很管用！
(阅读全文...)

0 留言

Photoshop CS3 中文版教程106集 下载


首先是个人见解:这个教程在我认为是Photoshop入门和提高的最好的教程了,在网上看了很多不靠谱的教程之后还是感觉这个最实在,从各种工具讲起,如果以前对某些工具的时候有些淡忘的话可以用这个教程来巩固一下,如果从没有接触过Photoshop的话,看这个教程从头学起可以很快掌握.所以在深度论坛看到有人将这套教程打包提供下载了就尽快的下载下来并转发到这里,希望能给想要学习ps的朋友提供一些帮助.

作者:祁连山
教程简单介绍:
1.Photoshop CS3专家讲堂视频教程合集教程采用的是flash交互形式,大家可以通过教程下载练习素材,下载教程本身在本机观看,交互式学习.
2.提供好书介绍,给初学者介绍值得一看的好书,让大家有更多的选择.
3.改善了播放模式,当一个用户打开多个窗口同时下载多个教程时,可以先停止播放,让用户选择想看的教程,节省下载时间.
4.大幅提高教程的品质,没有任何噪音,让学习环境更好.
5.改善了教程文件结构,占用空间小,容易发布.
6.专人负责学习者作业的点评,以及帮助初学者学到实用的知识.



以下是目录:

第一章:软件概览     
1 Photoshop简介     2 软件界面概览     3 学习前的软件优化
4 位图图像，像素和矢量图像    
第二章:工具的基础使用    
5 建立新的图像     6 图像截取技术     7 搜索素材技巧
8 初识工具箱     9 初识选择区     10 规则选择工具组
11 不规则选择工具组     12 魔棒和快速选择工具     13 精细调整选区边缘
14 选择区的运算     15 移动工具选择层变换控件     16 多图层的对齐方法
17 多图层准确分布     18 利用自动对齐图层接片     19 裁剪图像
20 切片工具参考线切片法     21 编辑与划分切片     22 导出网页文件
23 污点修复画笔     24 修复画笔工具     25 修补工具
26 红眼工具     27 图章工具组     28 画笔工具
29 铅笔工具     30 颜色替换工具     31 历史记录画笔工具组
32 橡皮擦工具     33 模糊锐化和涂抹工具     34 加深减淡和海绵工具
35 渐变基础使用方法     36 渐变的五个模式     37 渐变编辑器
38 油漆桶工具     39 路径基础知识     40 创建基础形状
41 形状、路径和填充像素     42 钢笔工具基础用法     43 钢笔工具的扩展用法
44 基础路径变换改制法     45 字符工具基础用法     46 字符面板设置
47 段落面板设置     48 文字沿路径排版     49 用注释协同工作
50 吸管颜色取样器和标尺     51 抓手与放大镜工具     52 前景色与背景色
53 快速蒙版基础知识     54 例说快速蒙版     55 四种屏显模式
第三章:图层基础与操作技巧    
56 图层概述     57 图层复制新建与删除技巧     58 快速选择复制和链接层
59 图层锁定技巧     60 图层组     61 图层蒙版的使用方法
62 投影与内阴影样式     63 外发光和内发光样式     64 斜面和浮雕样式
65 光泽样式     66 叠加样式     67 例说描边样式
68 例说剪贴蒙版     69 填充层与扩展思维     70 智能对象与智能滤镜
71 颜色调整层            
第三章:通道基础知识    
72通道基础-是非观与黑白灰     73 颜色通道与Alpha通道     74 说通道-几个重要知识点
75 例说通道-制作选区     76 例说通道-合成收尾      
第四章:颜色模式    
77 颜色模式-灰度与位图     78 双色调模式     79 索引颜色模式
80 颜色模式-多通道     81 颜色模式-Lab     82 色光与颜料混合
83 颜色模式-RGB     84 颜色模式-CMYK     85 直方图
86 色阶调整     87 自动色阶对比度和颜色     88 曲线调整
89 色彩平衡     90 亮度对比度     91 黑白调整
92 色相饱和度     93 去色与灰度     94 匹配图像
95 颜色替换     96 可选颜色     97 通道混合器
98 渐变映射     99 照片滤镜     100 阴影高光
101 曝光度     102 反相     103 色调均化
104 阈值     105 色调分离     106 变化


文件大小:258.17 MB

下载地址: Rayfile网盘下载    纳米盘下载
(阅读全文...)

0 留言

Javascript - document对象详解

注:此文纯属笔记,不是我的总结,作者未知,转载到这里是个人觉得这篇东西比较重要,需要记录下来.

[web编程]document对象详解
document 文挡对象 - JavaScript脚本语言描述
---------------------------------------------------------------------
注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写
    否则会提示你一个错误信息 "引用的元素为空或者不是对象"
---------------------------------------------------------------------

对象属性
document.title              //设置文档标题等价于HTML的<title>标签
document.bgColor            //设置页面背景色
document.fgColor            //设置前景色(文本颜色)
document.linkColor          //未点击过的链接颜色
document.alinkColor         //激活链接(焦点在此链接上)的颜色
document.vlinkColor         //已点击过的链接颜色
document.URL                //设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate    //文件建立日期，只读属性
document.fileModifiedDate   //文件修改日期，只读属性
document.fileSize           //文件大小，只读属性
document.cookie             //设置和读出cookie
document.charset            //设置字符集 简体中文:gb2312
---------------------------------------------------------------------
常用对象方法
document.write()                   //动态向页面写入内容
document.createElement(Tag)        //创建一个html标签对象
document.getElementById(ID)        //获得指定ID值的对象
document.getElementsByName(Name)   //获得指定Name值的对象
document.body.appendChild(oTag)
---------------------------------------------------------------------

body-主体子对象
document.body                //指定文档主体的开始和结束等价于<body></body>
document.body.bgColor        //设置或获取对象后面的背景颜色
document.body.link           //未点击过的链接颜色
document.body.alink          //激活链接(焦点在此链接上)的颜色
document.body.vlink          //已点击过的链接颜色
document.body.text           //文本色
document.body.innerText      //设置<body>...</body>之间的文本
document.body.innerHTML      //设置<body>...</body>之间的HTML代码
document.body.topMargin      //页面上边距
document.body.leftMargin     //页面左边距
document.body.rightMargin    //页面右边距
document.body.bottomMargin   //页面下边距
document.body.background     //背景图片

document.body.appendChild(oTag) //动态生成一个HTML对象

常用对象事件
document.body.onclick="func()"           //鼠标指针单击对象是触发
document.body.onmouseover="func()"       //鼠标指针移到对象时触发
document.body.onmouseout="func()"        //鼠标指针移出对象时触发
---------------------------------------------------------------------
location-位置子对象

document.location.hash       // #号后的部分
document.location.host       // 域名+端口号
document.location.hostname   // 域名
document.location.href       // 完整URL
document.location.pathname   // 目录部分
document.location.port       // 端口号
document.location.protocol   // 网络协议(http:)
document.location.search     // ?号后的部分

documeny.location.reload()       //刷新网页
document.location.reload(URL)    //打开新的网页
document.location.assign(URL)    //打开新的网页
document.location.replace(URL)   //打开新的网页
---------------------------------------------------------------------
selection-选区子对象
document.selection
---------------------------------------------------------------------

images集合(页面中的图象)

a)通过集合引用
document.images              //对应页面上的<img>标签
document.images.length       //对应页面上<img>标签的个数
document.images[0]           //第1个<img>标签          
document.images[i]           //第i-1个<img>标签

b)通过nane属性直接引用
<img name="oImage">
document.images.oImage       //document.images.name属性

c)引用图片的src属性
document.images.oImage.src   //document.images.name属性.src

d)创建一个图象
var oImage
oImage = new Image()
document.images.oImage.src="1.jpg"
同时在页面上建立一个<img>标签与之对应就可以显示

<html>
<img name=oImage>
<script language="javascript">
    var oImage
    oImage = new Image()
    document.images.oImage.src="1.jpg"
</script>
</html>

<html>
<script language="javascript">
    oImage=document.caeateElement("IMG")
    oImage.src="1.jpg"
    document.body.appendChild(oImage)
</script>
</html>

----------------------------------------------------------------------

forms集合(页面中的表单)

a)通过集合引用
document.forms                  //对应页面上的<form>标签
document.forms.length           //对应页面上<form>标签的个数
document.forms[0]               //第1个<form>标签
document.forms[i]               //第i-1个<form>标签
document.forms[i].length        //第i-1个<form>中的控件数
document.forms[i].elements[j]   //第i-1个<form>中第j-1个控件

b)通过标签name属性直接引用
<form name="Myform"><input name="myctrl"></form>
document.Myform.myctrl          //document.表单名.控件名

c)访问表单的属性
document.forms[i].name          //对应<form name>属性
document.forms[i].action        //对应<form action>属性
document.forms[i].encoding      //对应<form enctype>属性
document.forms[i].target        //对应<form target>属性

document.forms[i].appendChild(oTag) //动态插入一个控件
-----------------------------------------------------------------------
<html>
<!--Text控件相关Script-->
<form name="Myform">
<input type="text" name="oText">
<input type="password" name="oPswd">
<form>
<script language="javascript">
//获取文本密码框的值
document.write(document.Myform.oText.value)
document.write(document.Myform.oPswd.value)
</script>
</html>
-----------------------------------------------------------------------
<html>
<!--checkbox,radio控件相关script-->
<form name="Myform">
<input type="checkbox" name="chk" value="1">1    
<input type="checkbox" name="chk" value="2">2    
</form>    
<script language="javascript">    
function fun(){    
   //遍历checkbox控件的值并判断是否选中    
   var length    
   length=document.forms[0].chk.length    
   for(i=0;i<length;i++){    
   v=document.forms[0].chk[i].value    
   b=document.forms[0].chk[i].checked    
   if(b)    
     alert(v=v+"被选中")    
   else    
     alert(v=v+"未选中")   
   }    
   }    
</script>     
<a href=# onclick="fun()">ddd</a>                     
</html>
-----------------------------------------------------------------------
<html>
<!--Select控件相关Script-->
<form name="Myform">
<select name="oSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>

<script language="javascript">
    //遍历select控件的option项
    var length
    length=document.Myform.oSelect.length
    for(i=0;i<length;i++)
    document.write(document.Myform.oSelect[i].value)
</script>

<script language="javascript">
    //遍历option项并且判断某个option是否被选中
    for(i=0;i<document.Myform.oSelect.length;i++){
    if(document.Myform.oSelect[i].selected!=true)
    document.write(document.Myform.oSelect[i].value)
    else
    document.write("<font color=red>"+document.Myform.oSelect[i].value+"</font>")  
    }
</script>

<script language="javascript">
    //根据SelectedIndex打印出选中的option
    //(0到document.Myform.oSelect.length-1)
    i=document.Myform.oSelect.selectedIndex
    document.write(document.Myform.oSelect[i].value)
</script>

<script language="javascript">
    //动态增加select控件的option项
    var oOption = document.createElement("OPTION");
    oOption.text="4";
    oOption.value="4";
    document.Myform.oSelect.add(oOption);
</script>
<html>
-----------------------------------------------------------------------
<Div id="oDiv">Text</Div>
document.all.oDiv                               //引用图层oDiv               
document.all.oDiv.style.display=""              //图层设置为可视
document.all.oDiv.style.display="none"          //图层设置为隐藏
document.getElementId("oDiv")                   //通过getElementId引用对象
document.getElementId("oDiv").style=""
document.getElementId("oDiv").display="none"
/*document.all表示document中所有对象的集合
只有ie支持此属性，因此也用来判断浏览器的种类*/

图层对象的4个属性
document.getElementById("ID").innerText   //动态输出文本
document.getElementById("ID").innerHTML   //动态输出HTML
document.getElementById("ID").outerText   //同innerText
document.getElementById("ID").outerHTML   //同innerHTML

<html>
<script language="javascript">
function change(){
document.all.oDiv.style.display="none"
}
</script>
<Div id="oDiv" onclick="change()">Text</Div>
</html>

<html>
<script language="javascript">
function changeText(){
document.getElementById("oDiv").innerText="NewText"
}
</script>
<Div id="oDiv" onmouseover="changeText()">Text</Div>
</html>
(阅读全文...)

0 留言

blogger标签、搜索结果与存档页面中只显示文章的标题



我们都知道如果在 Blogger Beta 中进行搜索或选择任何一个分类标签时，结果总会是以全文来显示的，存档文件也是如此。如果我们的文章数量很多内容又长，再加上其中也许会有大量的图片或音 频视频的内容，这样就会大大的影响了页面读取的时间。而且在众多内容面前，你的读者们也不可能马上就找到感兴趣的文章，浏览效率因此降低了。如果我们能让 它只显示文章的标题，并给出其固定链接，一目了然，这个问题自然就得到解决了。你可以先在本博客上看到效果，如果感觉不错，下面就开始进行操作：

　　进入 控制台 ， 布局 再进入 修改HTML 页面，最好先备份自己的模板，以免出错不好恢复。 勾选 扩展窗口小部件模板 前的勾，找到如下一段代码：

<b:widget id='Blog1' locked='false'title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>

　　将其中红色的部分替换成以下代码：

<b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> <data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if> <b:else/>
<b:include data='post' name='post'/>
</b:if>

　　保存更新，这时你的标签、搜索与存档页面的显示结果就都是以文章标题来显示了。
原文由 GG 发布于 http://ggq1.blogspot.com/2006/12/bloggerblogger-beta_3690.html
(阅读全文...)

0 留言