这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
图片 + JavaScript+CSS 三者共同打造超漂亮的 select 下拉选择框,更看重外观的朋友将会对本代码非常喜欢。
因为虽然实现起来麻烦点,如果用自带的 Select,很简单的就完成了,但是本代码实际上是在向大家讲述一种 Js 在网页中的应用实战,多种元素之间的配合作用等。
效果如下图:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>
- 下拉select选择框
- </title>
- <meta http-equiv="content-type" content="text/html;charset=gb2312">
- <style type="text/css">
- body{margin:20px auto;font-family:Arial,Helvetica,sans-serif;font-size:12px;width:950px;height:400px;border:solid
- 1px #aaa;position:relative;padding:10px;} h1{font-size:12px;color:#444;}
- ul{margin:0;padding:0;list-style:none;} .dropDownList{position:absolute;left:100px;top:100px;}
- .dropDownList div.dropdown{float:left;margin-right:120px;} .dropDownList
- span{display:block;width:146px;height:26px;background:url(/upload/2010-3/20100303231959754.gif)
- left top no-repeat;line-height:26px;text-indent:12px;border:solid 1px #83BBD9;cursor:default;}
- .dropDownList span.over{background-position:left bottom;border-color:#B4C91A;}
- .dropDownList ul{width:200px;display:none;position:absolute;} .dropDownList
- ul li{background:#eee;height:20px;width:100%;padding:3px 0;text-indent:12px;cursor:default;line-height:20px;}
- /*普通状态下的样式*/ .dropDownList ul li.normal{background:#eee;} /*鼠标移上的样式*/ .dropDownList
- ul li.over{background:#ccc;} /*被选中的样式*/ .dropDownList ul li.current{background:#c2c2c2;font-weight:bold;}
- .dropDownList ul.show{display:block;}
- </style>
- </head>
- <body>
- <form action="#" method="get">
- <div>
- <div>
- <select name="birthday">
- <option>
- 请选择
- </option>
- <option>
- 1986
- </option>
- <option>
- 1987
- </option>
- <option selected="selected">
- 1988
- </option>
- <option>
- 1989
- </option>
- <option>
- 1990
- </option>
- </select>
- 请选择年份
- <ul>
- </ul>
- </div>
- <div>
- <select name="sex">
- <option>
- 性别
- </option>
- <option>
- 男
- </option>
- <option selected="selected">
- 女
- </option>
- <option>
- 不是男,也不是女
- </option>
- </select>
- 请选择性别
- <ul>
- </ul>
- </div>
- <div>
- <select name="student">
- <option>
- 幼儿班
- </option>
- <option>
- 小学
- </option>
- <option selected="selected">
- 初中
- </option>
- <option>
- 高中
- </option>
- </select>
- 请选择学历
- <ul>
- </ul>
- </div>
- </div>
- </form>
- <script type="text/javascript">
- var ____configArray;
- function __initDropDownList(configArray) {
- //获取Select菜单
- ____configArray = configArray;
- var existArray = configArray.split("|");
- for (var i = 0; i < existArray.length; i++) {
- if (existArray[i].length < 1) {
- return;
- }
- //根据参数分别获取div,并分别添加事件
- var parentContainer = document.getElementById(existArray[i]);
- if (!parentContainer) {
- return;
- }
- //获取下面的select,且获取其中的option
- var selectObj = parentContainer.getElementsByTagName("select");
- if (selectObj.length < 1) {
- return;
- }
- var optionArray = selectObj[0].getElementsByTagName("option");
- //获取option,并分别添加到各个li
- var optionLength = optionArray.length;
- for (var j = 0; j < optionLength; j++) {
- //获取ul,以便能够添加项目
- var ulObj = parentContainer.getElementsByTagName("ul");
- if (ulObj.length < 1) {
- return;
- }
- //获取span,以便能显示当前选择的项目
- var spanObj = parentContainer.getElementsByTagName("span");
- if (spanObj.length < 1) {
- return;
- }
- var liObj = document.createElement("li");
- var textNode = document.createTextNode(optionArray[j].firstChild.nodeValue) liObj.appendChild(textNode);
- liObj.setAttribute("currentIndex", j);
- //如果option的selected="selected"
- if (optionArray[j].selected) {
- selectCurrentItem(ulObj[0], liObj);
- }
- //给每个liObj添加事件
- liObj.onclick = function() {
- selectCurrentItem(this.parentNode, this);
- }
- liObj.onmouseover = function() {
- if (this.className.indexOf("current") < 0) {
- this.className = "over";
- }
- }
- liObj.onmouseout = function() {
- if (this.className.indexOf("current") < 0) {
- this.className = "normal";
- }
- }
- ulObj[0].appendChild(liObj);
- spanObj[0].onclick = function(event) {
- //如果当前是显示的,就隐藏,反之亦然
- showHiddenUl(this);
- }
- spanObj[0].onmouseover = function() {
- this.className = 'over';
- }
- spanObj[0].onmouseout = function() {
- this.className = "";
- };
- ulObj[0].onclick = function() {
- this.className = "";
- }
- }
- parentContainer.onclick = function(event) {
- if (!event) {
- event = window.event;
- }
- event.cancelBubble = true;
- var eventUlObj = this.getElementsByTagName("ul")[0];
- bodyClickHiddenUl(eventUlObj);
- }
- }
- }
- function selectCurrentItem(ulObj, currentObj) {
- var parentObj = ulObj.parentNode;
- var spanObj = parentObj.getElementsByTagName("span")[0];
- spanObj.firstChild.nodeValue = currentObj.firstChild.nodeValue;
- var selectObj = parentObj.getElementsByTagName("select")[0];
- selectObj.selectedIndex = parseInt(currentObj.getAttribute("currentIndex"));
- var ulLiObj = ulObj.getElementsByTagName("li");
- var length = ulLiObj.length;
- var currentLiObj = null;
- for (var i = 0; i < length; i++) {
- currentLiObj = ulLiObj[i];
- currentLiObj.className = "normal";
- }
- currentObj.className = "current";
- }
- function showHiddenUl(currentObj) {
- var parentNode = currentObj.parentNode;
- var ulObj = parentNode.getElementsByTagName("ul")[0];
- if (ulObj.className == "") {
- ulObj.className = "show";
- } else {
- ulObj.className = "";
- }
- }
- //点击body区域(非"下拉菜单")隐藏菜单
- function addBodyClick(func) {
- var bodyObj = document.getElementsByTagName("body")[0];
- var oldBodyClick = bodyObj.onclick;
- if (typeof bodyObj.onclick != 'function') {
- bodyObj.onclick = func;
- } else {
- bodyObj.onclick = function() {
- oldBodyClick();
- func();
- }
- }
- }
- //隐藏所有的UL
- function bodyClickHiddenUl(eventUlObj) {
- var existArray = ____configArray.split("|");
- for (var i = 0; i < existArray.length; i++) {
- if (existArray[i].length < 1) {
- return;
- }
- //寻找所有UL并且隐藏
- var parentContainer = document.getElementById(existArray[i]);
- if (!parentContainer) {
- return;
- }
- var ulObj = parentContainer.getElementsByTagName("ul");
- if (eventUlObj != ulObj[0]) {
- ulObj[0].className = "";
- }
- }
- }
- var __dropDownList = "dropDownList1|dropDownList2|dropDownList3";
- __initDropDownList(__dropDownList);
- //添加这个可以确保点击body区域的时候 也可以隐藏菜单
- addBodyClick(bodyClickHiddenUl);
- </script>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0628/285495.html