300+Jquery,CSS,MooTools和JS的导航菜单

引用
如果你是网站前端开发人员,那么对你来说,也许做一个漂亮导航菜单会很得心应手。但今天我要为大家总结各种导航菜单的资源,以便让大家的网站前端开发的工作更方便更快速,只要选择现成的例子就可以应用于自己的网站了。我收集的这些资源,从非常简单的HTML和CSS导航菜单,到非常复杂和高级的JQuery、JavaScript和MooTools技术,这都可以让你轻松实现褪色、滑动、拖动等效果。

http://article.yeeyan.org/view/47543/19224 from_com 并对其中一种效果进行了整理:已作为附件上传。

MOOTOOLS中的方法使用说明(转载)

MOOTOOLS中的方法使用

Core.js

函数: $extend 将第二个参数对象的所有属性复制到第一个参数对象中.

函数: $merge  合并一组对象生成新对象

函数: $each   迭代数组(包括非常规数组,如由内建的getElementsByTagName方法返回的集合对象, arguments对象, 或Ojbect对象)

函数: $pick   返回参数列表中第一个非未定义的项; 如果全部未定义,则返回null

函数: $random 返回指定区间内的一个随机整数

函数: $splat 把传入的参数包装成一个数组

函数: $time 返回当前时间戳

函数: $try 尝试执行给出的一组函数, 并返回第一个执行成功的函数的返回值;

函数: $type 检测传入参数的类型

函数: $chk 检测参数值存在(非null, undefined, false, 或 “”)或为0. 适用于将0也视作通行条件的情况.

函数: $clear 清除定时器(Timeout或Interval). 通常配合Function:delay和Function:periodical方法使用.

函数: $defined 检测参数值是否已定义

函数: $arguments创建一个可返回传入参数的特定项的函数(详见示例)

函数: $empty 一个什么事情都不做的空函数. 典型应用: 事件监听器的占位方法.

函数: $lambda 对传入的参数进行函数封装.即,如果传入参数为一个function,则原样返回该function;如果为其他对象,则返回一个新创建的function, 该function不做其他任何事,仅仅是返回原来这个对象.

Element 方法:

constructor 根据指定的元素类型创建新元素(构造方法)

getElement:获取本元素下的第一个指定标签名的子元素.

getElements:获取本元素下所有指定标签名的子元素.

getElementById:获取本元素下指定id的子元素

set:用于设置元素的属性值.

方法 get: 用于获取元素的属性值.

方法 erase:用于删除元素的属性值.

方法 match:检测元素的标签名是否为指定的标签名.

方法 inject:向指定元素的指定位置中插入本元素

方法 grab:向本元素内部的指定位置添加子元素

方法 adopt:向本元素内部添加子元素

方法 wraps:将本元素包裹在指定的元素的外层(成为该元素的父元素).

方法 appendText:向元素中添加一个文本节点

方法 dispose:将元素从DOM中删除

方法 clone:复制并返回元素的副本

方法 replaces:替换元素

方法 hasClass:检测元素上是否包含指定的样式名

方法 addClass:如果指定样式名在元素上不存在,则添加该样式名

方法 removeClass:将指定样式名从元素上删除

方法 toggleClass:添加/删除元素上指定的样式名

方法 getPrevious:返回本元素的前一个兄弟元素(不包括文本节点).

方法 getAllPrevious:返回本元素之前的所有兄弟元素

方法 getNext:返回本元素后的一个兄弟元素(不包括文本节点)

方法 getAllNext:返回本元素之后的所有兄弟元素

方法 getFirst:获取第一个子元素(不包括文本节点)

方法 getLast:获取最后一个子元素(不包括文本节点)

方法 getParent:获取直接父元素

方法 getParents:获取本元素的所有符合条件的父级元素

方法 getChildren:返回所有子元素(不包括文本节点).

方法 hasChild:检测是否含有指定的子元素

方法 empty:删除所有子元素

方法 destroy:删除元素自身及其所有子元素(并进行内存垃圾收集)

方法 toQueryString:读取子元素中的数据输入元素(如input, select等)的值, 并生成查询字符串

方法 getSelected:返回下拉列表框元素中的选中项

方法 getProperty:获取本元素的一个指定属性值

方法 getProperties:获取元素的多个属性值

