必威体育下载基督教Heilmann

“webdevtrick”标签的文章

创建可访问的JavaScript菜单系统——一些被遗忘的基本步骤

周二,6月23日2009

好吧,所以你想再写一个折叠菜单/section/widget thingamabob。这真的很简单,在下面的几个例子中,我想指出一些想法,使它更容易为你。

下面是我们将要构建的——它没有任何像平滑动画那样的花哨的东西,随机的独角兽,发出的嗖嗖声或者其他你可能会想到的声音,但这是一个很好的坚实的基础。

折叠菜单的例子由你。

按图像至去看现场的例子

标记

第一个技巧是为小部件使用易于理解和高度可样式化的标记。你会看到很多小部件都在使用无止尽的div,水疗中心Ns,每个元素上的id和每个子元素上的类。如果您构建的是一个简单的解决方案(而不是框架的一部分的可重用小部件),则不需要这些。在这种情况下,标记如下:


换句话说:包含不同部分标题的嵌套列表。这在没有样式化和脚本编写的情况下是有意义的,这对于关闭了JavaScript的移动设备或环境来说仍然是非常重要的一点(是的,它们不是神话,但确实存在)。

辅助访问并不意味着缺少JavaScript

人们所犯的第一个错误是认为这就是你所需要的——因为使用辅助技术的用户没有JavaScript,对吧?错了。辅助技术不是浏览器的替代品,但在大多数情况下,它与浏览器功能挂钩,并提供更容易的访问。换句话说,浏览器所获得的辅助技术所获得的,您必须确保在没有鼠标的情况下仍然有意义(仅举一个例子)。

思想太复杂

人们采取的下一个额外步骤是开始循环遍历菜单结构,以使用JavaScript隐藏元素。使用不使用DOM那样做,但是背上CSS选择器引擎,但永远IE6这仍然不是一个选择。你不需要这么做。为了在上面的例子中隐藏嵌套的列表,您所需要做的就是将一个类应用于主列表并将其余的留给它CSS:




这意味着为了显示任何嵌套列表,您所需要做的就是向父列表项添加一个名为“open”的类。的CSS取消隐藏如下:



在呈现页面时,您可以在后端添加类——这比任何JavaScript分析都更有意义,因为它指示页面的当前打开部分window.location或其他欺诈行为。看到第一阶段演示。您还可以定义一个“current”类,这意味着您可以以不同的方式对其进行样式设置,脚本只需简单地跳过该部分,而不会折叠它。

这就是美,把所有的展示和隐藏都留给了CSS。当然你不能用动画CSS(除非你使用webkit),但是您可以使您的动画先于类中的更改。

隐藏和显示

显示和隐藏东西的方法很简单,就是添加和删除类。我们需要使用事件处理来监听单击事件来实现这一点。单击事件是唯一安全的,因为它们使用键盘和鼠标触发。问题是标题可以被点击,但无法使用键盘。为了解决这个问题,让我们使用DOM脚本化,以便将按钮元素注入头文件中。您可以使用CSS让它看起来不像一个按钮:



第二阶段演示展示它是如何工作的,下面是代码。


(函数(){

//获取菜单并确保它存在
var m = document.getElementById(' menu');
如果(m) {

//添加一个类来允许CSS神奇的发生
m.className = ‘js';

//循环所有标题
var headers = m.getElementsByTagName(' h3');
(var = 0;头[我];我+ +){
//获取当前标题的内容
var content = header [i].innerHTML;
//创建一个按钮,删除标题的内容
//将其替换为按钮,并将内容设置为
//缓存的头内容
var a = document.createElement(' button');
headers[i].innerHTML = ‘';
头[我].appendChild(一个);
a.innerHTML = content;
}

//对菜单应用一个单击事件
m.addEventListener(“点击”,函数(e){

//找到事件目标,并确认它是一个按钮
var t = e.target;
如果(t.nodeName.toLowerCase()= = =“按钮”){

//得到按钮所在的位置
var mom = t.parentNode.parentNode;

//检查它的类名是否为content和
//删除open类,如果它存在,其他的
//添加一个开放类

如果(mom.className ! = =‘当前’){
if(mom.className = 'open'){
mom.className = '';
其他} {
mom.className = 'open';
}

}

//不要做按钮通常做的事情
e.preventDefault();
}

},真正的);
}

})()

