- 浏览: 58721 次
- 性别:
- 来自: 江西
文章分类
最新评论
注释:code来源javaeye
使用前要引入jquery库和jquery.hotkeys.js ui
HTML CODE
js code
使用前要引入jquery库和jquery.hotkeys.js ui
HTML CODE
<div class="searchform"> <form action="" method="post" onsubmit="return false;"> <input type="text" name="top_search" class="text global_search" /> <input type="button" value="" class="subform" /><!--<input type="button" value="" class="subform2" />--></form> <ul id="search_list"> <li><a href="#" title="Private Equity Firms">Private Equity Firms</a></li> <li><a href="#" title="Porfolio Companies">Porfolio Companies</a></li> <li><a href="#" title="Professionals">Professionals</a></li> <li><a href="#" title="Lenders">Lenders</a></li> </ul> <input type="hidden" name="prevTrIndex" id="prevTrIndex" value="-1" /> </div>
js code
<script type="text/javascript"> //<![CDATA[ /** * @about search part js packaging for pe website 3.28 * @Copyright 2011, WANGXIANG * @MAILTO: flyxiang228@gmail.com */ (function ($) { $.fn.gobalSearch = function (options) { var defaults = { contanier: '', //drop menu contentsearch_list prevTrIndex: '', //mark prevTrIndex items: ['Private Equity Firms', 'Portfolio Companies', 'Professionals', 'Lenders'] //['Private Equity Firms','Portfolio Companies','Professionals','Lenders'] }; var options = $.extend(defaults, options); this.each(function () { var globalSearch = $(this); var searchbtn = globalSearch.next(); var nextele = globalSearch.parent().next(); var drop_li = nextele.children(); var prevEle = $("#" + options.prevTrIndex); //js方法判断当前搜索框触发return按键 /*globalSearch.keydown(function(event){ var evt=event ? event : (window.event ? window.event:null);//兼容IE和FF if (evt.keyCode==13){ nextele.show(); globalSearch.blur(); mainDrop(); } });*/ //jquery借助jquery.hotkey.js插件获取键盘return按键的事件 globalSearch.bind('keydown', 'return', function (evt) { nextele.show(); globalSearch.blur(); mainDrop(); }); drop_li.bind('click', function () { var $this = $(this); var selectVal = $this.text(); var searchVal = globalSearch.val(); var relVal = $this.children('a').attr('rel'); switch (selectVal) { case options.items[0]: window.location.href = relVal + searchVal; break; case options.items[1]: window.location.href = relVal + searchVal; break; case options.items[2]: window.location.href = relVal + searchVal; break; case options.items[3]: window.location.href = relVal + searchVal; break; default: return false; }; nextele.hide(); return false; }); $(document).bind('keydown', 'up', function (evt) { var prevTrIndex = parseInt(prevEle.val()); if (prevTrIndex == -1 || prevTrIndex == 0) { clickTr(trSize - 1); } else if (prevTrIndex > 0) { clickTr(prevTrIndex - 1); }; return false; }).bind('keydown', 'down', function (evt) { var prevTrIndex = parseInt(prevEle.val()); if (prevTrIndex == -1 || prevTrIndex == (trSize - 1)) { clickTr(0); } else if (prevTrIndex < (trSize - 1)) { clickTr(prevTrIndex + 1); }; return false; }).bind('keydown', 'return', function (evt) { var prevTrIndex = parseInt(prevEle.val()); var searchVal = globalSearch.val(); var curli = $("#li_" + prevTrIndex); var selectVal = curli.text(); var relVal = curli.children('a').attr('rel'); switch (selectVal) { case options.items[0]: window.location.href = relVal + searchVal; break; case options.items[1]: window.location.href = relVal + searchVal; break; case options.items[2]: window.location.href = relVal + searchVal; break; case options.items[3]: window.location.href = relVal + searchVal; break; default: return false; }; nextele.hide(); return false; }).bind('click', function () { nextele.hide(); }); searchbtn.click(function () { if (!(nextele.css('display') == 'block')) { nextele.show(); $(this).blur(); mainDrop(); return false; } else { nextele.hide(); return false; }; }).bind('keydown', 'return', function () { nextele.show(); $(this).blur(); mainDrop(); return false; }); //为当前选中的li选中样式 function clickTr(currTrIndex) { var prevTrIndex = prevEle.val(); if (currTrIndex > -1) { $("#li_" + currTrIndex).addClass("current"); } $("#li_" + prevTrIndex).removeClass("current"); prevEle.val(currTrIndex); $("#nuname").val(currTrIndex); }; //下拉菜单添加事件集合方法 function mainDrop() { drop_li.eq(0).focus(); drop_li.removeClass('current'); prevEle.val("-1"); //默认-1 trSize = $("#" + options.contanier).find('li').size(); //li的数量 drop_li.mouseover(function () { //鼠标滑过 $(this).addClass("current"); }).mouseout(function () { //鼠标滑出 $(this).removeClass("current"); }).each(function (i) { //初始化 id 和 index 属性 $(this).attr("id", "li_" + i).attr("index", i); }).click(function () { //鼠标单击 clickTr($(this).attr("index")); }); clickTr(0); return false; }; }); }; })(jQuery); //]]--> </script>
发表评论
-
粒子喷泉
2011-07-18 17:43 829注:来自http://daimaren.cn/blog/?p= ... -
jquery validate addMethod
2011-06-20 15:18 1500只能输入m-n个字符且至少有一个字母和一个数字 jQuer ... -
4个跨浏览器必备的函数
2011-05-26 13:58 688http://www.cssbaby.com/archives ... -
用jquery实现的文本框只能输入数字
2011-05-25 10:14 2251用jquery实现的文本框只能输入数字简单插件 $.fn. ... -
闭包理解
2011-04-28 11:51 767直接看到代码 var list = document.ge ... -
JS/DOM/Ajax/Framework(Jquery/Yui/Mootools/EXT)
2011-03-28 10:09 1029gotop效果 <script> var B ... -
jQuery 封装function
2011-03-25 16:37 1895// JavaScript Document (func ... -
利用浏览器默认方法获取浏览器当前位置
2011-03-19 13:53 982支持浏览器 IE FIREFOX SAFARI CHROME ... -
关于用jQuery实现效果
2011-03-19 09:37 7631、效果1:关于新闻信息文字上下切换 <div i ... -
随滚动条移动的层
2011-02-15 09:51 775<!DOCTYPE html PUBLIC &quo ... -
yui的学习脚印
2011-01-30 22:37 933<!DOCTYPE html PUBLIC &quo ... -
vim 使用
2011-01-21 17:08 643vim命令 vi和vim是linux和u ... -
js左右滚动效果
2011-01-21 14:49 1795<!DOCTYPE html PUBLIC &quo ... -
javascript基础知识
2011-01-19 09:45 697注释:来自http://www.csssea.com/?p=7 ... -
Javascript浏览器兼容问题
2011-01-14 00:13 979Javascript浏览器兼容 1.doc ... -
一个简单的javascript tab选项卡
2011-01-13 20:51 1062<!DOCTYPE html PUBLIC &quo ... -
常用的正则表达式
2011-01-10 13:47 616/** *postal codes regular ... -
一些比较实用的javascript方法
2011-01-10 13:25 873动态加载javascript文件 <script t ... -
javacript实现根据选择不同国家选择显示不同的省/州
2010-12-29 01:13 1426/** * @author wangxiang * ... -
javascript方法(Methods)
2010-12-28 23:49 9261、Array array.concat(item..) co ...
相关推荐
jquery 搜索 键盘选择 li 键盘事件 鼠标事件 ul li 鼠标+键盘上下选择li li变色
jQuery软键盘模拟键盘插件实例应用。
jquery 监听 键盘 事件
jquery实现的支持键盘方向按键和鼠标拖动切换的全屏相册/文字广告特效源码,是一段实现了可以使用键盘上下左右方向按键控制切换的效果代码,同时此段代码也支持鼠标拖动切换画面,本段代码适用于所有网页使用,有...
jquery实现模拟天猫搜索框,监听了键盘的上下键,很实用。
asp.net+jquery实现键盘,用键盘实现用户登录密码操作,同时也可以学习一下jquery
一种漂亮的jquery键盘插件。之前项目里面用到的。键盘效果还是很ok、的,有数字小键盘。还有全键盘
不错的jquery特效,适合于开发触摸屏等无键盘的bs程序!
jquery实现的数字小键盘,限制用户只能输入数字。
用jQuery实现的上下滚动公告栏。主要用jQuery中的animate()方法和setInterval()实现的,代码简单使用。
jquery分页效果制作键盘左右按键分页效果
jQuery键盘插件网页虚拟键盘输入代码 jQuery键盘插件网页虚拟键盘输入代码
jquery实现图片上下抖动
jQuery键盘按钮响应事件代码是一款通过敲打键盘按键可直接响应和按钮一样的事件。
jQueryUI jQueryUI插件 键盘插件 基于 jQueryUI 的小键盘 可灵活修改
jquery支持键盘左右按键切换的选项卡导航菜单代码并可隐藏
jquery实现ul_li菜单展开收起效果.
jquery实现的支持键盘方向按键和鼠标拖动切换的全屏相册文字广告特效源码.zip
C + jQuery 实现的键盘特效,很酷的代码。