方法 setProperty:设置元素的一个属性

方法 setProperties:设置元素的多个属性

方法 removeProperty:删除元素的一个属性

方法 removeProperties:删除元素的多个属性

方法 store:向元素的存储区中存放一个项

方法 retrieve:从元素的存储区中获取一个值

EVENT

方法 addEvent:向DOM元素添加一个事件监听器

方法 removeEvent:删除指定的事件监听函数

方法 addEvents;向DOM元素一次添加多个事件监听器

方法 removeEvents:删除指定事件类型上的所有监听函数.

方法 fireEvent:触发元素上指定的事件类型

方法 cloneEvents:复制目标元素上的所有事件到本元素

EVENTS

事件: mouseenter:(框架提供的自定义事件)本事件在鼠标进入指定元素区域时触发,并且不会在鼠标穿越子元素的时候再次触发(区别于mouseover)

事件: mouseleave(框架提供的自定义事件)本事件在鼠标离开指定元素区域时触发,并且不会再离开本元素的子元素的时候触发(区别于mouseout)

事件: mousewheel(框架提供的自定义事件)本事件在鼠标滚轮滚动时触发

方法 setStyle:为元素设置一个CSS属性

方法 getStyle:返回指定的CSS属性值

方法 setStyles:为元素设置一组CSS属性

方法 getStyles:返回一个包含多个指定CSS属性名/值对的对象

方法 scrollTo:将元素内容滚动到指定的坐标(前提是元素内容已经溢出).

方法 getSize:获取元素的尺寸(width, height, border, padding都计算在内).

方法 getScrollSize:获取元素的尺寸(可滚动区域也计算在内).

方法 getScroll:获取元素已滚动的距离.

方法 getPosition:获取元素的实际偏移量

方法 getCoordinates:获取元素的width, height, left, right, top, bottom值

Array

方法: each  对数组进行迭代处理

方法: every 如果数组中的每一项都通过给定函数的测试,则返回true.

方法: filter 将所有在给定过滤函数中过滤通过的数组项创建一个新数组.

方法: clean 返回一个由原数组中计算值为true(即不是以下情况的值: null, undefined, zero, false, 或 “”)的项

方法: indexOf 返回数组中和给出参数值相等的项的索引号; 如果未找到相等的项, 则返回-1.

方法: map 返回一个由经过给定函数处理返回的值所创建的新数组.

方法: some 如果数组中至少有一个项通过了给出的函数的测试,则返回true.

方法: associate 创建一个键值对对象,该对象中的键由作为参数传入的一个数组决定,值由主调数组决定

方法: link 根据给出的 ‘键/测试函数’对 来创建一个新的键值对对象

方法: contains 测试指定项是否在数组中存在

方法: extend 将另一个数组中的所有元素纳入本数组

方法: getLast 返回数组中的最后一项

方法: getRandom 返回从数组中随机抽取的一项

方法: include 向数组中添加一项, 如果该项在数组中已经存在,则不再添加.

方法: combine 将主调数组和另一个数组进行组合(重复的项将不会加入)

方法: erase 删除数组中所有的指定项

方法: empty 清空数组

方法: flatten 将多维数组扁平化(即变为一维数组)

方法: rgbToHex 将RGB格式的颜色代码转换成十六进制的代码. 输入的RGB代码需要类似如下的其中一种格式:[255,255,255] 或 [255,255,255,1]

函数: $A 创建一个数组的拷贝. 可以将数组的迭代功能添加到具备可迭代特性的对象中, 如:DOM节点集合或arguments对象

MooTools资源大集合1

MooTools资源大集合1

MooTool是一款灵活的,模块化的,经过压缩的Javascript框架。尽管它的资源数量还不能同JQuery等Javascript框架同日而语,但是MooTools的社区已经拥有了大量非常成熟的文章,指南,和第三方插件来满足大部分人的需求。

 

 

MooTools概述


MooTools的核心思想是为Javascript开发人员提供更好的应用程序接口,通过
拓展它的基础元素来优化语言,并且提供更多的简单面向对象工具。因此,有一些人可能倾向于认为MooTools对于浏览器脚本来说并没有什么显著的特点。
事实上,MooTools并不是一个DOM脚本工具,而是通过优化Javascript使得开发人员打下坚实的基础,以便开发出具有良好可读性的,健壮
的,可重用的浏览器脚本库。

 

 

