Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

201 lines (192 sloc) 7.827 kB
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Dropdown</title>
<link rel="stylesheet" type="text/css" href="msdropdown/dd.css" />
<script type="text/javascript" src="msdropdown/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="msdropdown/js/jquery.dd.js"></script>
<style type="text/css">
h4{margin:0 0 10px 0;padding:0 0 10px 0;; border-bottom:1px solid #c3c3c3}
.toplinks {font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color: #777777;
color:#fff;
border-bottom:2px solid #c3c3c3;
margin-bottom:10px;
padding-bottom:10px;
}
.toplinks a, .toplinks a :visited{color:#FFF;}
.small{font-size:10px; line-height:12px; color:#006; font-weight:normal; font-family:Arial, Helvetica, sans-serif; position:relative; top:-10px}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="5" class="toplinks">
<tr>
<td width="11%"><strong><a href="normal.html">Simple</a></strong></td>
<td width="16%"><a href="cssSprite.html"><strong>CSS Sprite</strong></a></td>
<td width="18%"><a href="multipleSkin.html"><strong>Multiple skin</strong></a></td>
<td width="17%"><a href="objectOriented.html"><strong>Object Oriented Approch</strong></a></td>
<td width="18%"><a href="ajax-main.html"><strong>Ajax Call</strong></a></td>
<td width="20%"><a href="mouse-events.html"><strong>Mouse Events</strong></a></td>
</tr>
</table>
<form name="myform" id="myform" action="getvalue.php" enctype="multipart/form-data" method="post">
<h1>Javascript image dropdown <span id="ver"></span> <a class="small" href="http://www.marghoobsuleman.com/jquery-image-dropdown" title="Download">Download</a> </h1>
<table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="4" align="center"><h4><strong>Add/Remove</strong></h4></td>
</tr>
<tr>
<td valign="top"><select name="websites3" id="websites3" style='width:200px;' size="5">
<option value="calendar" selected="selected" title="icons/icon_calendar.gif">Calendar</option>
<option value="shopping_cart" title="icons/icon_cart.gif">Shopping Cart</option>
<option value="cd" title="icons/icon_cd.gif">CD</option>
<option value="email" title="icons/icon_email.gif">Email</option>
<option value="faq" title="icons/icon_faq.gif">FAQ</option>
<option value="games" title="icons/icon_games.gif">Games</option>
<option name="music" value="music" title="icons/icon_music.gif">Music</option>
<option value="phone" title="icons/icon_phone.gif">Phone</option>
<option value="graph" title="icons/icon_sales.gif">Graph</option>
<option value="secured" title="icons/icon_secure.gif">Secured</option>
<option value="video" title="icons/icon_video.gif">Video</option>
</select></td>
<td><input type="button" value="<- Add ->" onclick="add()" /></td>
<td valign="top"><select name="websites" id="websites" style="width:200px;" size="7">
</select></td>
<td><input type="button" value="<- Remove" onclick="remove()" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td colspan="4" align="center"><h4>Show/Hide - <strong>Enable/Disable</strong> etc</h4></td>
</tr>
<tr>
<td><select name="websites2" id="websites2" style="width:200px;">
<option value="calendar" selected="selected" title="icons/icon_calendar.gif">Calendar</option>
<option value="shopping_cart" title="icons/icon_cart.gif">Shopping Cart</option>
<option value="cd" title="icons/icon_cd.gif">CD</option>
<option value="email" title="icons/icon_email.gif">Email</option>
<option value="faq" title="icons/icon_faq.gif">FAQ</option>
<option value="games" title="icons/icon_games.gif">Games</option>
<option name="music" value="music" title="icons/icon_music.gif">Music</option>
<option value="phone" title="icons/icon_phone.gif">Phone</option>
<option value="graph" title="icons/icon_sales.gif">Graph</option>
<option value="secured" title="icons/icon_secure.gif">Secured</option>
<option value="video" title="icons/icon_video.gif">Video</option>
</select></td>
<td><input type="button" value="&lt;- Show/Hide" onclick="display(oHandler2)" /></td>
<td colspan="2"><input type="button" value="&lt;- Disable" onclick="disabledDD(oHandler2, true)" />
<input type="button" value="&lt;- Enable" onclick="disabledDD(oHandler2, false)" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td colspan="2"><input type="button" name="open3" id="open3" value="&lt;- Open" class="open" />
<input type="button" name="close3" id="close3" value="&lt;- Close" class="close" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td><input type="submit" value="Submit Value" /></td>
<td>&nbsp;</td>
<td colspan="2"><input type="button" value="Show/Hide Original Dropdowns" onclick="showOriginalDropdowns()" /></td>
</tr>
</table>
<p>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;<br />
<br />
</p>
<p><br />
</p>
</form>
<script language="javascript" type="text/javascript">
var getArray
function showvalue(arg) {
alert(arg);
//arg.visible(false);
}
var oHandler1;
function add() {
var currentOpt = document.getElementById("websites3").options[document.getElementById("websites3").selectedIndex];
oHandler1.add(currentOpt);
}
function remove() {
try {
var selecteIndex = oHandler1.get("selectedIndex");
if(selecteIndex <= 0) {
alert("Please make a selection");
} else {
oHandler1.remove(selecteIndex);
}
} catch(e) {
alert(e.message);
}
}
///handler 2
function disabledDD(handler, dis) {
if(handler) {
handler.disabled(dis);
}
}
function display(handler) {
if(handler) {
var isvisible = handler.visible();
isvisible = (isvisible=='block') ? false : true;
handler.visible(isvisible);
}
}
//
var dbg = 0;
function showOriginalDropdowns() {
//$("div.ddOutOfVision").removeAttr("style");
//console.debug("dbg "+dbg);
dbg = !dbg;
oHandler1.debug(dbg);
}
$(document).ready(function() {
try {
$("#websites3").msDropDown({style:'border:"none"; font-size:14px'});
getArray = oHandler1 = $("#websites").msDropDown().data("dd");
//alert($.msDropDown.version);
//$.msDropDown.create("body select");
oHandler2 = $("#websites2").msDropDown().data("dd");
$("#open3").click(function() {oHandler2.open();});
$("#close3").click(function() {oHandler2.close();});
//alert(oHandler2.namedItem("music"));
$("#ver").html($.msDropDown.version);
} catch(e) {
alert("Error: "+e.message);
}
})
</script>
<div class="node-links" style="padding:10px; border:1px solid #c3c3c3;background:#222222; margin-top:40px">
<div class="adsense">
<script type="text/javascript"><!--
google_ad_client = "pub-7681689922712917";
/* 468x15 */
google_ad_slot = "4604426671";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script>
<!--script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script-->
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.