仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 538|回复: 7
打印 上一主题 下一主题

[DIV+CSS] 来讲讲:用tabIndex轻松完成网页导航

[复制链接]
不帅 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:23:38 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。
比来,当我在一个网站上输出表格数据时,我填写了一栏,并点击[Tab]键移到下一栏;当我仰面时,我惊异的发明光标跳到页面下方的另外一栏中。我用鼠标将光标移到准确的文本栏中,但不久[Tab]键又再次呈现成绩。这一情况使我想懂得一下页面计划,和tabIndex属性怎样经由过程键盘匡助导航。
经由过程[Tab]键会见元素
HTMLDOMtabIndex特征同意你设置或前往一个HTML元素的tab键按次。IE4.0开始撑持此特征。后来,只要真正可经由过程[Tab]键会见的元素遭到撑持,如输出栏、链接等。现在,一切的收集扫瞄器,和页面上显现的一切元素都撑持此特征。在使用它之前,你能够双击HTML标准包管某个元素撑持此特征。
tabIndex特征
使用tabIndex特征是一个复杂而又间接的历程。比方,上面的HTML源代码将tabIndex值1赋值给输出栏,它是tab按次的第一栏:
<inputid="idfname"name="firstName"tabindex="1"/>
假如最后选择了[Tab]键,带这个输出栏的网页会将光标挪动到firstName栏。
在给tabIndex特征赋值时,要寄望几个成绩。上面是几个赋值划定规矩:

  • 带0值tabIndex的元素依据源代码(或默许页面举动)举行排序。
  • 年夜于0的tabIndex值设定其tab按次。一切带正tabIndex值的元素呈现在一切带0tabIndex值的元素之前。
  • 假如你犯了一个毛病,把统一个tabIndex付与给多个元素,像别的元素一样,它们会以一个0值tabIndex举行处置。
  • 将tabIndex赋值为-1,则在利用[Tab]键时,此元素被疏忽。注重:假如利用-1值时,onfocus与onblur事务仍被启动。
  • tabIndex的值可为0至32767之间的恣意数字。
列表A中的样本HTML代码将一个tabIndex值付与给页面中的每个项目。输出栏与DIV标签包括tabIndex特征,同意用户用键盘细心浏览页面元素。(DIV标签其实不供应与取得核心有关的太多信息,但我想用非输出元素申明tabIndex的使用情形。)值为-1的按钮被赋值,在使用[Tab]键时,它们即被疏忽。
当输出元素充斥(到达最年夜长度)时,你能够增添一小段JavaScript剧本来完成主动定位功效。这是一个基础的函数,我们来看看剧本怎样完成其功效:
functioncheckLen(x,y){
if(y.length==x.maxLength){
varnext=x.tabIndex
if(next<document.getElementById("frmTest").length){
document.getElementById("frmTest").elements[next-1].focus()
}}}
该函数承受两个变量。第一个变量为输出栏,第二个变量包括该栏的值。并将栏的长度与栏的可承受最年夜长度比拟较。假如它们相称(即该栏是充斥的),则从栏中读取tabIndex的值;假如该值小于最年夜长度,则核心被挪动下一栏中。
此函数为每栏的onkeyup事务赋值,因而每次在栏中输出一个值,以查验其是不是到达最年夜长度时,都要挪用该函数。假如到达最年夜值,则光标按tab按次挪动到下一栏中。列表B中的源代码将此函数增加到下面的例子中。
进步会见才能
为元素指定tabIndex可匡助常常利用键盘的用户更加便利地打仗收集界面;非尺度用户,如PDA、挪动德律风和残疾人利用的屏幕浏览器也从中受害。任何扩大使用软件功效的事务都是无益的。
大事一桩
你大概要花很多工夫来计划收集窗体,使其具有视觉吸引力,并能被后端服务器组件准确处置。可是,你大概疏忽了要用非尺度手艺或扫瞄器对其举行测试。典范的例子就是保持鼠标,而依托键盘来导航窗体。HTML尺度包括tabIndex特征,它同意你把持经由过程[Tab]键会见的项目。
TonyPatton具有丰厚的Java、VB、Lotus及XML方面的常识,是一个专业的使用程序开辟职员。
</p>
你可以轻松地控制页面的布局。
第二个灵魂 该用户已被删除
沙发
发表于 2015-1-18 06:33:44 | 只看该作者
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
小女巫 该用户已被删除
板凳
发表于 2015-1-23 05:48:31 | 只看该作者
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
愤怒的大鸟 该用户已被删除
地板
发表于 2015-1-31 15:33:32 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
小妖女 该用户已被删除
5#
发表于 2015-2-6 21:00:29 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
只想知道 该用户已被删除
6#
发表于 2015-2-18 19:29:57 | 只看该作者
可以使用 CSS 检查工具进行设计。
飘飘悠悠 该用户已被删除
7#
发表于 2015-3-6 09:44:51 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
老尸 该用户已被删除
8#
发表于 2015-3-20 07:27:24 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-18 09:08

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表