这段代码还利用了事件的代表团-所以没有必要应用和事件处理程序到每个标题-即使这是真的很容易做到的库和一个每一个()批处理()命令。事件处理是一个伟大的概念,当您费心阅读文档时,您会发现其中的技巧是惊人的。

隐藏不是删除

这是大多数菜单脚本停止的地方。伟大的东西,它会扩张和萎缩,每个人都很高兴。除非你是一个不开心的家伙,你需要用键盘或者旧的移动设备来访问它。你自己试试吧使用第二个例子通过选项卡从一个链接到另一个链接。您将发现必须通过不可见的链接来切换到下一个要打开或隐藏的部分。这肯定不是什么好主意,对吧?

变通的诀窍是改变tabindex元素的属性。的值1将从选项卡顺序中删除它,并将其设置为0将使它们再次可用。所以,使键盘访问更容易,让我们先删除制表符订单,然后再重新设置在显示和隐藏菜单时设置或删除它。这非常烦人,因为我们必须循环这些链接。我讨厌循环,但是浏览器不是我们的朋友。


(函数(){

//获取菜单并确保它存在
var m = document.getElementById(' menu');
如果(m) {

//添加一个类来允许CSS神奇的发生
m.className = ‘js';

//循环所有标题
var headers = m.getElementsByTagName(' h3');
(var = 0;头[我];我+ +){
//获取当前标题的内容
var content = header [i].innerHTML;
//创建一个按钮,删除标题的内容
//将其替换为按钮,并将内容设置为
//缓存的头内容
var a = document.createElement(' button');
headers[i].innerHTML = ‘';
头[我].appendChild(一个);
a.innerHTML = content;
}

//循环所有嵌套列表
//并将嵌套链接的制表顺序设置为-1
//从选项卡中删除它们

var uls = m.getElementsByTagName(' ul');
(var = 0;极限状态[我];我+ +){
if(uls[i].parentNode.className!‘open' &&
摘要[我].parentNode.className ! = =‘当前’){
var as = uls[i].getElementsByTagName(' a');
tabOrder (1);
}

}

//对菜单应用一个单击事件
m.addEventListener(“点击”,函数(e){

//找到事件目标,并确认它是一个按钮
var t = e.target;
如果(t.nodeName.toLowerCase()= = =“按钮”){

//得到按钮所在的位置
var mom = t.parentNode.parentNode;

//检查它的类名是否为content和
//删除open类,如果它存在,其他的
//添加一个开放类。同时,删除或添加
//标签顺序的链接

如果(mom.className ! = =‘当前’){
if(mom.className = 'open'){
mom.className = '';
tabOrder (1);
其他} {
mom.className = 'open';
tabOrder (1);
}

}

//不要做按钮通常做的事情
e.preventDefault();
}

},真正的);
}

//从选项卡顺序中删除或添加元素

函数tabOrder(榆树、索引){
(var = 0;榆树[我];我+ +){
elms[i].tabIndex = index;
}

}
})()

第三个demo就是这么做的-使用您的键盘,并惊叹于能够tab从父元素到父元素时,子部分是折叠的。

修复它Internet Explorer 6和7坏老的浏览器

现在,这一切都很好,但当然,我们需要修复代码,以解决浏览器不理解的怪癖W3C事件模型或考虑具有a的元素的名字属性与与相同id。我们可以在这里的代码中,但坦率地说,我已经厌倦了。人们给我们提供了一些库来解决浏览器的差异让我们的生活更容易。这就是为什么我们可以使用YUI例如,跨浏览器可靠地工作:



良好的开端

这仅仅是一个开始。一个真正的菜单还应该支持所有类型的键,像这样的菜单在一个真正的应用程序中给我们,并通知屏幕阅读器所有发生的事情。为此,我们需要咏叹调。现在,我很高兴在这里得到一些评论:)

专业网页开发之路-我在台湾的大学演讲(现在有音频)

周四,4月16日,2009

我刚结束在台湾的第一次演讲回来,我得说我的演讲似乎很成功。房间里挤满了人,事后人们问了非常好的问题。

第一个错误——表示标记

对话并翻译成中文

(slideshare id = 1297512医生= 1297512)

在幻灯片中,我介绍了web开发的历史,我们做错了什么,我们应该在未来避免什么。我也谈到了YUI以及它如何体现伟大的web开发所基于的一些原则。

更新:Liang-Bin Hsueh发布谈话的录音只错过了前五分钟。

使用ViewsHandler逐步创建增强的DOM应用程序

周二,8月19日,2008

上个月我教了一群学生DOM并解释说他们对这些想法很满意,但是他们有理由这样说DOM脚本编写可能变得冗长和重复。这是我不得不想到写作的时候ViewsHandler,编写一个小框架DOM应用程序。

ViewsHandler并不是JavaScript模板引擎,正如我发现的那样,你需要创造很多HTMLDOM,应用程序中改变的部分并不多。模板引擎将取代整个视图,ViewsHandler提供了创建HTML,将其添加到shell或应用程序画布中,并存储对更改的部件的引用。这样你只会创造你的HTML一次,然后只对缓存做较小的更改DOM在需要的时候添加元素。

作为演示,我创建了一个小的Flickr幻灯片显示使用ViewsHandler这正是我给班上布置的任务:)

你觉得呢?

凭空变出YUI

星期六,8月2日,2008

我爱YUI加载程序因为这是一个包含YUI在飞。最酷的一点是它得到了YUI组件的CDN并且知道依赖性,所以我不需要知道。如果我需要YUI的东西,我不需要额外的脚本维护人员必须包括,只是我的脚本。然而,我们还需要包括YUI加载程序本身。

除非你用雅虎_config侦听器。这个东西比这两个都老YUI获取和YUI它是一个对象方法,每次a被调用YUI组件加载。为什么不加载YUI装载机使用这个吗?

一个问题是YUILoader不会调用配置侦听器说它是Loader,这是get效用。另一个问题是,它不能在调用自己“get”之后立即执行加载程序。解决方法是使用超时。

把这些都包起来雅虎_config对象,你会召唤YUI无中生有。加载以下示例YUIDom,YUI事件和警报“完成”,一旦一切就绪。看看这里


YAHOO_config = function(){
var s = document.createElement(' script');
s.setAttribute('类型',' text / javascript ');
s.setAttribute(“src”、“http://yui.yahooapis.com/2.5.2/”+
“构建/ yuiloader / yuiloader-beta-min.js”);
document.getElementsByTagName(头)[0].appendChild(年代);
返回{
听众:函数(o){
如果(o.name = = =‘得到’){
window.setTimeout(YAHOO_config.ready,1);
}

},
准备:函数(){
var loader = new雅虎.util.YUILoader();
var dependencies = [' yahoo','dom','event'];
loader.require(依赖性);
loader.loadOptional = true;
loader.insert({
调用onSuccess:函数(){
console.log(“完成了!”);
}

});
}

};
}();

感谢Alex Liu的setTimeout技巧。

探员YUI -不要错过这些YUI教程

星期天,7月27日2008

我尊敬的同事克劳斯Komenda似乎花了和我为大众写酷东西一样多的时间,但不知何故,他并没有出现在很多阅读清单上。不要脸,我说的,把裤子拉到我的腋窝(是的,我看了辛普森一家)我指给你看,尊敬的读者对一系列文章的解释YUI全权代理YUI:

是的,我也喜欢他们,因为我很喜欢邦德。