文章和指南


 

初级

 

官方文档

非常好,非常全的文档。直观的格式令它可以同时成为不错的参考和指南。

官方文档

 

 

MooTools适用于非程序员

有一个系列的三部分指南告诉大家为甚麽MooTools是面向非程序员的。

 

The MooWalkthrough

一个基于维基百科的MooTools指南将为大家介绍这个Javascript库。

 

The MooTorial

面向MooTools新手的指南集合。

 

MooTools类

比较基础的演示了MooTools如何使用类,并和其他类似的库进行对比。

 

基本元素

解释了什么是Javascript的基本类型,和MooTools如何为想要拓展他们功能的人扩展和提供方法。同样解释了什么是元素类。

 

选择和创建元素

指导大家如何在页面中选择,创建和插入特定的元素。

 

MooTools30天

这个系列的指南跟大家分享了MooTools中的重要特性。(还未全部完成–目前有23个指南)

  1. 介绍库
  2. 选择器
  3. 如何使用数组
  4. 函数
  5. 事件处理
  6. 操作html
  7. Set和Get属性
  8. 输入过滤Part I -数字
  9. 输入过滤
    Part II -字符串
  10. 使用FX.Tween
  11. 使用
    Fx.Morph, Fx Options and Fx Events
  12. 使用Drag.Move来拖拽
  13. 正则式
  14. 周期和哈希简介
  15. Sliders
  16. Sortables方法介绍
  17. Accordion
  18. 类 part I
  19. 工具
  20. 一些Mootool标签
  21. 类part II
  22. Fx.Elements
  23. Fx.Slide

中级


Facebook弹出窗口

使用MooTools来构建Facebook的弹出窗口。不需要使用任何外部插件就可以简简单单创建Facebook风格的弹出窗口。

 

使用自定义图像消失

使用自定义的图像消退来使图像消失。

 

Skype风格的按钮

如何创建Skype风格的按钮。

MooTools手电筒效果

 

Snook风格的导航

 

爆炸效果的ajax页面加载

如何创建一种效果使当前的内容被炸出屏幕,而加载通过ajax获取的内容。

 

通过cookie保存的字体大小滑动器

显示如何创建一个滑动器来调整文字大小并保存在cookie中。

使用Google分析器来跟踪ajax链接点击

 

 

帮助你确定大写锁定是否打开

 

模拟Flash的水平导航

教你如何在页面上创建水平导航。

 

产品高亮

自动为图片加上title和alt

 

外部点击事件

 

保存可排序的列表

告诉你如何实现可排序的列表, 从MooTools到MySQL。

 

用MooTools实现CSS sprites

Swiff

解释什么是swiff类,它如何让flash元素和Javascript进行通信。

 

使用CSS和MooTools修正sIRF打印

使用sIRF可以帮助你完成印刷屏幕上你想要的内容,但是当用户想打印网页的时候可能会存在问题。这篇文章展示如何来完成。

JavaScript中清空数组的三种方式

方式1,splice

 

var ary = [1,2,3,4];
ary.splice(0,ary.length);
console.log(ary); // 输出 [],空数组,即被清空了

 

方式2,length赋值为0

这种方式很有意思,其它语言如Java,其数组的length是只读的,不能被赋值。如

int[] ary = {1,2,3,4};
ary.length = 0;

 

Java中会报错,编译通不过。

而JS中则可以,且将数组清空了,如

var ary = [1,2,3,4];
ary.length = 0;
console.log(ary); // 输出 [],空数组,即被清空了

 

目前 Prototype中数组的 clear
方法和mootools库中数组的 empty
方法使用这种方式清空数组。

方式3,赋值为[]

 

var ary = [1,2,3,4];
ary = []; // 赋值为一个空数组以达到清空原数组

 

Ext库Ext.CompositeElementLite类的 clear
方法使用这种方式清空。

 

方式2 保留了数组其它属性,方式3 则未保留。

 

很多人认为方式2的效率很高些,因为仅仅是给length重新赋值了,而方式3则重新建立个对象。经 测试 恰恰是方式3的效率高。测试代码:

 

var a = [];
for (var i=0; i< 1000000; i++){
	a.push(i);
}
var start = new Date();
//a = [];
a.length = 0;
var end = new Date();
alert(end - start);

 

