ASP.NET Mania. Пример кода JavaScript

Логин

Email:
Пароль:
Помнить меня
Войти Зарегистрироваться Забыл пароль

Поиск

Искать :
	Вперед

Книги по теме

Искать:

в:

Порядок:

Исходник

Автор:

nik

Название:

JavaScript - Select object

Дата:

22 September 2004

Описание:

"Я уже несколько раз сталкивался с глюком DropDownList (то есть "select ...") в IE. Он всегда отображается поверх элементов, у которых z-index больше." - ЛЕЧИТ ЭТО :) + each option object has Title

Разместить ссылку на этот исходник в форуме вы можете вставив в текст сообщения следующую строку: [CODEPOST ID=111]JavaScript - Select object[/CODEPOST]

Оценка:

Проголосовало 12 посетителей, средняя оценка 2.17

Оценить:

Ea privedu primer bez obiasnenii, to esti .
Sozdaite papku TEST.
V papke sozdaite:
1. Help.htm
2. SelectComponent.js
3. papku images (
sdezi vi doljni sozdati 2 image: arrowDown.gif 17*19, arrowUp.gif 17*19)
Prosta scopiruite html content v html fail
I sootvestvenno script v js file.

Doubleclick Help.htm
-----------------------HTML - FILE-----------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<STYLE>
</STYLE>

<script src="SelectComponent.js" language="JavaScript" type="text/javascript"></script>

<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bordercolor="#000000">
<tr>
<td bgcolor="#FFCC99" ><div align="center">This is a simple select with a lot of options <font color="#FF0000"><strong>ex.1</strong></font></div></td>
<td bgcolor="#FFCC99"><div align="center">This one, is the same select but has a function that
is called when the onChange event fired <font color="#FF0000"><strong>ex.2</strong></font></div></td>
</tr>
<tr>
<td> <div id="Test"></div>
<div align="center">
<script language="JavaScript">
var a = new CDSelect("Test","a",4);

a.addOption("Test0","firstId","Test Title0");
a.addOption("Test1","secondId","Test Title1");
a.addOption("Test2","3Id","Test Title2");
a.addOption("Test3","4Id","Test Title3");
a.addOption("Test14","5Id","Test Title4");
a.addOption("Test5","6d","Test Title5");
a.addOption("Test6","7d","Test Title6");
a.addOption("Test700","8Id","Test Title7");
a.addOption("Textdetestareaselectului","8Isd","Test Title7");
</script>
</div></td>
<td width="50%"> <div id="Taest"></div>

<div id="CoverDiv" style="position:absolute; border:1px solid; left: 413px; top: 64px; width: 120px; height: 61px; background-color: #CCCCCC; layer-background-color: #CCCCCC;"><font color="#FF0000"><strong>Normaly
this div can't cover this select. Now it's possible!</strong></font></div>
<div align="center">
<script language="JavaScript">
var b = new CDSelect("Taest","b",0);
b.addOption("Test17","8I9d","Test Title17");
b.addOption("Test14","8I49d","Test Title17");
b.addOption("Test14 is a text input","8I4s9d","Test Title17");

b.onChange = "MyF(b.selected.id);";
function MyF(str){
alert("This is selected id = "+str);
}
</script>
</div></td>
</tr>
<tr>
<td colspan="2"> <p> </p>
<p> </p>
<p> </p></td>
</tr>
<tr>
<td colspan="2"> <strong>This object resoves 2 "bugs" that the natural select
dosen't support in IE5.0 and greter</strong><br>
1. Each option of the select object has a <em><strong><font size="2" face="Arial, Helvetica, sans-serif">title</font></strong></em>
now.<br>
2. The select object can be manipulate now with the <em><font size="2" face="Arial, Helvetica, sans-serif"><strong>z-index
</strong></font></em>option (that it's not possible with the <em>"natural"</em>
select object) </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFCC99"><font color="#FF0000"> Constructor:</font></td>
</tr>
<tr>
<td colspan="2"><blockquote>
First of all, you have to declare a <em><strong>div object</strong></em>
where the select object wil be built.<br>
Let's say <strong><font size="2" face="Arial, Helvetica, sans-serif"><em><div
id='TestDiv'> </div></em></font></strong> <br>
After that we build our object: <br>
<strong><em><font size="2" face="Arial, Helvetica, sans-serif"> <script>
<br>
   var a = new CDSelect(string1,string2,int);<br>
