jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – simplemodal对话框中链接的Tab键顺序大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用优秀的 jquery.simplemodal对话框插件显示项目列表.这些项目包含超链接.这一切都很有效,只是模态对话框中的链接不会作为Tab键顺序的一部分出现.我已经尝试显式设置tabindex,但由于某种原因,只有输入元素按Tab键顺序排列 – 如果我通过对话框选中我只是循环通过3个输入元素而不打击锚点.

我是否在调用simplemodal插件时出错?

一个例子是在http://dev.andrewbucknell.com/basic/demo1.html

演示的代码(带有相对路径)如下

<!DOCTYPE html>  
<html>  
<head>  
<title> SimpleModal Basic Modal Dialog </title>  
<Meta name='author' content='Eric MarTin' />  
<Meta name='copyright' content='2010 - Eric MarTin' /> 
<!-- Page styles -->  
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' /> 
<!-- Contact Form CSS files -->  
<link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' /> 
<!-- IE6 "fix" for the close png image -->  
<!--[if lt IE 7]>  
<link type='text/css' href='css/basic_ie.css' rel='stylesheet' media='screen' />  
<![endif]--> 
<!-- JS files are loaded at the bottom of the page -->  
</head>  
<body>  
<div id='container'>  
        <div id='logo'>  
                <h1>Simple<span>Modal</span></h1>  
                <span class='title'>A Modal Dialog Framework Plugin for jQuery</span>  
        </div>  
        <div id='content'>  
                <div id='basic-modal'>  
                        <h3>Basic Modal Dialog</h3>  
                        <p>A basic modal dialog with minimal styling and no additional options. There 
are a few CSS properties set internally by SimpleModal,however,SimpleModal relies mostly 
on style options and/or external CSS for the look and feel.</p>
                        <input type='button' name='basic' value='Demo' class='basic'/> or <a 
href='#' class='basic'>Demo</a>
                </div>  
                <div id="funddialog">  
                        <div id="fundpickfilter">  
                                <div class="fundfilter">  
                                        <label style="font-weight: bold;" for="filtertext">Find: </label>  
                                        <input class="tfilter" type="text" id="filtertext" value=""/>  
                                </div>  
                                <div id="fundactions">  
                                                <button type="button" id="fundsearch" 
class="searchbutton">Search</button>
                                                <button type="button" id="fundreset" 
class="resetbutton">Reset</button>  
                                </div>  
                        </div>  
                        <div id="fundpicklist">  
                                <div class="fund"><a href="http://www.slashdot.org" >Item 
1</a></div>  
                                <div class="fund"><a href="http://www.arstechnica.com" >Item 
2</a></div>  
                                <div class="fund"><a href="http://www.techmeme.com" >Item 
3</a></div>  
                        </div>  
                </div>  
                <!-- modal content -->  
                <div id="basic-modal-content">  
                        <div id="funddialog">  
                                <div id="fundpickfilter">  
                                        <div class="fundfilter">  
                                                <label style="font-weight: bold;" for="filtertext">Find: </label>  
                                                <input class="tfilter" type="text" id="filtertext" value=""/>  
                                        </div>  
                                        <div id="fundactions">  
                                                        <button type="button" id="fundsearch" 
class="searchbutton">Search</button>
                                                        <button type="button" id="fundreset" 
class="resetbutton">Reset</button>
                                        </div>  
                                </div>  
                                <div id="fundpicklist">  
                                        <div class="fund"><a href="http://www.slashdot.org" >Item 
1</a></div>  
                                        <div class="fund"><a href="http://www.arstechnica.com" >Item 
2</a></div>  
                                        <div class="fund"><a href="http://www.techmeme.com" >Item 
3</a></div>  
                                </div>  
                        </div>  
                </div>  
        </div>  
</div>  
<!-- Load jQuery,SimpleModal and Basic JS files -->  
<script type='text/javascript' src='js/jquery.js'></script>  
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>  
<script type='text/javascript' src='js/basic.js'></script>  
</body>  
</html>

解决方法

自己也遇到了这个问题.这是我到目前为止所做的工作. Simplemodal必须在函数’watchTab’和’focus’中添加选项卡导航,以便将焦点保持在模态内.它通过记录第一个和最后一个输入来实现这一点,当你选择它们时,关注适当的其他输入.不幸的是,它只关注输入而不是链接.这意味着您只能选择位于第一个和最后一个输入元素之间的链接.您可以覆盖或修改这些函数以获得所需的行为.像这样的东西:

用var input = $替换第473行(‘#simplemodal-data:input:visible:enabled,#simplemodal-data a:visible’)[p]();

s.inputs = $替换第592行(‘#simplemodal-data:input:visible:enabled,#simplemodal-data a:visible’);

这是一个简单的解决方案,在浏览器没有链接的情况下可能会破坏.我会尝试提出更好的方法.

大佬总结

以上是大佬教程为你收集整理的jquery – simplemodal对话框中链接的Tab键顺序全部内容,希望文章能够帮你解决jquery – simplemodal对话框中链接的Tab键顺序所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。