测试结果:

IE6 IE7 IE8 IE9 Firefox Safari Chrome
a.length=0 94 29 14 1 4 3 1
a=[] 0 0 0 0 0 0 0

 

 

以上结果可看到:方式3更快,效率更高。

 

 

从测试结果上看如果不保留原数组的其它属性Ext采用的方式更值得推荐。

 

 

 

 

 

js-data-helperplugin

github address: http://github.com/CodeOfficer/js-data-helper/tree/master

 

What Is It 

It’s a Rails plugin that will help you pass data from Rails to Javascript.

Requirements

JS Data Helper requires either jQuery
1.2.3+, Prototype
1.6.1+ or Mootools
1.2+. Each of those Javascript frameworks has a data/store function built in.

How Does It work 

You use helpers in Rails to convert Ruby values to their Javascript
equivalents. The values are collected and then output to your layout
file just before the closing BODY
tag. The
output is actually inline Javascript, appropriate to the Javascript
framework you are using. It will use the data storage methods of the
Javascript framework you specify to insert data into DOM
elements you have referenced by ID. This will occur inline and before
dom.ready, so you know the data will be available when you need it.

But Why Not Just Use Custom DOM
Attributes 

Sometimes we need to pass data to Javascript. We might decide to use custom attributes to hide data in our DOM
elements but then we would run into a situation where our markup does
not validate. We may also try to hide values in class attributes but
then we’re be stepping on the toes of our designers. I am of the
opinion that data meant for Javascript should remain in Javascript.

Helpers

helper
param
block
notes

js_data_tag “dom_id” yes Used anywhere, the string param represents the dom_id.
f.js_data none yes Used inside of a FormBuilder, the dom_id param will be inferred through the Builder and refer to the ID of the Form.
js_data_functions :framework none Used in your layout file just before the end BODY
tag. This will output Javascript inline to insert data into your DOM
. Framework is defined as a symbol and must be either :jquery, :prototype or :mootools.

Example

This demonstration for jQuery shows a variety of test values. I’m using HAML
, but you could just as easily use ERB
. In your view
do something like:


- js_data_tag "test" do |d|
  - d.set :test_number, 2
  - d.set :test_float, 2.2
  - d.set :test_true, true
  - d.set :test_false, false
  - d.set :test_null_as_string, 'null'
  - d.set :test_nil, nil
  - d.set :test_NaN, 'NaN'
  - d.set :test_UPPERCASE, 'UPPERCASE'
  - d.set :test_string, 'some string'
  - d.set :test_quoted_function, "function(){ alert('true') }"
  - d.set :test_reverse_quoted_function, 'function(){ alert("true") }'

Then throw this in your layout
, you can also specify :mootools or :prototype:


= js_data_functions :jquery

And you will see this in your DOM

:


<script type='text/javascript'>
  $('#test').data('railsData', {
    test_NaN:NaN, 
    test_UPPERCASE:'UPPERCASE', 
    test_false:false, 
    test_float:2.2, 
    test_nil:null, 
    test_null_as_string:null, 
    test_number:2, 
    test_quoted_function:function(){ alert('true') }, 
    test_reverse_quoted_function:function(){ alert("true") }, 
    test_string:'some string', 
    test_true:true
  });
</script>

Now in your application.js
(assuming you use Firefox/Firebug and have console.log) you can do:


$(function() {
  console.log($('#test').data('railsData'));
});

Though realistically, you might do something more like:


$(function() {
  $('.post').each(function(){
    var data = $(this).data('railsData');
    if (data){
      if (data.published){
        $(this).find('.title').css('font-weight', 'bold');
      } else {
        $(this).find('.title').css('color', 'red');
      };
    };
  });
});

20个经典的Ajax+CSS表格

并不是所有的Web 开发者都会对美化表格数据感兴趣,今天我们收集了20 个功能强大,外观漂亮的基于Ajax + CSS 的表格效果,你可以从这些示例中学习怎么使用这些表格提供的排序和过滤的功能来组织表格中的数据。

现在让我们来看看这些表格:(点击每个样式前面的链接即可进入下载)

#1. Tablecloth

Tablecloth 由CSS Globe 开发,是一个轻量级的、易于使用的表格,以友好的方式将样式和行为添加到你当前的HTML 表格元素当中。