</script></font></em></strong>
<table width="73%" border="0" cellpadding="0" cellspacing="2" bgcolor="#CCCCCC">
<tr valign="top">
<td width="12%"><div align="center"><em><font size="2" face="Arial, Helvetica, sans-serif">string1</font></em>
<br>
         </div></td>
<td width="88%"> (<em>type string</em>)it's a string that will send
the name of our <em><font size="2" face="Arial, Helvetica, sans-serif">div</font></em>,
declared above </td>
</tr>
<tr valign="top">
<td><div align="center"><font size="2" face="Arial, Helvetica, sans-serif"><em>string2</em></font>
<br>
          </div></td>
<td> (<em>type string</em>) the string that will provide to script
engine the object name, our case it's <font size="2" face="Arial, Helvetica, sans-serif"><em><strong>a</strong></em></font></td>
</tr>
<tr valign="top">
<td><div align="center"><em><font size="2" face="Arial, Helvetica, sans-serif">int</font></em>
</div></td>
<td> (<em>type int</em>) can be a digit that will indicate to object
how many elements it have to provide without scroll bar (in <strong><font color="#FF0000">ex.1
int = 4</font></strong>). If you put <font size="2"><em><strong>0</strong></em></font>,
than the object wil never provide a scroll. You can use it when
the object will have a few opions. See the <font color="#FF0000"><strong>ex
2. int = 0</strong></font> </td>
</tr>
</table>
</blockquote></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr bgcolor="#FFCC99">
<td colspan="2"><font color="#FF0000"> Propreties:</font></td>
</tr>

<tr valign="top">
<td colspan="2"><blockquote> <em><font size="2" face="Arial, Helvetica, sans-serif"><strong>var
obj = object.selected;</strong></font></em> - provide acces at the selected
option <br>
<strong><em><font size="2" face="Arial, Helvetica, sans-serif"> where
obj is a standart <font color="#FF0000">text object </font>and you can
accesse all of this object's properties. <br>
<script>
<br>
   alert(a.selected);<br>
</script></font></em></strong>
<br>
</blockquote>

</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr bgcolor="#FFCC99">
<td colspan="2"><font color="#FF0000"> Methods:</font></td>
</tr>

<tr>
<td colspan="2"><blockquote> <em><font size="2" face="Arial, Helvetica, sans-serif"><strong>object.addOption(string1,
string2, string3);</strong></font></em><br>
<strong><em><font size="2" face="Arial, Helvetica, sans-serif"><script>
<br>
   a.addOption(string1, string2, string3);<br>
</script></font></em></strong>
<br>
<table width="73%" border="0" cellpadding="0" cellspacing="2" bgcolor="#CCCCCC">
<tr valign="top">
<td width="12%"><div align="center"><em><font size="2" face="Arial, Helvetica, sans-serif">string1</font></em>
<br>
         </div></td>
<td width="88%"> (<em>type string</em>) it's the option text</td>
</tr>
<tr valign="top">
<td><div align="center"><font size="2" face="Arial, Helvetica, sans-serif"><em>string2</em></font>
<br>
          </div></td>
<td> (<em>type string</em>) the string that will be the option's <em>id</em></td>
</tr>
<tr valign="top">
<td><div align="center"><em><font size="2" face="Arial, Helvetica, sans-serif">string3</font></em>
</div></td>
<td> (<em>type string</em>) the option's <em>title</em></td>
</tr>
</table>
</blockquote>

</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr bgcolor="#FFCC99">
<td colspan="2"><font color="#FF0000"> Event:</font></td>
</tr>

