文章分类 -  JavaScript组件

摘要：◇组件名称: 消除表单默认值◇功能描述： 表单获得焦点后默认值消失，失去焦点后默认值出现。◇调用方法： addLoadEvent(stripeTables);◇上下文情景： 很多表单都有默认值，用于提示输入内容。当表单获得焦点时，应该自动去除默默人内容，方便用户输入数据。当表单失去焦点时，如果表内没有内容，应重新设置表单内容为默认值。◇工作方式&技术要点 ·遍历表单所有元素，跳过“提交”按钮和没有默认值的元素。 ·其他元素添加一个事件处理函数：把钙元素设置为空。 ·为“失去焦点元素”添加事件处理函数：如元素值为空，将其改回该元素的默认值。◇关键代码展示fu 阅读全文

摘要：◇组件名称: 表格奇偶行◇功能描述： 为表格的奇数数行和偶数行添加不同的样式 。◇调用方法： addLoadEvent(stripeTables);◇上下文情景： 用以修饰表格，css很难做到隔行附加相同样式，用js轻松实现。◇工作方式&技术要点 ·遍历table中的tr，设置变量odd，每次循环后都改变它的值，两个值交替判断赋予不同样式。◇关键代码展示function stripeTables() { if (!document.getElementsByTagName) return false; var tables = document.getElementsByTa 阅读全文

摘要：◇组件名称: 内部浏览◇功能描述： 点击对应的连接会显示对应的内容，效果原理与各大门户的slider一样 。◇调用方法： addLoadEvent(prepareInternalnav);◇上下文情景： 各大门户网站可见，信息量很大，在有限的版面显示更多的内容可以使用这个js。◇工作方式&技术要点 ·建立函数，使传入的id值的块进行显示，没传入的不显示。 ·对鼠标点击块的动作事件建立函数，使点击的块的id传入第一个显示函数。◇关键代码展示1.对应的id传入后，用于显示块的jsfunction showSection(id) { var divs = document 阅读全文

摘要：◇组件名称: JavaScript动画-Slideshow效果◇功能描述： 鼠标移动到图片的文字链接上，图片区会自动移动到相关文字的图片。◇调用方法： addLoadEvent(prepareSlideshow);◇上下文情景： 很多网站的首页都有图片展示或者广告，这是一种常见的图片切换效果。◇工作方式&技术要点 ·提取当前浏览器地址（通过window.location.herf），与导航条的锚点标签a的href属性的值进行比较，得出当前nav所在的页面。 ·对所取得的元素设置here类，取得高亮效果。 ·对body元素设置与页面相关的id，这样可以为每页 阅读全文

摘要：◇组件名称: 当前页面标识◇功能描述： 在导航条中，为所选定的页面的导航标签加上特殊的样式，使其标示为高亮。◇调用方法： addLoadEvent(highlightPage);◇上下文情景： 为了突出当前的页面，使用JavaScript在当前页在对应的导航条上添加高亮。◇工作方式&技术要点 ·提取当前浏览器地址（通过window.location.herf），与导航条的锚点标签a的href属性的值进行比较，得出当前nav所在的页面。 ·对所取得的元素设置here类，取得高亮效果。 ·对body元素设置与页面相关的id，这样可以为每页创建特殊样式。◇关键代 阅读全文