#2. Ask the CSS Guy Table

Ask the CSS Guy Table 演示了怎么样创建一个可以显示数据之间的关系的表格,例如在单击某个单元格时可以同时突出显示最顶端的行和最左边的列。

#3. A CSS styled table version 2

Veerle Duoh 为我们介绍了一种如何利用CSS 使表格更有吸引力的方法,并且在实现的过程中充分考虑了表格的可访问性。

#4. Sortable Table

Sortable Table ——演示了如何按升序或降序排列以及如何过滤显示表格中的数据。

#5. Row Locking with CSS and JavaScript

演示了如何利用Javascript 和 CSS 实现“锁定行”的效果,选中的行会一直显示高亮效果直到用户再次点击才会消失。

#6. Vertical scrolling tables

如果你有大量的数据但是没有足够大的空间来显示它,这会是一个很好的解决办法。通过CSS 固定表格的页眉和页脚,但是内容却可以滚动显示。

#7. Replicating a Tree table

利用HTML 和CSS 建立的树状表格。

#8. Collapsible tables with DOM and CSS

利用DOM 和CSS 建立的可折叠的表格效果。表格页脚部分包含的箭头有一个名为“footcollapse”的类,通过为之添加Javascript 代码可以让表格展开或折叠。

#9. TableSorter plug-in for jQuery

为jQuery 定制的插件,它的主要功能包括允许多列排序,支持 元素的rowspan 和colspan 属性。

#10. Stripe your tables the OO way

利用Javascript 为指定表格中的行定义交替颜色,并添加onmouseover 和onmouseout 事件。

#11. MooTools Table Row & Column highlighting

利用MooTools 框架高亮显示鼠标悬停的单元格所在的行和列。

#12. CSS Table Gallery

又一个利用CSS 高亮显示鼠标悬停当前行时的表格效果。

#13. jQuery Table Filter

为jQuery 框架开发的表格排序、过滤插件,可以通过Ctrl + 鼠标单击选择多重列。

#14. PHP Ajax Table

支持所有主流浏览器,自动填入数据,利用后台PHP / MySQL 可以实时滚动、排序、编辑、添加、过滤数据。包括默认、MS Office 2007 、 MS Office XP Excel 三种样式。

#15. SortTable

只需为你想要排序的表格添加一个名为“sortable ”的class ,就可以实现表格的排序功能。

#16. Zebra Tables

A List Apart为我们提供了一个极好的利用Javascript 和 DOM 为表格的单元格应用背景色的示例。

#17. Standardista Table Sorting

Standardista Table Sorting 是一个可以让你按照表格的任何列进行排序的Javascript 脚本。

#18. GridView3 Example

利用Ext Js 框架,功能强大的表格。

#19. Mootable

利用MooTools 框架开发的又一个可排序的表格。

#20. Drag & Drop Sortable Lists with JavaScript and CSS

利用Javascript 和 CSS 实现的可以拖曳、排序列表的效果。

转自:http://www.okajax.com/a/200807/0G0N432008.html

欲善事先利器:javascript常备工具总结

按使用频率排名:

1,IDE

个人首选aptana IDE,因为用惯了eclipse快捷键。

根据个人喜好,可选intelJ,gvim

2,debugger

熟记debugger的快捷键是高效coding的关键之一。

FF当属firebug,IE除了IE8的debugger没有一个好鸟。

3,API doc

熟练翻阅各种API电子书,HTML 和 jscript的电子书是必备的,根据需要常备YUI,mootools,jquery等。要知道,许多api的function并不是可以那么容易google得到的。

e.g.string.replace(Regex, function)

function f2c(s) {
  var test = /(\d+(\.\d*) )F\b/g;    //Initialize pattern.
  return(s.replace
    (test,
      function($0,$1,$2) { 
        return((($1-32) * 5/9) + "C");
      }
    )
  );
}

4,小众工具

YSlow, Google page speed, httpwatch ==> performance tuning

Jslint ==> coding convention

YUI Compressor, Jawr => compress

5,茶余饭后的消遣

先看看yui,mootools,jquery,Prototype & script.aculo.us,ext的source code,

然后回来refactor自己项目里成团的FML的js

闲的蛋疼就去51js吹牛起哄

jQuery的tooltip插件