<tr valign="top">
<td colspan="2"><blockquote> <em><font size="2" face="Arial, Helvetica, sans-serif"><strong>object.onChange
= "FunctionName(\"param1\",\"param2\"...)";</strong></font></em><br>
<strong><em><font face="Arial, Helvetica, sans-serif">Ex:</font></em></strong><br>
<strong><em><font size="2" face="Arial, Helvetica, sans-serif"><script>
<br>
   a.onChange = MyFunction( \"b.selected.id\");<br>
<br>
function MyFunction(str){<br>
   alert("This is selected id = "str);<br>
}
<br>
<font color="#FF0000" size="1">see the ex2.</font> <br>
</script></font></em></strong>
<br>
<table width="73%" border="0" cellpadding="0" cellspacing="2" bgcolor="#CCCCCC">
<tr valign="top">
<td width="12%" height="38"><div align="center"><em><font size="2" face="Arial, Helvetica, sans-serif">param1..n</font></em><br>
         </div></td>
<td width="88%"> (<em>type string</em>) the parameter of your function</td>
</tr>
</table>
</blockquote>

</td>
</tr>
</table>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="asta">created by <a href="mailto:sergyu_mail@yahoo.fr">Black</a></div>
</body>
</html>

-----------------------END -------- HTML - FILE-------------------------------

----------SCRIPT FILE ----------------------------
// This script was written by Black

var Ccount=0;
var last_Select="null";

function CDSelect(idDiv,nm,nr_option){
this.count = Ccount++;
this.Varname = nm;
this.idDiv = document.getElementById(idDiv);
this.selected="null";
this.selected_id;
this.Options = new Array();
this.heightSel = nr_option*20;
draw_DIV(this.idDiv,this.Varname,this.count,this.heightSel);
this.defaultInput = document.getElementById("blankOption"+this.count);
this.onChange = "";

/**************** Here are the methods*********************/
this.addOption = addOption;
this.show = show;
this.selectVal = selectVal;
addCSS();
}

function draw_DIV(idDiv,Varname,count,heightSel){
var obj = idDiv;

obj.innerHTML += "<table id='selectTb"+count+"' cellpadding='0' cellspacing='0' border='0' width='100%'>";
obj = document.getElementById("selectTb"+count);
var Row = obj.insertRow();
var oCell = Row.insertCell();
oCell.style.borderTopStyle="groove";
oCell.style.borderTopWidth = "3px";
oCell.style.borderBottomWidth = "1px";
oCell.style.borderBottomStyle="inset";

oCell.style.borderLeftStyle="groove";
oCell.style.borderLeftWidth = "2px";
oCell.vAlign = "bottom";
obj = oCell;

obj.innerHTML ="<input id='blankOption"+count+"' type='text' width='5px' title='No values' readonly style='cursor:default;border:0px;marginTop:0px' onmousedown='"+Varname+".show()';'>";
oCell = Row.insertCell();
oCell.style.borderTopStyle="groove";
oCell.style.borderTopWidth = "3px";
oCell.style.borderBottomWidth = "1px";
oCell.style.borderBottomStyle="inset";
oCell.style.borderRightStyle="groove";
oCell.style.borderRightWidth = "2px";

oCell.innerHTML ="<img src='images/arrowUp.gif' onmousedown='changeImg(this,true);"+Varname+".show();' onmouseup='changeImg(this,false)'>";
obj = idDiv;
if(heightSel !=0)obj.innerHTML +="<div id='selectBody"+count+"' style='width:100%;display:none;height:"+heightSel+"px;position:absolute;overflow-y:auto;border:1px solid #000000;width:100%;background-color:white;layer-background-color:white' onmousedown='window.event.cancelBubble = true'>";
else obj.innerHTML +="<div id='selectBody"+count+"' style='width:100%;display:none;;position:absolute;border:1px solid #000000;width:100%;background-color:white;layer-background-color:white;' onmousedown='window.event.cancelBubble = true'>";
obj = document.getElementById("selectBody"+count);
obj.innerHTML +="<table cellpadding='0' width='100%' cellspacing='0' bgcolor='#FFFFFF' id='selectTable"+count+"' border=0>";
}

function addOption(val,id,titl){
var obj = document.getElementById("selectTable"+this.count);
if(val.length > this.defaultInput.value.length){
this.defaultInput.style.posWidth=7*(val.length);
}
var Row = obj.insertRow();
var oCell = Row.insertCell();
Row.id = "TR"+id+this.count;
oCell.title = titl;
oCell.innerHTML +="<input type='text' readonly width='5px' style='border:0px;cursor:default;' id='Sel"+this.count+"_"+id+"' value='"+val+"' onMouseOver='selectedCss(this,"+this.Varname+".selected,true);' onMouseOut='selectedCss(this,false)' onmousedown='"+this.Varname+".selectVal(this)'>";
this.Options[this.Options.length]=document.getElementById("Sel"+this.count+"_"+id);

if(this.Options.length==1){
this.defaultInput.value = this.Options[0].value;
this.defaultInput.title = oCell.title;
this.selected = this.defaultInput;
this.selected_id = id;
// this.selected.id = id;
}

for(i=0; i < this.Options.length; i++){
this.Options[i].style.posWidth= this.defaultInput.style.posWidth;

}
// document.getElementById("selectTable"+this.count).style.posWidth = 18+document.getElementById("selectTb"+this.count).style.posWidth;
if(this.heightSel ==0)this.idDiv.style.width = 20+this.defaultInput.style.posWidth
else this.idDiv.style.width = this.defaultInput.style.posWidth;

return this.Options[this.Options.length-1];
}

function show(){
document.body.attachEvent("onmousedown",CloseSelect);
if(this.Options.length > 0){
var obj = document.getElementById("selectBody"+this.count);
if(last_Select!="null"){
var last_id = last_Select.id;
if(last_id.substring(last_id .length,last_id.length-1)!= this.count) last_Select.style.display = "none";
}

selectedCss(this.selected,"null",true);
var div = document.getElementById("selectBody"+this.count);
if(div.style.display=="none"){
div.style.display="";
document.getElementById("selectBody"+this.count).focus();
last_Select = div;
}
else{
div.style.display="none";
document.body.detachEvent("onmousedown",CloseSelect);
}
}
if(event) window.event.cancelBubble = true;
}

function selectVal(obj){
if(obj != this.selected){
if(this.selected !="null")selectedCss(this.selected,"null",false);
this.selected = obj;
var a = (obj.id).split("_");
this.selected_id = a[1];
obj = document.getElementById("blankOption"+this.count);
obj.value = this.selected.value
obj.title = this.selected.title;
ON_change(this.onChange);
}
this.show();
}

function selectedCss(obj,last_obj,stat){
if(stat){
obj.className='Selected';
obj.parentNode.parentNode.className="Selected";
if(last_obj!="null" && last_obj!=obj){
last_obj.className='UnSelected';
last_obj.parentNode.parentNode.className="UnSelected";
}
}else{
obj.className='UnSelected';
obj.parentNode.parentNode.className="UnSelected";
}
}

function changeImg(obj,stat){
if(stat) obj.src='images/arrowDown.gif';
else obj.src='images/arrowUp.gif';
}

function CloseSelect(){
var div = document.getElementById("selectBody"+this.count);
if(last_Select!="null"){
last_Select.style.display="none";
}
document.body.detachEvent("onmousedown",CloseSelect);
}

function addCSS(){
document.styleSheets[0].addRule(".Selected", "background: #003366;color: #FFFFFF;");
document.styleSheets[0].addRule(".UnSelected", "background: #FFFFFF;color: #000000;");
}

function ON_change(str){
eval(str);
}

-----------------------END -------- SCRIPT - FILE-------------------------------

Вернуться к списку исходников в категории Немного оффтопа

Наш Киев

Apartments for Rent


Идея: Dimon aka Manowar Программирование: Dimon aka Manowar Дизайн: Dan Lebedev

Хостинг от компании Parking.ru

Карта сайта