这个插件是参考Mootools1.11版的Tips插件改写的,所以熟悉Mootools的朋友会发现接口和里面的逻辑基本上是一样的,由于本机环境只有ff3和ie7,所以这个插件在其他浏览器环境下是否正常工作不是很清楚。
支持jQuery1.2.6和1.3版本。

附件中包含插件源码、jsDoc以及示例

以下是jsdoc:

jQuery.fn.tips(options
)

: jQuery
给指定的元素设置多格式提示

Author:
keshin
备注:

元素的title属性总会被作为提示的主内容. 如果你在title中输入 :: ,则 :: 前的内容将被作为提示的标题。
title属性值允许使用html格式.

// 示例:
$("a").tips({offsets:{x:10, y:20}}); // 给所有的链接设置提示
Parameters:
{JSON}

options 配置项.可选,默认值如下:

{
    maxTitleChars: 30, // 提示的标题所能显示的最长字数。默认为 30. 
    showDelay: 100,    // 提示显示方法延迟执行的毫秒数 (默认为100 ms)
    hideDelay: 100,    // 提示消失方法延迟执行的毫秒数 (默认为100 ms)
    timeout:  0,       // 提示在显示多长时间后自动小时,0则不会自动小时  
    className: 'tool', //提示所用的样式名的前缀。默认为 ‘tool’.  
                            // 整个提示的样式为: tool-tip 
                            // 提示标题的样式为: tool-title 
                            // 文本内容的样式为: tool-text 
    offsets: {'x': 16, 'y': 16}, // 提示与鼠标的距离。一个包含x/y 属性的对象。
    tipType: 2    // 提示显示的方式,0为显示在元素根据offsets偏移的位置,固定
                            // 1为显示在事件触发时的偏移位置,固定
                            // 2为提示会随鼠标移动
}
Returns:
{jQuery
}

可供链式操作

 

jquery使用感受对比mootools(持续更新)

最近尝试在项目中使用jquery,(以前一直是用mootools的),jquery不是很熟,所以可能里面说到jquery的有些缺点是我自己学艺未精造成的。

 

持续更新中,开发中有什么感想就随笔记下来。

 

  1. 先来个好评
    : 可以直接往获取的element数组上绑定事件,使用起来很方便。 这应该得益于$()中产成的jquery对象吧。
  2. 没有获取一个对象的类型的方法(也可能是我没找到)。被mootools惯坏了,用到这个很不适宜。
  3. 没有直接new Element 的方法,大都使用$().append(),导致许多做法不能实施,比如:创建一个页面对象,再往上绑定数据。 而转为在用append添加的代码中加入id,再用全局对象做map缓存数据,总之感觉不爽。
  4. 没有对于对象的merge方法, merge({a:1, b:2}, {a:2,c:3}) == {a:2, b:2, c:3}这样多优雅呀,特别是处理一些默认参数的时候。
  5. 还是觉得少了点函数,比如 Function.pass 给函数绑定参数,有些地方必须用到呀!于是自己写了一个 $pass(arg, fn) 感觉这个比mootools里面的还好用。
  6. each方法的问题: $.each(array, function(index, record)) 方法简直是个巨大的错误,“回调函数”里面为什么要加个索引? 严重不符合函数式编程对于each的定义,而且和 $.map 函数的定义也不一致。 你把索引放在后面做成可忽略的也行呀!(估计是开始没考虑到,后期想改也没法了)——$().each 更是混乱,居然将record绑定在this上,而且还是没有包装的el。
  7. 昨天用jstree插件,没文档,真辛苦,看源码也很乱。不明白为什么所有的方法都以 $().jstree(type) 的方式出现,仅用参数字符串来区分? 感觉jquery真的不适合做大型的东西。
  8. $().toggle() 方法真的很方便,让人倾向于在html中写代码。

XiorkFlow流程设计器mootools学习版

这个是学习了XiorkFlow的流程设计器,然后结合mootools重写了一个。

原XiorkFlow可参看http://www.iteye.com/topic/42941

暂时只支持IE,不支持FF。
  • workflow.war (129 KB)
  • 描述: 这是war包,运行时utl为http://localhost:8080/workflow/workflow/demo/index.html
  • 下载次数: 1790
  • 描述: 示例图
  • 大小: 1.7 MB