deploy awal
This commit is contained in:
atuy
@@ -0,0 +1,64 @@
|
||||
.borderRadius{-moz-border-radius:5px; border-radius:5px; }
|
||||
.borderRadiusTp{-moz-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0;}
|
||||
.borderRadiusBtm{-moz-border-radius:0 0 5px 5px ; border-radius:0 0 5px 5px;}
|
||||
|
||||
.ddcommon {position:relative;display:-moz-inline-stack; zoom:1; display:inline-block; *display:inline; cursor:default;}
|
||||
.ddcommon ul{padding:0;margin:0;}
|
||||
.ddcommon ul li{list-style-type:none;}
|
||||
.borderRadiusTp ul li:last-child{-moz-border-radius:0 0 5px 5px ; border-radius:0 0 5px 5px;border-bottom:0 none #c3c3c3; }
|
||||
.borderRadiusBtm ul li:first-child{-moz-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0 ;border-bottom:1 solid #c3c3c3; }
|
||||
|
||||
.ddcommon .disabled img, .ddcommon .disabled span, .ddcommon.disabledAll{
|
||||
opacity: .5; /* standard: ff gt 1.5, opera, safari */
|
||||
-ms-filter:"alpha(opacity=50)"; /* ie 8 */
|
||||
filter:alpha(opacity=50); /* ie lt 7 */
|
||||
-khtml-opacity:.5; /* safari 1.x */
|
||||
-moz-opacity:.5; /* ff lt 1.5, netscape */
|
||||
color:#999999;
|
||||
}
|
||||
.ddcommon .clear{clear:both}
|
||||
.ddcommon .shadow{-moz-box-shadow:5px 5px 5px -5px #888888;-webkit-box-shadow:5px 5px 5px -5px #888888;box-shadow: 5px 5px 5px -5px #888888;}
|
||||
.ddcommon input.text{color:#7e7e7e;padding:0 0 0 0; position:absolute; background:#fff; display:block; width:98%; height:98%; left:2px; top:0; border:none;}
|
||||
.ddOutOfVision{position:relative; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline;}
|
||||
.borderRadius .shadow{-moz-box-shadow:5px 5px 5px -5px #888888;-webkit-box-shadow:5px 5px 5px -5px #888888;box-shadow: 5px 5px 5px -5px #888888;}
|
||||
.borderRadiusBtm .shadow{-moz-box-shadow:-5px -5px 5px -5px #888888;-webkit-box-shadow:-5px -5px 5px -5px #888888;box-shadow: -5px -5px 5px -5px #888888}
|
||||
.borderRadiusTp .border, .borderRadius .border{-moz-border-radius:0 0 5px 5px ; border-radius:0 0 5px 5px;}
|
||||
.borderRadiusBtm .border{-moz-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0;}
|
||||
img.fnone{float:none !important}
|
||||
.ddcommon .divider{width:0; height:100%; position:absolute;}
|
||||
.ddcommon .ddArrow{display:inline-block; position:absolute; top:50%; right:4px;}
|
||||
.ddcommon .ddArrow:hover{background-position:0 100%;}
|
||||
.ddcommon .ddTitle{padding:0; position:relative; display:inline-block; width:100%}
|
||||
.ddcommon .ddTitle .ddTitleText{display:block;}
|
||||
.ddcommon .ddTitle .ddTitleText .ddTitleText{padding:0;}
|
||||
.ddcommon .ddTitle .description{display:block;}
|
||||
.ddcommon .ddTitle .ddTitleText img{position:relative; vertical-align:middle; float:left}
|
||||
.ddcommon .ddChild{position:absolute;display:none;width:100%;overflow-y:auto; overflow-x:hidden; zoom:1; z-index:9999}
|
||||
.ddcommon .ddChild li{clear:both;}
|
||||
.ddcommon .ddChild li .description{display:block;}
|
||||
.ddcommon .ddChild li img{border:0 none; position:relative;vertical-align:middle;float:left}
|
||||
.ddcommon .ddChild li.optgroup{padding:0;}
|
||||
.ddcommon .ddChild li.optgroup .optgroupTitle{padding:0 5px; font-weight:bold; font-style:italic}
|
||||
.ddcommon .ddChild li.optgroup ul li{padding:5px 5px 5px 15px}
|
||||
.ddcommon .noBorderTop{border-top:none 0 !important; padding:0; margin:0;}
|
||||
|
||||
/*************** default theme **********************/
|
||||
.dd{border:1px solid #c3c3c3;}
|
||||
.dd .divider{border-left:1px solid #c3c3c3; border-right:1px solid #fff;; right:24px;}
|
||||
.dd .ddArrow{width:16px;height:16px; margin-top:-8px; background:url(../../images/msdropdown/skin1/dd_arrow.gif) no-repeat;}
|
||||
.dd .ddArrow:hover{background-position:0 100%;}
|
||||
.dd .ddTitle{color:#000;background:#e2e2e4 url(../../images/msdropdown/skin1/title-bg.gif) repeat-x left top;}
|
||||
.dd .ddTitle .ddTitleText{padding:5px 20px 5px 5px;}
|
||||
.dd .ddTitle .ddTitleText .ddTitleText{padding:0;}
|
||||
.dd .ddTitle .description{font-size:12px; color:#666}
|
||||
.dd .ddTitle .ddTitleText img{padding-right:5px;}
|
||||
.dd .ddChild{border:1px solid #c3c3c3; background-color:#fff; left:-1px;}
|
||||
.dd .ddChild li{padding:5px; background-color:#fff; border-bottom:1px solid #c3c3c3;}
|
||||
.dd .ddChild li .description{color:#666;}
|
||||
.dd .ddChild li .ddlabel{color:#333;}
|
||||
.dd .ddChild li.hover{background-color:#f2f2f2}
|
||||
.dd .ddChild li img{padding:0 6px 0 0;}
|
||||
.dd .ddChild li.optgroup{padding:0;}
|
||||
.dd .ddChild li.optgroup .optgroupTitle{padding:0 5px; font-weight:bold; font-style:italic}
|
||||
.dd .ddChild li.optgroup ul li{padding:5px 5px 5px 15px}
|
||||
.dd .ddChild li.selected{background-color:#d5d5d5; color:#000;}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,20 @@
|
||||
.blue{border:1px solid #ddd;}
|
||||
.blue .divider{display:none}
|
||||
.blue .ddArrow{width:27px;height:27px; margin-top:-14px; background:url(../../images/msdropdown/skin2/dd_arrow.gif) no-repeat;}
|
||||
.blue .ddArrow:hover{background-position:0 100%;}
|
||||
.blue .ddTitle{color:#fff;background:#10bbe6 url(../../images/msdropdown/skin2/title-bg.gif) repeat-x left top;}
|
||||
.blue .ddTitle .ddTitleText{padding:10px 20px 10px 5px; font-weight:bold; font-size:16px;}
|
||||
.blue .ddTitle .ddTitleText .ddTitleText{padding:0;}
|
||||
.blue .ddTitle .description{font-size:12px; color:#666}
|
||||
.blue .ddTitle .ddTitleText img{padding-right:5px;}
|
||||
.blue .ddChild{border:1px solid #c3c3c3; background-color:#fff; left:-1px;}
|
||||
.blue .ddChild li{padding:5px; background-color:#fff; border-bottom:1px solid #c3c3c3;}
|
||||
.blue .ddChild li .description{color:#666;}
|
||||
.blue .ddChild li .ddlabel{color:#333;}
|
||||
.blue .ddChild li.hover{background-color:#66CCFF;}
|
||||
.blue .ddChild li img{padding:0 6px 0 0;}
|
||||
.blue .ddChild li.optgroup{padding:0;}
|
||||
.blue .ddChild li.optgroup .optgroupTitle{padding:0 5px; font-weight:bold; font-style:italic}
|
||||
.blue .ddChild li.optgroup ul li{padding:5px 5px 5px 15px}
|
||||
.blue .ddChild li.selected{background-color:#0d97ba;}
|
||||
.blue .ddChild li.selected .ddlabel{color:#fff;}
|
||||
@@ -0,0 +1,41 @@
|
||||
/************* use sprite *****************/
|
||||
.smallIcons li, .smallIcons .ddTitleText{
|
||||
/* .smallIcons .ddTitle .ddTitleText - this will be used when option is selected */
|
||||
background-image:url(../../images/msdropdown/icons/sprite.gif);
|
||||
background-repeat:no-repeat;
|
||||
padding-left:27px !important;
|
||||
}
|
||||
.smallIcons .calendar {
|
||||
background-position:0 -396px;
|
||||
}
|
||||
.smallIcons .shoppingcart {
|
||||
background-position:0 -325px;
|
||||
}
|
||||
.smallIcons .cd {
|
||||
background-position:0 -433px;
|
||||
}
|
||||
.smallIcons .email{
|
||||
background-position:0 -249px;
|
||||
}
|
||||
.smallIcons .faq {
|
||||
background-position:0 -176px;
|
||||
}
|
||||
.smallIcons .games{
|
||||
background-position:0 -358px;
|
||||
}
|
||||
.smallIcons .music {
|
||||
background-position:0 -139px;
|
||||
}
|
||||
.smallIcons .phone {
|
||||
background-position:0 -103px;
|
||||
}
|
||||
.smallIcons .graph {
|
||||
background-position:0 -66px;
|
||||
}
|
||||
.smallIcons .secured {
|
||||
background-position:0 -31px;
|
||||
}
|
||||
.smallIcons .video {
|
||||
background-position:0 7px;
|
||||
}
|
||||
/*******************************/
|
||||
@@ -0,0 +1,138 @@
|
||||
<!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>Javascript image dropdown - By JSON data</title>
|
||||
<link rel="stylesheet" href="css/sample.css" />
|
||||
<script src="../js/jquery/jquery-1.9.0.min.js"></script>
|
||||
|
||||
<!-- <msdropdown> -->
|
||||
<link rel="stylesheet" type="text/css" href="../css/msdropdown/dd.css" />
|
||||
<script src="../js/msdropdown/jquery.dd.min.js"></script>
|
||||
<!-- </msdropdown> -->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<table width="100%" border="0" cellspacing="1" cellpadding="5" class="topmenu">
|
||||
<tr>
|
||||
<td colspan="2" class="top"><h1>Javascript image dropdown <span id="ver"></span> <a title="Download" href="http://www.marghoobsuleman.com/jquery-image-dropdown" class="small">Download</a></h1></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="25%"><select style="width:250px" name="pages" id="pages">
|
||||
<option value="" selected="selected">Choose a sample page</option>
|
||||
<option value="index.html">Normal</option>
|
||||
<option value="byjson.html">By Json Data</option>
|
||||
<option value="multiple-skin.html">Multiple Skin</option>
|
||||
<option value="css-sprite.html">CSS Sprite</option>
|
||||
<option value="object-oriented-approach.html">Object Oriented Approach</option>
|
||||
<option value="object-oriented-approach-more.html">Object Oriented Approach - More</option>
|
||||
<option value="use-checkbox.html">Use Checkbox</option>
|
||||
<option value="mouse-events.html">Mouse Events</option>
|
||||
<option value="help.html">Documentation</option>
|
||||
</select></td>
|
||||
<td align="left"><a href="help.html">Documentation</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
<form action="submitdata.php" method="post" enctype="multipart/form-data" name="frmdata">
|
||||
<table width="100%" border="0" cellspacing="1" cellpadding="5" class="tblWhite">
|
||||
<tr>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><a href="javascript:void(0)" id="btn1">Click to create by json data</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
<div id="byjson"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="bottom"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="bottom"><input type="submit" value="Submit" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="bottom"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="bottom">Source Code:</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
|
||||
<code>
|
||||
<pre>
|
||||
<script>
|
||||
function createByJson() {
|
||||
var jsonData = [
|
||||
{description:'Choos your payment gateway', value:'', text:'Payment Gateway'},
|
||||
{image:'../images/msdropdown/icons/Amex-56.png', description:'My life. My card...', value:'amex', text:'Amex'},
|
||||
{image:'../images/msdropdown/icons/Discover-56.png', description:'It pays to Discover...', value:'Discover', text:'Discover'},
|
||||
{image:'../images/msdropdown/icons/Mastercard-56.png', title:'For everything else...', description:'For everything else...', value:'Mastercard', text:'Mastercard'},
|
||||
{image:'../images/msdropdown/icons/Cash-56.png', description:'Sorry not available...', value:'cash', text:'Cash on devlivery', disabled:true},
|
||||
{image:'../images/msdropdown/icons/Visa-56.png', description:'All you need...', value:'Visa', text:'Visa'},
|
||||
{image:'../images/msdropdown/icons/Paypal-56.png', description:'Pay and get paid...', value:'Paypal', text:'Paypal'}
|
||||
];
|
||||
var jsn = $("#byjson").msDropDown({byJson:{data:jsonData, name:'payments'}}).data("dd");
|
||||
}
|
||||
$("#btn1").on("click", createByJson);
|
||||
</script>
|
||||
</pre>
|
||||
</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
<p> </p>
|
||||
|
||||
<script>
|
||||
function createByJson() {
|
||||
var jsonData = [
|
||||
{description:'Choos your payment gateway', value:'', text:'Payment Gateway'},
|
||||
{image:'../images/msdropdown/icons/Amex-56.png', description:'My life. My card...', value:'amex', text:'Amex'},
|
||||
{image:'../images/msdropdown/icons/Discover-56.png', description:'It pays to Discover...', value:'Discover', text:'Discover'},
|
||||
{image:'../images/msdropdown/icons/Mastercard-56.png', title:'For everything else...', description:'For everything else...', value:'Mastercard', text:'Mastercard'},
|
||||
{image:'../images/msdropdown/icons/Cash-56.png', description:'Sorry not available...', value:'cash', text:'Cash on devlivery', disabled:true},
|
||||
{image:'../images/msdropdown/icons/Visa-56.png', description:'All you need...', value:'Visa', text:'Visa'},
|
||||
{image:'../images/msdropdown/icons/Paypal-56.png', description:'Pay and get paid...', value:'Paypal', text:'Paypal'}
|
||||
];
|
||||
var jsn = $("#byjson").msDropDown({byJson:{data:jsonData, name:'payments'}}).data("dd");
|
||||
}
|
||||
$("#btn1").on("click", function() {
|
||||
createByJson();
|
||||
$(this).hide();
|
||||
});
|
||||
|
||||
$(document).ready(function(e) {
|
||||
//no use
|
||||
try {
|
||||
var pages = $("#pages").msDropdown({on:{change:function(data, ui) {
|
||||
var val = data.value;
|
||||
if(val!="")
|
||||
window.location = val;
|
||||
}}}).data("dd");
|
||||
|
||||
var pagename = document.location.pathname.toString();
|
||||
pagename = pagename.split("/");
|
||||
pages.setIndexByValue(pagename[pagename.length-1]);
|
||||
$("#ver").html(msBeautify.version.msDropdown);
|
||||
} catch(e) {
|
||||
//console.log(e);
|
||||
}
|
||||
|
||||
$("#ver").html(msBeautify.version.msDropdown);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,399 @@
|
||||
<!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>Javascript image dropdown - CSS sprite</title>
|
||||
<link rel="stylesheet" href="css/sample.css" />
|
||||
<script src="../js/jquery/jquery-1.9.0.min.js"></script>
|
||||
<!-- <msdropdown> -->
|
||||
<link rel="stylesheet" type="text/css" href="../css/msdropdown/dd.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/msdropdown/sprite.css" />
|
||||
<script src="../js/msdropdown/jquery.dd.min.js"></script>
|
||||
<!-- </msdropdown> -->
|
||||
<link rel="stylesheet" type="text/css" href="../css/msdropdown/flags.css" />
|
||||
</head>
|
||||
<body>
|
||||
<table width="100%" border="0" cellspacing="1" cellpadding="5" class="topmenu">
|
||||
<tr>
|
||||
<td colspan="2" class="top"><h1>Javascript image dropdown <span id="ver"></span> <a title="Download" href="http://www.marghoobsuleman.com/jquery-image-dropdown" class="small">Download</a></h1></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="25%"><select style="width:250px" name="pages" id="pages">
|
||||
<option value="" selected="selected">Choose a sample page</option>
|
||||
<option value="index.html">Normal</option>
|
||||
<option value="byjson.html">By Json Data</option>
|
||||
<option value="multiple-skin.html">Multiple Skin</option>
|
||||
<option value="css-sprite.html">CSS Sprite</option>
|
||||
<option value="object-oriented-approach.html">Object Oriented Approach</option>
|
||||
<option value="object-oriented-approach-more.html">Object Oriented Approach - More</option>
|
||||
<option value="use-checkbox.html">Use Checkbox</option>
|
||||
<option value="mouse-events.html">Mouse Events</option>
|
||||
<option value="help.html">Documentation</option>
|
||||
</select></td>
|
||||
<td align="left"><a href="help.html">Documentation</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
<form action="submitdata.php" method="post" enctype="multipart/form-data" name="frmdata">
|
||||
<table width="100%" border="0" cellspacing="1" cellpadding="5" class="tblWhite">
|
||||
<tr>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top">Created from HTML SELECT Element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
<select name="sample" id="sample" style="width:200px;" data-usesprite="smallIcons">
|
||||
<option class="email" value="email">Email</option>
|
||||
<option class="calendar" value="calendar">Calendar</option>
|
||||
<option class="shoppingcart" value="shopping_cart">Shopping Cart</option>
|
||||
<option class="cd" value="cd">CD</option>
|
||||
<option class="email" value="email">Email</option>
|
||||
<option class="faq" value="faq">FAQ</option>
|
||||
<option class="games" value="games">Games</option>
|
||||
<option class="music" value="music">Music</option>
|
||||
<option class="phone" value="phone">Phone</option>
|
||||
<option class="graph" value="graph">Graph</option>
|
||||
<option class="secured" value="secured">Secured</option>
|
||||
<option class="video" value="video">Video</option>
|
||||
</select>
|
||||
|
||||
<select name="sample2" id="sample2" style="width:200px;">
|
||||
<option class="email" value="email">Email</option>
|
||||
<option class="calendar" value="calendar">Calendar</option>
|
||||
<option class="shoppingcart" value="shopping_cart">Shopping Cart</option>
|
||||
<option class="cd" value="cd">CD</option>
|
||||
<option class="email" value="email">Email</option>
|
||||
<option class="faq" value="faq">FAQ</option>
|
||||
<option class="games" value="games">Games</option>
|
||||
<option class="music" value="music">Music</option>
|
||||
<option class="phone" value="phone">Phone</option>
|
||||
<option class="graph" value="graph">Graph</option>
|
||||
<option class="secured" value="secured">Secured</option>
|
||||
<option class="video" value="video">Video</option>
|
||||
</select> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="bottom"><h2>Countries Dropdown with flag - Bonus with this script :)</h2></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="bottom">
|
||||
<select name="countries" id="countries" style="width:300px;">
|
||||
<option value='ad' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ad" data-title="Andorra">Andorra</option>
|
||||
<option value='ae' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ae" data-title="United Arab Emirates">United Arab Emirates</option>
|
||||
<option value='af' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag af" data-title="Afghanistan">Afghanistan</option>
|
||||
<option value='ag' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ag" data-title="Antigua and Barbuda">Antigua and Barbuda</option>
|
||||
<option value='ai' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ai" data-title="Anguilla">Anguilla</option>
|
||||
<option value='al' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag al" data-title="Albania">Albania</option>
|
||||
<option value='am' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag am" data-title="Armenia">Armenia</option>
|
||||
<option value='an' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag an" data-title="Netherlands Antilles">Netherlands Antilles</option>
|
||||
<option value='ao' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ao" data-title="Angola">Angola</option>
|
||||
<option value='aq' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag aq" data-title="Antarctica">Antarctica</option>
|
||||
<option value='ar' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ar" data-title="Argentina">Argentina</option>
|
||||
<option value='as' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag as" data-title="American Samoa">American Samoa</option>
|
||||
<option value='at' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag at" data-title="Austria">Austria</option>
|
||||
<option value='au' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag au" data-title="Australia">Australia</option>
|
||||
<option value='aw' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag aw" data-title="Aruba">Aruba</option>
|
||||
<option value='ax' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ax" data-title="Aland Islands">Aland Islands</option>
|
||||
<option value='az' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag az" data-title="Azerbaijan">Azerbaijan</option>
|
||||
<option value='ba' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ba" data-title="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
|
||||
<option value='bb' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag bb" data-title="Barbados">Barbados</option>
|
||||
<option value='bd' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag bd" data-title="Bangladesh">Bangladesh</option>
|
||||
<option value='be' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag be" data-title="Belgium">Belgium</option>
|
||||
<option value='bf' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag bf" data-title="Burkina Faso">Burkina Faso</option>
|
||||
<option value='bg' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag bg" data-title="Bulgaria">Bulgaria</option>
|
||||
<option value='bh' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag bh" data-title="Bahrain">Bahrain</option>
|
||||
<option value='bi' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag bi" data-title="Burundi">Burundi</option>
|
||||
<option value='bj' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag bj" data-title="Benin">Benin</option>
|
||||
<option value='bm' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag bm" data-title="Bermuda">Bermuda</option>
|
||||
<option value='bn' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag bn" data-title="Brunei Darussalam">Brunei Darussalam</option>
|
||||
<option value='bo' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag bo" data-title="Bolivia">Bolivia</option>
|
||||
<option value='br' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag br" data-title="Brazil">Brazil</option>
|
||||
<option value='bs' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag bs" data-title="Bahamas">Bahamas</option>
|
||||
<option value='bt' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag bt" data-title="Bhutan">Bhutan</option>
|
||||
<option value='bv' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag bv" data-title="Bouvet Island">Bouvet Island</option>
|
||||
<option value='bw' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag bw" data-title="Botswana">Botswana</option>
|
||||
<option value='by' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag by" data-title="Belarus">Belarus</option>
|
||||
<option value='bz' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag bz" data-title="Belize">Belize</option>
|
||||
<option value='ca' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ca" data-title="Canada">Canada</option>
|
||||
<option value='cc' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag cc" data-title="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
|
||||
<option value='cd' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag cd" data-title="Democratic Republic of the Congo">Democratic Republic of the Congo</option>
|
||||
<option value='cf' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag cf" data-title="Central African Republic">Central African Republic</option>
|
||||
<option value='cg' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag cg" data-title="Congo">Congo</option>
|
||||
<option value='ch' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ch" data-title="Switzerland">Switzerland</option>
|
||||
<option value='ci' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ci" data-title="Cote D'Ivoire (Ivory Coast)">Cote D'Ivoire (Ivory Coast)</option>
|
||||
<option value='ck' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ck" data-title="Cook Islands">Cook Islands</option>
|
||||
<option value='cl' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag cl" data-title="Chile">Chile</option>
|
||||
<option value='cm' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag cm" data-title="Cameroon">Cameroon</option>
|
||||
<option value='cn' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag cn" data-title="China">China</option>
|
||||
<option value='co' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag co" data-title="Colombia">Colombia</option>
|
||||
<option value='cr' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag cr" data-title="Costa Rica">Costa Rica</option>
|
||||
<option value='cs' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag cs" data-title="Serbia and Montenegro">Serbia and Montenegro</option>
|
||||
<option value='cu' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag cu" data-title="Cuba">Cuba</option>
|
||||
<option value='cv' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag cv" data-title="Cape Verde">Cape Verde</option>
|
||||
<option value='cx' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag cx" data-title="Christmas Island">Christmas Island</option>
|
||||
<option value='cy' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag cy" data-title="Cyprus">Cyprus</option>
|
||||
<option value='cz' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag cz" data-title="Czech Republic">Czech Republic</option>
|
||||
<option value='de' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag de" data-title="Germany">Germany</option>
|
||||
<option value='dj' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag dj" data-title="Djibouti">Djibouti</option>
|
||||
<option value='dk' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag dk" data-title="Denmark">Denmark</option>
|
||||
<option value='dm' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag dm" data-title="Dominica">Dominica</option>
|
||||
<option value='do' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag do" data-title="Dominican Republic">Dominican Republic</option>
|
||||
<option value='dz' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag dz" data-title="Algeria">Algeria</option>
|
||||
<option value='ec' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ec" data-title="Ecuador">Ecuador</option>
|
||||
<option value='ee' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ee" data-title="Estonia">Estonia</option>
|
||||
<option value='eg' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag eg" data-title="Egypt">Egypt</option>
|
||||
<option value='eh' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag eh" data-title="Western Sahara">Western Sahara</option>
|
||||
<option value='er' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag er" data-title="Eritrea">Eritrea</option>
|
||||
<option value='es' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag es" data-title="Spain">Spain</option>
|
||||
<option value='et' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag et" data-title="Ethiopia">Ethiopia</option>
|
||||
<option value='fi' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag fi" data-title="Finland">Finland</option>
|
||||
<option value='fj' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag fj" data-title="Fiji">Fiji</option>
|
||||
<option value='fk' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag fk" data-title="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option>
|
||||
<option value='fm' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag fm" data-title="Federated States of Micronesia">Federated States of Micronesia</option>
|
||||
<option value='fo' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag fo" data-title="Faroe Islands">Faroe Islands</option>
|
||||
<option value='fr' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag fr" data-title="France">France</option>
|
||||
<option value='fx' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag fx" data-title="France, Metropolitan">France, Metropolitan</option>
|
||||
<option value='ga' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ga" data-title="Gabon">Gabon</option>
|
||||
<option value='gb' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag gb" data-title="Great Britain (UK)">Great Britain (UK)</option>
|
||||
<option value='gd' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag gd" data-title="Grenada">Grenada</option>
|
||||
<option value='ge' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ge" data-title="Georgia">Georgia</option>
|
||||
<option value='gf' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag gf" data-title="French Guiana">French Guiana</option>
|
||||
<option value='gh' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag gh" data-title="Ghana">Ghana</option>
|
||||
<option value='gi' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag gi" data-title="Gibraltar">Gibraltar</option>
|
||||
<option value='gl' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag gl" data-title="Greenland">Greenland</option>
|
||||
<option value='gm' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag gm" data-title="Gambia">Gambia</option>
|
||||
<option value='gn' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag gn" data-title="Guinea">Guinea</option>
|
||||
<option value='gp' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag gp" data-title="Guadeloupe">Guadeloupe</option>
|
||||
<option value='gq' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag gq" data-title="Equatorial Guinea">Equatorial Guinea</option>
|
||||
<option value='gr' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag gr" data-title="Greece">Greece</option>
|
||||
<option value='gs' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag gs" data-title="S. Georgia and S. Sandwich Islands">S. Georgia and S. Sandwich Islands</option>
|
||||
<option value='gt' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag gt" data-title="Guatemala">Guatemala</option>
|
||||
<option value='gu' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag gu" data-title="Guam">Guam</option>
|
||||
<option value='gw' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag gw" data-title="Guinea-Bissau">Guinea-Bissau</option>
|
||||
<option value='gy' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag gy" data-title="Guyana">Guyana</option>
|
||||
<option value='hk' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag hk" data-title="Hong Kong">Hong Kong</option>
|
||||
<option value='hm' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag hm" data-title="Heard Island and McDonald Islands">Heard Island and McDonald Islands</option>
|
||||
<option value='hn' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag hn" data-title="Honduras">Honduras</option>
|
||||
<option value='hr' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag hr" data-title="Croatia (Hrvatska)">Croatia (Hrvatska)</option>
|
||||
<option value='ht' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ht" data-title="Haiti">Haiti</option>
|
||||
<option value='hu' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag hu" data-title="Hungary">Hungary</option>
|
||||
<option value='id' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag id" data-title="Indonesia">Indonesia</option>
|
||||
<option value='ie' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ie" data-title="Ireland">Ireland</option>
|
||||
<option value='il' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag il" data-title="Israel">Israel</option>
|
||||
<option value='in' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag in" data-title="India">India</option>
|
||||
<option value='io' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag io" data-title="British Indian Ocean Territory">British Indian Ocean Territory</option>
|
||||
<option value='iq' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag iq" data-title="Iraq">Iraq</option>
|
||||
<option value='ir' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ir" data-title="Iran">Iran</option>
|
||||
<option value='is' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag is" data-title="Iceland">Iceland</option>
|
||||
<option value='it' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag it" data-title="Italy">Italy</option>
|
||||
<option value='jm' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag jm" data-title="Jamaica">Jamaica</option>
|
||||
<option value='jo' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag jo" data-title="Jordan">Jordan</option>
|
||||
<option value='jp' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag jp" data-title="Japan">Japan</option>
|
||||
<option value='ke' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ke" data-title="Kenya">Kenya</option>
|
||||
<option value='kg' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag kg" data-title="Kyrgyzstan">Kyrgyzstan</option>
|
||||
<option value='kh' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag kh" data-title="Cambodia">Cambodia</option>
|
||||
<option value='ki' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ki" data-title="Kiribati">Kiribati</option>
|
||||
<option value='km' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag km" data-title="Comoros">Comoros</option>
|
||||
<option value='kn' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag kn" data-title="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
|
||||
<option value='kp' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag kp" data-title="Korea (North)">Korea (North)</option>
|
||||
<option value='kr' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag kr" data-title="Korea (South)">Korea (South)</option>
|
||||
<option value='kw' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag kw" data-title="Kuwait">Kuwait</option>
|
||||
<option value='ky' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ky" data-title="Cayman Islands">Cayman Islands</option>
|
||||
<option value='kz' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag kz" data-title="Kazakhstan">Kazakhstan</option>
|
||||
<option value='la' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag la" data-title="Laos">Laos</option>
|
||||
<option value='lb' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag lb" data-title="Lebanon">Lebanon</option>
|
||||
<option value='lc' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag lc" data-title="Saint Lucia">Saint Lucia</option>
|
||||
<option value='li' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag li" data-title="Liechtenstein">Liechtenstein</option>
|
||||
<option value='lk' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag lk" data-title="Sri Lanka">Sri Lanka</option>
|
||||
<option value='lr' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag lr" data-title="Liberia">Liberia</option>
|
||||
<option value='ls' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ls" data-title="Lesotho">Lesotho</option>
|
||||
<option value='lt' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag lt" data-title="Lithuania">Lithuania</option>
|
||||
<option value='lu' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag lu" data-title="Luxembourg">Luxembourg</option>
|
||||
<option value='lv' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag lv" data-title="Latvia">Latvia</option>
|
||||
<option value='ly' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ly" data-title="Libya">Libya</option>
|
||||
<option value='ma' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ma" data-title="Morocco">Morocco</option>
|
||||
<option value='mc' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag mc" data-title="Monaco">Monaco</option>
|
||||
<option value='md' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag md" data-title="Moldova">Moldova</option>
|
||||
<option value='mg' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag mg" data-title="Madagascar">Madagascar</option>
|
||||
<option value='mh' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag mh" data-title="Marshall Islands">Marshall Islands</option>
|
||||
<option value='mk' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag mk" data-title="Macedonia">Macedonia</option>
|
||||
<option value='ml' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ml" data-title="Mali">Mali</option>
|
||||
<option value='mm' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag mm" data-title="Myanmar">Myanmar</option>
|
||||
<option value='mn' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag mn" data-title="Mongolia">Mongolia</option>
|
||||
<option value='mo' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag mo" data-title="Macao">Macao</option>
|
||||
<option value='mp' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag mp" data-title="Northern Mariana Islands">Northern Mariana Islands</option>
|
||||
<option value='mq' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag mq" data-title="Martinique">Martinique</option>
|
||||
<option value='mr' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag mr" data-title="Mauritania">Mauritania</option>
|
||||
<option value='ms' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ms" data-title="Montserrat">Montserrat</option>
|
||||
<option value='mt' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag mt" data-title="Malta">Malta</option>
|
||||
<option value='mu' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag mu" data-title="Mauritius">Mauritius</option>
|
||||
<option value='mv' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag mv" data-title="Maldives">Maldives</option>
|
||||
<option value='mw' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag mw" data-title="Malawi">Malawi</option>
|
||||
<option value='mx' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag mx" data-title="Mexico">Mexico</option>
|
||||
<option value='my' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag my" data-title="Malaysia">Malaysia</option>
|
||||
<option value='mz' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag mz" data-title="Mozambique">Mozambique</option>
|
||||
<option value='na' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag na" data-title="Namibia">Namibia</option>
|
||||
<option value='nc' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag nc" data-title="New Caledonia">New Caledonia</option>
|
||||
<option value='ne' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ne" data-title="Niger">Niger</option>
|
||||
<option value='nf' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag nf" data-title="Norfolk Island">Norfolk Island</option>
|
||||
<option value='ng' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ng" data-title="Nigeria">Nigeria</option>
|
||||
<option value='ni' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ni" data-title="Nicaragua">Nicaragua</option>
|
||||
<option value='nl' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag nl" data-title="Netherlands">Netherlands</option>
|
||||
<option value='no' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag no" data-title="Norway">Norway</option>
|
||||
<option value='np' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag np" data-title="Nepal">Nepal</option>
|
||||
<option value='nr' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag nr" data-title="Nauru">Nauru</option>
|
||||
<option value='nu' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag nu" data-title="Niue">Niue</option>
|
||||
<option value='nz' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag nz" data-title="New Zealand (Aotearoa)">New Zealand (Aotearoa)</option>
|
||||
<option value='om' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag om" data-title="Oman">Oman</option>
|
||||
<option value='pa' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag pa" data-title="Panama">Panama</option>
|
||||
<option value='pe' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag pe" data-title="Peru">Peru</option>
|
||||
<option value='pf' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag pf" data-title="French Polynesia">French Polynesia</option>
|
||||
<option value='pg' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag pg" data-title="Papua New Guinea">Papua New Guinea</option>
|
||||
<option value='ph' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ph" data-title="Philippines">Philippines</option>
|
||||
<option value='pk' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag pk" data-title="Pakistan">Pakistan</option>
|
||||
<option value='pl' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag pl" data-title="Poland">Poland</option>
|
||||
<option value='pm' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag pm" data-title="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option>
|
||||
<option value='pn' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag pn" data-title="Pitcairn">Pitcairn</option>
|
||||
<option value='pr' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag pr" data-title="Puerto Rico">Puerto Rico</option>
|
||||
<option value='ps' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ps" data-title="Palestinian Territory">Palestinian Territory</option>
|
||||
<option value='pt' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag pt" data-title="Portugal">Portugal</option>
|
||||
<option value='pw' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag pw" data-title="Palau">Palau</option>
|
||||
<option value='py' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag py" data-title="Paraguay">Paraguay</option>
|
||||
<option value='qa' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag qa" data-title="Qatar">Qatar</option>
|
||||
<option value='re' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag re" data-title="Reunion">Reunion</option>
|
||||
<option value='ro' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ro" data-title="Romania">Romania</option>
|
||||
<option value='ru' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ru" data-title="Russian Federation">Russian Federation</option>
|
||||
<option value='rw' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag rw" data-title="Rwanda">Rwanda</option>
|
||||
<option value='sa' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag sa" data-title="Saudi Arabia">Saudi Arabia</option>
|
||||
<option value='sb' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag sb" data-title="Solomon Islands">Solomon Islands</option>
|
||||
<option value='sc' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag sc" data-title="Seychelles">Seychelles</option>
|
||||
<option value='sd' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag sd" data-title="Sudan">Sudan</option>
|
||||
<option value='se' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag se" data-title="Sweden">Sweden</option>
|
||||
<option value='sg' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag sg" data-title="Singapore">Singapore</option>
|
||||
<option value='sh' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag sh" data-title="Saint Helena">Saint Helena</option>
|
||||
<option value='si' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag si" data-title="Slovenia">Slovenia</option>
|
||||
<option value='sj' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag sj" data-title="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
|
||||
<option value='sk' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag sk" data-title="Slovakia">Slovakia</option>
|
||||
<option value='sl' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag sl" data-title="Sierra Leone">Sierra Leone</option>
|
||||
<option value='sm' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag sm" data-title="San Marino">San Marino</option>
|
||||
<option value='sn' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag sn" data-title="Senegal">Senegal</option>
|
||||
<option value='so' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag so" data-title="Somalia">Somalia</option>
|
||||
<option value='sr' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag sr" data-title="Suriname">Suriname</option>
|
||||
<option value='st' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag st" data-title="Sao Tome and Principe">Sao Tome and Principe</option>
|
||||
<option value='su' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag su" data-title="USSR (former)">USSR (former)</option>
|
||||
<option value='sv' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag sv" data-title="El Salvador">El Salvador</option>
|
||||
<option value='sy' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag sy" data-title="Syria">Syria</option>
|
||||
<option value='sz' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag sz" data-title="Swaziland">Swaziland</option>
|
||||
<option value='tc' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag tc" data-title="Turks and Caicos Islands">Turks and Caicos Islands</option>
|
||||
<option value='td' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag td" data-title="Chad">Chad</option>
|
||||
<option value='tf' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag tf" data-title="French Southern Territories">French Southern Territories</option>
|
||||
<option value='tg' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag tg" data-title="Togo">Togo</option>
|
||||
<option value='th' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag th" data-title="Thailand">Thailand</option>
|
||||
<option value='tj' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag tj" data-title="Tajikistan">Tajikistan</option>
|
||||
<option value='tk' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag tk" data-title="Tokelau">Tokelau</option>
|
||||
<option value='tl' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag tl" data-title="Timor-Leste">Timor-Leste</option>
|
||||
<option value='tm' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag tm" data-title="Turkmenistan">Turkmenistan</option>
|
||||
<option value='tn' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag tn" data-title="Tunisia">Tunisia</option>
|
||||
<option value='to' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag to" data-title="Tonga">Tonga</option>
|
||||
<option value='tp' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag tp" data-title="East Timor">East Timor</option>
|
||||
<option value='tr' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag tr" data-title="Turkey">Turkey</option>
|
||||
<option value='tt' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag tt" data-title="Trinidad and Tobago">Trinidad and Tobago</option>
|
||||
<option value='tv' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag tv" data-title="Tuvalu">Tuvalu</option>
|
||||
<option value='tw' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag tw" data-title="Taiwan">Taiwan</option>
|
||||
<option value='tz' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag tz" data-title="Tanzania">Tanzania</option>
|
||||
<option value='ua' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ua" data-title="Ukraine">Ukraine</option>
|
||||
<option value='ug' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ug" data-title="Uganda">Uganda</option>
|
||||
<option value='uk' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag uk" data-title="United Kingdom">United Kingdom</option>
|
||||
<option value='um' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag um" data-title="United States Minor Outlying Islands">United States Minor Outlying Islands</option>
|
||||
<option value='us' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag us" data-title="United States">United States</option>
|
||||
<option value='uy' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag uy" data-title="Uruguay">Uruguay</option>
|
||||
<option value='uz' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag uz" data-title="Uzbekistan">Uzbekistan</option>
|
||||
<option value='va' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag va" data-title="Vatican City State (Holy See)">Vatican City State (Holy See)</option>
|
||||
<option value='vc' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag vc" data-title="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
|
||||
<option value='ve' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ve" data-title="Venezuela">Venezuela</option>
|
||||
<option value='vg' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag vg" data-title="Virgin Islands (British)">Virgin Islands (British)</option>
|
||||
<option value='vi' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag vi" data-title="Virgin Islands (U.S.)">Virgin Islands (U.S.)</option>
|
||||
<option value='vn' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag vn" data-title="Viet Nam">Viet Nam</option>
|
||||
<option value='vu' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag vu" data-title="Vanuatu">Vanuatu</option>
|
||||
<option value='wf' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag wf" data-title="Wallis and Futuna">Wallis and Futuna</option>
|
||||
<option value='ws' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ws" data-title="Samoa">Samoa</option>
|
||||
<option value='ye' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag ye" data-title="Yemen">Yemen</option>
|
||||
<option value='yt' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag yt" data-title="Mayotte">Mayotte</option>
|
||||
<option value='yu' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag yu" data-title="Yugoslavia (former)">Yugoslavia (former)</option>
|
||||
<option value='za' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag za" data-title="South Africa">South Africa</option>
|
||||
<option value='zm' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag zm" data-title="Zambia">Zambia</option>
|
||||
<option value='zr' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag zr" data-title="Zaire (former)">Zaire (former)</option>
|
||||
<option value='zw' data-image="../images/msdropdown/icons/blank.gif" data-imagecss="flag zw" data-title="Zimbabwe">Zimbabwe</option>
|
||||
</select></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="bottom"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="bottom"><input type="submit" value="Submit" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="bottom"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="bottom">Source Code:</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
|
||||
<code>
|
||||
<pre>
|
||||
<script>
|
||||
$(document).ready(function(e) {
|
||||
$("#sample").msDropdown(); // this one already has data-usesprite in SELECT
|
||||
$("#sample2").msDropdown({useSprite:'smallIcons'}); //or you can pass sprite class like this.
|
||||
$("#countries").msDropdown(); //image can have css class; Please check source code.
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
<p> </p>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(e) {
|
||||
$("#countries").msDropdown(); //image can have css class; Please check source code.
|
||||
$("#sample2").msDropdown({useSprite:'smallIcons'});
|
||||
$("#sample").msDropdown(); // this one already has data-usesprite in SELECT
|
||||
|
||||
//no use
|
||||
try {
|
||||
var pages = $("#pages").msDropdown({on:{change:function(data, ui) {
|
||||
var val = data.value;
|
||||
if(val!="")
|
||||
window.location = val;
|
||||
}}}).data("dd");
|
||||
|
||||
var pagename = document.location.pathname.toString();
|
||||
pagename = pagename.split("/");
|
||||
pages.setIndexByValue(pagename[pagename.length-1]);
|
||||
$("#ver").html(msBeautify.version.msDropdown);
|
||||
} catch(e) {
|
||||
//console.log(e);
|
||||
}
|
||||
|
||||
$("#ver").html(msBeautify.version.msDropdown);
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,32 @@
|
||||
body{font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; font-size:14px; background:#070707}
|
||||
.small {
|
||||
color: #000066;
|
||||
font-family: Arial,Helvetica,sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: normal;
|
||||
line-height: 12px;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
}
|
||||
h1, h2, h3{margin:0; padding:0}
|
||||
.topmenu{}
|
||||
.topmenu td.top{background:#333; color:#FFFFFF; text-align:center}
|
||||
.topmenu td{background:#333; color:#FFFFFF; text-align:left}
|
||||
.topmenu td.title{background:#666; color:#FFFFFF; text-align:left}
|
||||
.topmenu td a, .topmenu td a:visited{color:#fff;}
|
||||
.topmenu td.active{background:#090; color:#333}
|
||||
.topmenu td.active a, .topmenu td.active a:visited{color:#fff; text-decoration:none}
|
||||
.tblWhite{background:#FFFFFF}
|
||||
pre{overflow-x:auto; overflow-y:hidden; background:#707070; color:#fff; margin:0; padding:20px; max-width:750px}
|
||||
.hide, .hidden{display:none}
|
||||
code.blue{color:#66CCCC}
|
||||
|
||||
#debugger{position:absolute; border:2px solid #c3c3c3; padding:10px; width:400px; background:#fff; max-height:350px; overflow:auto}
|
||||
ul.debug{padding:5px 10px; margin:0;}
|
||||
#testResults{margin:10px}
|
||||
#testResults li.pass { color: green; }
|
||||
#testResults li.fail { color: red; }
|
||||
.black{color:#000}
|
||||
.viewcode{cursor:pointer; text-decoration:underline;}
|
||||
.viewcode:hover{background:#f0f0f0; text-decoration:none;}
|
||||
.app{padding:10px; background:#333; color:#FFF;}
|
||||
@@ -0,0 +1,404 @@
|
||||
<!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>Javascript image dropdown - Documentation</title>
|
||||
<link rel="stylesheet" href="css/sample.css" />
|
||||
<script src="../js/jquery/jquery-1.9.0.min.js"></script>
|
||||
<!-- <msdropdown> -->
|
||||
<link rel="stylesheet" type="text/css" href="../css/msdropdown/dd.css" />
|
||||
<script src="../js/msdropdown/jquery.dd.min.js"></script>
|
||||
<!-- </msdropdown> -->
|
||||
<style type="text/css">
|
||||
code.blue1 {color:#3300FF}
|
||||
table.help {background:#fff; color:#000;}
|
||||
.help td.title {background:#333; color:#fff; font-weight:bold}
|
||||
.help td.title1 {background:#0099bf; color:#fff; font-weight:bold}
|
||||
table.help{background:#c3c3c3; color:#000;}
|
||||
table.help td{background:#fff;color:#000}
|
||||
pre{color:#000; background:#f2f2f2; padding:0 10px; max-width:80%; overflow:auto}
|
||||
code.blue{color:#3300FF}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table width="100%" border="0" cellspacing="1" cellpadding="5" class="topmenu">
|
||||
<tr>
|
||||
<td colspan="2" class="top"><h1>Javascript image dropdown <span id="ver"></span> <a title="Download" href="http://www.marghoobsuleman.com/jquery-image-dropdown" class="small">Download</a></h1></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="25%"><select style="width:250px" name="pages" id="pages">
|
||||
<option value="" selected="selected">Choose a sample page</option>
|
||||
<option value="index.html">Normal</option>
|
||||
<option value="byjson.html">By Json Data</option>
|
||||
<option value="multiple-skin.html">Multiple Skin</option>
|
||||
<option value="css-sprite.html">CSS Sprite</option>
|
||||
<option value="object-oriented-approach.html">Object Oriented Approach</option>
|
||||
<option value="object-oriented-approach-more.html">Object Oriented Approach - More</option>
|
||||
<option value="use-checkbox.html">Use Checkbox</option>
|
||||
<option value="mouse-events.html">Mouse Events</option>
|
||||
<option value="help.html">Documentation</option>
|
||||
</select></td>
|
||||
<td align="left"><a href="help.html">Documentation</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
<form action="submitdata.php" method="post" enctype="multipart/form-data" name="frmdata">
|
||||
<table width="100%" border="0" cellspacing="1" cellpadding="5" class="help">
|
||||
<tr>
|
||||
<td colspan="3"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="18%" class="title1"><strong>Properties</strong></td>
|
||||
<td width="8%"> </td>
|
||||
<td width="74%"><strong>Please note:</strong> For setting properties. Please use <code class="blue1">set()</code> method. </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title">Name</td>
|
||||
<td class="title">Type</td>
|
||||
<td class="title">Description</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>boolean</td>
|
||||
<td>To check if control is disabled or not. If it is disabled, it does not accept clicks.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>form</td>
|
||||
<td>HTMLFormElement</td>
|
||||
<td>Get the current associated form element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>length</td>
|
||||
<td> number</td>
|
||||
<td>The number of <code class="blue1"><option></code> elements in this select element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>multiple</td>
|
||||
<td> boolean</td>
|
||||
<td>Get the curernt state of the control, which indicates whether multiple items can be selected.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>name</td>
|
||||
<td>string</td>
|
||||
<td>Get the name of the control.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>options</td>
|
||||
<td> HTMLOptionsCollection</td>
|
||||
<td>Get the all <code class="blue1"><option></code> elements. <strong>Read only.</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>selectedIndex</td>
|
||||
<td>number</td>
|
||||
<td>The index of the first selected <code class="blue1"><option></code> element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>selectedOptions</td>
|
||||
<td>HTMLOptionsCollection</td>
|
||||
<td>The set of options that are selected. Returns as an array.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>size</td>
|
||||
<td> number</td>
|
||||
<td>Get the size of the element. which contains the number of visible items in the control. </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>type</td>
|
||||
<td>string</td>
|
||||
<td>Get the control's type. When multiple is true, it returns select-multiple; otherwise, it returns select-one. <strong>Read only.</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>value</td>
|
||||
<td>string</td>
|
||||
<td>The value of this select control, that is, of the first selected option.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>selectedText</td>
|
||||
<td>string</td>
|
||||
<td>Get the current selected text. </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>uiData</td>
|
||||
<td>object</td>
|
||||
<td valign="top"><p>Returns the following data.<br />
|
||||
data:{className,description,image,text,title,value}<br />
|
||||
index: Number <br />
|
||||
option: HTMLOptionElement <br />
|
||||
ui: LI Object</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">And all available properties can be accessed from this control. i.e. children etc.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td colspan="2">Reaad only properties can't be set by <code class="blue1">set()</code> method.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td colspan="2"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title1"><strong>Public Methods</strong></td>
|
||||
<td colspan="2"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3"><pre>
|
||||
<span style='color:#696969; '>//create msDropdown</span>
|
||||
<span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>#element<span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>dd<span style='color:#808030; '><span style='color:#800000; '>"</span>)</span><span style='color:#800080; '>;</span>
|
||||
<span style='color:#696969; '>//or by jsondata</span>
|
||||
<span style='color:#800000; font-weight:bold; '>var</span> jsonData <span style='color:#808030; '>=</span> <span style='color:#808030; '>[</span>
|
||||
<span style='color:#800080; '>{</span>description<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Choos your payment gateway'</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#0000e6; '>''</span><span style='color:#808030; '>,</span> text<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Payment Gateway'</span><span style='color:#800080; '>}</span><span style='color:#808030; '>,</span>
|
||||
<span style='color:#800080; '>{</span>image<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'../images/msdropdown/icons/Amex-56.png'</span><span style='color:#808030; '>,</span> description<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'My life. My card...'</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'amex'</span><span style='color:#808030; '>,</span> text<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Amex'</span><span style='color:#800080; '>}</span><span style='color:#808030; '>,</span>
|
||||
<span style='color:#800080; '>{</span>image<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'../images/msdropdown/icons/Discover-56.png'</span><span style='color:#808030; '>,</span> description<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'It pays to Discover...'</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Discover'</span><span style='color:#808030; '>,</span> text<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Discover'</span><span style='color:#800080; '>}</span><span style='color:#808030; '>,</span>
|
||||
<span style='color:#800080; '>{</span>image<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'../images/msdropdown/icons/Mastercard-56.png'</span><span style='color:#808030; '>,</span> title<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'For everything else...'</span><span style='color:#808030; '>,</span> description<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'For everything else...'</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Mastercard'</span><span style='color:#808030; '>,</span> text<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Mastercard'</span><span style='color:#800080; '>}</span><span style='color:#808030; '>,</span>
|
||||
<span style='color:#800080; '>{</span>image<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'../images/msdropdown/icons/Cash-56.png'</span><span style='color:#808030; '>,</span> description<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Sorry not available...'</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'cash'</span><span style='color:#808030; '>,</span> text<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Cash on devlivery'</span><span style='color:#808030; '>,</span> disabled<span style='color:#800080; '>:</span><span style='color:#0f4d75; '>true</span><span style='color:#800080; '>}</span><span style='color:#808030; '>,</span>
|
||||
<span style='color:#800080; '>{</span>image<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'../images/msdropdown/icons/Visa-56.png'</span><span style='color:#808030; '>,</span> description<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'All you need...'</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Visa'</span><span style='color:#808030; '>,</span> text<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Visa'</span><span style='color:#800080; '>}</span><span style='color:#808030; '>,</span>
|
||||
<span style='color:#800080; '>{</span>image<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'../images/msdropdown/icons/Paypal-56.png'</span><span style='color:#808030; '>,</span> description<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Pay and get paid...'</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Paypal'</span><span style='color:#808030; '>,</span> text<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Paypal'</span><span style='color:#800080; '>}</span>
|
||||
<span style='color:#808030; '>]</span><span style='color:#800080; '>;</span>
|
||||
<span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>#element<span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#800080; '>{</span>byJson<span style='color:#800080; '>:</span><span style='color:#800080; '>{</span>data<span style='color:#800080; '>:</span>jsonData<span style='color:#808030; '>,</span> name<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'payments'</span><span style='color:#800080; '>}</span><span style='color:#800080; '>}</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>dd<span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
|
||||
//Some usefull parameters can be passed while creating msDropdown.
|
||||
//These are default values.
|
||||
{
|
||||
{byJson: {data: null, selectedIndex: 0, name: null, size: 0, multiple: false, width: 250}, //if you want to create by json data
|
||||
mainCSS: 'dd',
|
||||
visibleRows: 7,
|
||||
rowHeight: 0,
|
||||
showIcon: true,
|
||||
zIndex: 9999,
|
||||
useSprite: false,
|
||||
animStyle: 'slideDown',
|
||||
event:'click', //it can be mouseover
|
||||
openDirection: 'auto', //auto || alwaysUp || alwaysDown
|
||||
enableCheckbox:false, //this needs to multiple or it will set element to multiple
|
||||
checkboxNameSuffix:'_mscheck',
|
||||
append:'',
|
||||
prepend:'',
|
||||
reverseMode:true, //it will update the msdropdown UI/value if you update the original dropdown - will be usefull if are using knockout.js or playing with original dropdown
|
||||
roundedCorner:true, //to have rounded corner
|
||||
enableAutoFilter:true, //to enable autofilter
|
||||
on: {create: null,open: null,close: null,add: null,remove: null,change: null,blur: null,click: null,
|
||||
dblclick: null,mousemove: null,mouseover: null,mouseout: null,focus: null,mousedown: null,mouseup: null} //event cant be added from here too
|
||||
}
|
||||
</pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>add</td>
|
||||
<td> </td>
|
||||
<td>Adds an option element to the select element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<pre style='color:#000000;background:#ffffff;'><span style='color:#696969; '><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>#element<span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>dd<span style='color:#808030; '><span style='color:#800000; '>"</span>)</span><span style='color:#800080; '>;</span>
|
||||
//by traditional option tag</span>
|
||||
oDropdown<span style='color:#808030; '>.</span>add<span style='color:#808030; '>(</span><span style='color:#800000; font-weight:bold; '>new</span> Option<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span><span style='color:#0000e6; '>Calendar</span><span style='color:#800000; '>"</span><span style='color:#808030; '>,</span> <span style='color:#800000; '>"</span><span style='color:#0000e6; '>calendar</span><span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
|
||||
<span style='color:#696969; '>//or by string</span>
|
||||
oDropdown<span style='color:#808030; '>.</span>add<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span><span style='color:#0000e6; '>Calendar</span><span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
|
||||
<span style='color:#696969; '>//or by json</span>
|
||||
oDropdown<span style='color:#808030; '>.</span>add<span style='color:#808030; '>(</span><span style='color:#800080; '>{</span>text<span style='color:#800080; '>:</span><span style='color:#800000; '>"</span><span style='color:#0000e6; '>Calendar</span><span style='color:#800000; '>"</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#800000; '>"</span><span style='color:#0000e6; '>calendar</span><span style='color:#800000; '>"</span><span style='color:#800080; '>}</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
|
||||
<span style='color:#696969; '>//or by json with all properties</span>
|
||||
oDropdown<span style='color:#808030; '>.</span>add<span style='color:#808030; '>(</span><span style='color:#800080; '>{</span>text<span style='color:#800080; '>:</span><span style='color:#800000; '>"</span><span style='color:#0000e6; '>Calendar</span><span style='color:#800000; '>"</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#800000; '>"</span><span style='color:#0000e6; '>calendar</span><span style='color:#800000; '>"</span><span style='color:#808030; '>,</span> description<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Set my calendar'</span><span style='color:#808030; '>,</span> image<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'/images/calendar.gif'</span><span style='color:#808030; '>,</span> className<span style='color:#800080; '>:</span><span style='color:#0000e6; '>''</span> title<span style='color:#800080; '>:</span><span style='color:#0000e6; '>'Calendar'</span><span style='color:#800080; '>}</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>remove</td>
|
||||
<td> </td>
|
||||
<td><p>Removes the option element at the specified index from the select element.</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3"><pre style='color:#000000;background:#ffffff;'>
|
||||
<span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>#element<span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>dd<span style='color:#808030; '><span style='color:#800000; '>"</span>)</span><span style='color:#800080; '>;</span>
|
||||
oDropdown<span style='color:#808030; '>.</span>remove<span style='color:#808030; '>(</span><span style='color:#008c00; '>2</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
|
||||
</pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>namedItem</td>
|
||||
<td>uiData Object</td>
|
||||
<td>Get the option element if there is name defined. </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>#element<span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>dd<span style='color:#808030; '><span style='color:#800000; '>"</span>)</span><span style='color:#800080; '>;</span>
|
||||
<span style='color:#800000; font-weight:bold; '>var</span> data <span style='color:#808030; '>=</span> oDropdown<span style='color:#808030; '>.</span>namedItem<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span><span style='color:#0000e6; '>shopping</span><span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
|
||||
</pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>item</td>
|
||||
<td>uiData Object</td>
|
||||
<td>Get the item specified by an index. Please refer above for uiData.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>#element<span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>dd<span style='color:#808030; '><span style='color:#800000; '>"</span>)</span><span style='color:#800080; '>;</span>
|
||||
<span style='color:#800000; font-weight:bold; '>var</span> data <span style='color:#808030; '>=</span> oDropdown<span style='color:#808030; '>.</span>namedItem<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span><span style='color:#0000e6; '>shopping</span><span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
|
||||
</pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>set</td>
|
||||
<td> </td>
|
||||
<td>Set the element property.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>#element<span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>dd<span style='color:#808030; '><span style='color:#800000; '>"</span>)</span><span style='color:#800080; '>;</span>
|
||||
oDropdown<span style='color:#808030; '>.</span>set<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span><span style='color:#0000e6; '>selectedIndex</span><span style='color:#800000; '>"</span><span style='color:#808030; '>,</span> <span style='color:#008c00; '>2</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
|
||||
</pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>get</td>
|
||||
<td> </td>
|
||||
<td>Get the element property.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>#element<span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>dd<span style='color:#808030; '><span style='color:#800000; '>"</span>)</span><span style='color:#800080; '>;</span>
|
||||
<span style='color:#800000; font-weight:bold; '>var</span> <span style='color:#797997; '>index</span> <span style='color:#808030; '>=</span> oDropdown<span style='color:#808030; '>.</span>get<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span><span style='color:#0000e6; '>selectedIndex</span><span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
|
||||
<span style='color:#696969; '>//You can get the property without using get method</span>
|
||||
<span style='color:#800000; font-weight:bold; '>var</span> <span style='color:#797997; '>index</span> <span style='color:#808030; '>=</span> oDropwdown<span style='color:#808030; '>.</span>selectedIndex<span style='color:#800080; '>;</span>
|
||||
</pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>visible</td>
|
||||
<td>boolean/void</td>
|
||||
<td>Set and get the visible states.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>#element<span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>dd<span style='color:#808030; '><span style='color:#800000; '>"</span>)</span><span style='color:#800080; '>;</span>
|
||||
oDropdown<span style='color:#808030; '>.</span>visible<span style='color:#808030; '>(</span><span style='color:#0f4d75; '>true</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span> <span style='color:#696969; '>//shows if hidden</span>
|
||||
oDropdown<span style='color:#808030; '>.</span>visible<span style='color:#808030; '>(</span><span style='color:#0f4d75; '>false</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span> <span style='color:#696969; '>//hide</span>
|
||||
<span style='color:#800000; font-weight:bold; '>var</span> isVisible <span style='color:#808030; '>=</span> oDropdown<span style='color:#808030; '>.</span>visible<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span> <span style='color:#696969; '>//returns current states</span>
|
||||
</pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>close</td>
|
||||
<td> </td>
|
||||
<td>Closes the msDropdown.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>#element<span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>dd<span style='color:#808030; '><span style='color:#800000; '>"</span>)</span><span style='color:#800080; '>;</span>
|
||||
oDropdown<span style='color:#808030; '>.</span>close<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>open</td>
|
||||
<td> </td>
|
||||
<td>Opens the msDropdown. </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>#element<span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>dd<span style='color:#808030; '><span style='color:#800000; '>"</span>)</span><span style='color:#800080; '>;</span>
|
||||
oDropdown<span style='color:#808030; '>.</span>open<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span> </pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>showRows</td>
|
||||
<td rowspan="2"> </td>
|
||||
<td rowspan="2">Used to set the visible rows.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>visibleRows</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>#element<span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>dd<span style='color:#808030; '><span style='color:#800000; '>"</span>)</span><span style='color:#800080; '>;</span>
|
||||
oDropdown<span style='color:#808030; '>.</span>visibleRows<span style='color:#808030; '>(</span><span style='color:#008c00; '>10</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
|
||||
</pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>on</td>
|
||||
<td> </td>
|
||||
<td>Add an events on element. </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>#element<span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>dd<span style='color:#808030; '><span style='color:#800000; '>"</span>)</span><span style='color:#800080; '>;</span>
|
||||
oDropdown<span style='color:#808030; '>.</span>on<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span><span style='color:#0000e6; '>change</span><span style='color:#800000; '>"</span><span style='color:#808030; '>,</span> <span style='color:#800000; font-weight:bold; '>function</span><span style='color:#808030; '>(</span>res<span style='color:#808030; '>)</span> <span style='color:#800080; '>{</span>console<span style='color:#808030; '>.</span><span style='color:#800000; font-weight:bold; '>log</span><span style='color:#808030; '>(</span>res<span style='color:#808030; '>)</span><span style='color:#800080; '>}</span><span style='color:#808030; '>);</span></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>off</td>
|
||||
<td> </td>
|
||||
<td>Remove an events on element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3"><span style="color:#000000;background:#ffffff;">
|
||||
<pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>#element<span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>dd<span style='color:#808030; '><span style='color:#800000; '>"</span>)</span><span style='color:#800080; '>;</span>
|
||||
oDropdown<span style='color:#808030; '>.</span>off<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span><span style='color:#0000e6; '>change</span><span style='color:#800000; '>"</span><span style='color:#800080; '></span><span style='color:#808030; '>)</span>;</pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>getData</td>
|
||||
<td>uiData</td>
|
||||
<td>Get the current selected uiData object.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">var uiData = <span style="color:#000000;background:#ffffff;">oDropdown</span>.getData();</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>act</td>
|
||||
<td> </td>
|
||||
<td>For everything else. You can call any exisitng method via this single method.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>#element<span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>dd<span style='color:#808030; '><span style='color:#800000; '>"</span>)</span><span style='color:#800080; '>;</span>
|
||||
oDropdown<span style='color:#808030; '>.</span>act<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span><span style='color:#0000e6; '>add</span><span style='color:#800000; '>"</span><span style='color:#808030; '>,</span> <span style='color:#800000; font-weight:bold; '>new</span> Option<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span><span style='color:#0000e6; '>Lucky</span><span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
|
||||
oDropdown<span style='color:#808030; '>.</span>act<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span><span style='color:#0000e6; '>remove</span><span style='color:#800000; '>"</span><span style='color:#808030; '>,</span> <span style='color:#008c00; '>1</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
|
||||
<span style='color:#800000; font-weight:bold; '>var</span> opt <span style='color:#808030; '>=</span> oDropdown<span style='color:#808030; '>.</span>act<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span><span style='color:#0000e6; '>namedItem</span><span style='color:#800000; '>"</span><span style='color:#808030; '>,</span> <span style='color:#800000; '>"</span><span style='color:#0000e6; '>calendar</span><span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>setIndexByValue</td>
|
||||
<td> </td>
|
||||
<td>Set index by value. (v 3.2)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>#element<span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>dd<span style='color:#808030; '><span style='color:#800000; '>"</span>)</span><span style='color:#800080; '>;</span>
|
||||
oDropdown.setIndexByValue(<span style='color:#008c00; '>"calendar"</span><span style='color:#808030; '>);</pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>destroy</td>
|
||||
<td> </td>
|
||||
<td>Restore the original dorpdown.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3"><span style="color:#000000;background:#ffffff;">
|
||||
<pre style='color:#000000;background:#ffffff;'>
|
||||
<span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>#element<span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>dd<span style='color:#808030; '><span style='color:#800000; '>"</span>)</span><span style='color:#800080; '>;</span>
|
||||
oDropdown<span style='color:#808030; '>.</span>destroy<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>refresh</td>
|
||||
<td> </td>
|
||||
<td>Refresh the msdropdown UI and value based on original dropdown.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3"><pre style='color:#000000;background:#ffffff;'><span style='color:#800000; font-weight:bold; '>var</span> oDropdown <span style='color:#808030; '>=</span> $<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>#element<span style='color:#800000; '>"</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>msDropdown<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span><span style='color:#808030; '>.</span>data<span style='color:#808030; '>(</span><span style='color:#800000; '>"</span>dd<span style='color:#808030; '><span style='color:#800000; '>"</span>)</span><span style='color:#800080; '>;</span>
|
||||
oDropdown<span style='color:#808030; '>.</span>refresh<span style='color:#808030; '>(</span><span style='color:#808030; '>)</span>; //or
|
||||
document.getElmentById("element").refresh();</pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
<p> </p>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(e) {
|
||||
//no use
|
||||
try {
|
||||
var pages = $("#pages").msDropdown({on:{change:function(data, ui) {
|
||||
var val = data.value;
|
||||
if(val!="")
|
||||
window.location = val;
|
||||
}}}).data("dd");
|
||||
|
||||
var pagename = document.location.pathname.toString();
|
||||
pagename = pagename.split("/");
|
||||
pages.setIndexByValue(pagename[pagename.length-1]);
|
||||
$("#ver").html(msBeautify.version.msDropdown);
|
||||
} catch(e) {
|
||||
//console.log(e);
|
||||
}
|
||||
|
||||
$("#ver").html(msBeautify.version.msDropdown);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,135 @@
|
||||
<!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>Javascript image dropdown - basic</title>
|
||||
<link rel="stylesheet" href="css/sample.css" />
|
||||
<script src="../js/jquery/jquery-1.9.0.min.js"></script>
|
||||
<!-- <msdropdown> -->
|
||||
<link rel="stylesheet" type="text/css" href="../css/msdropdown/dd.css" />
|
||||
<script src="../js/msdropdown/jquery.dd.min.js"></script>
|
||||
<!-- </msdropdown> -->
|
||||
</head>
|
||||
<body>
|
||||
<table width="100%" border="0" cellspacing="1" cellpadding="5" class="topmenu">
|
||||
<tr>
|
||||
<td colspan="2" class="top"><h1>Javascript image dropdown <span id="ver"></span> <a title="Download" href="http://www.marghoobsuleman.com/jquery-image-dropdown" class="small">Download</a></h1></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="25%"><select style="width:250px" name="pages" id="pages">
|
||||
<option value="" selected="selected">Choose a sample page</option>
|
||||
<option value="index.html">Normal</option>
|
||||
<option value="byjson.html">By Json Data</option>
|
||||
<option value="multiple-skin.html">Multiple Skin</option>
|
||||
<option value="css-sprite.html">CSS Sprite</option>
|
||||
<option value="object-oriented-approach.html">Object Oriented Approach</option>
|
||||
<option value="object-oriented-approach-more.html">Object Oriented Approach - More</option>
|
||||
<option value="use-checkbox.html">Use Checkbox</option>
|
||||
<option value="mouse-events.html">Mouse Events</option>
|
||||
<option value="help.html">Documentation</option>
|
||||
</select></td>
|
||||
<td align="left"><a href="help.html">Documentation</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
<form action="submitdata.php" method="post" enctype="multipart/form-data" name="frmdata">
|
||||
<table width="100%" border="0" cellspacing="1" cellpadding="5" class="tblWhite">
|
||||
<tr>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top">Created from HTML SELECT Element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
<select id="payments" name="payments" style="width:250px;">
|
||||
<option value="" data-description="Choos your payment gateway">Payment Gateway</option>
|
||||
<option value="amex" data-image="../images/msdropdown/icons/Amex-56.png" data-description="My life. My card...">Amex</option>
|
||||
<option value="Discover" data-image="../images/msdropdown/icons/Discover-56.png" data-description="It pays to Discover...">Discover</option>
|
||||
<option value="Mastercard" data-image="../images/msdropdown/icons/Mastercard-56.png" data-title="For everything else..." data-description="For everything else...">Mastercard</option>
|
||||
<option value="cash" data-image="../images/msdropdown/icons/Cash-56.png" data-description="Sorry not available..." disabled="true">Cash on devlivery</option>
|
||||
<option value="Visa" data-image="../images/msdropdown/icons/Visa-56.png" data-description="All you need...">Visa</option>
|
||||
<option value="Paypal" data-image="../images/msdropdown/icons/Paypal-56.png" data-description="Pay and get paid...">Paypal</option>
|
||||
</select>
|
||||
<select name="tech" class="tech" id="tech" style="width:200px">
|
||||
<option value="calendar" data-image="../images/msdropdown/icons/icon_calendar.gif">Calendar</option>
|
||||
<option value="shopping_cart" data-image="../images/msdropdown/icons/icon_cart.gif">Shopping Cart</option>
|
||||
<option value="cd" data-image="../images/msdropdown/icons/icon_cd.gif" name="cd">CD</option>
|
||||
<option value="email" data-image="../images/msdropdown/icons/icon_email.gif">Email</option>
|
||||
<option value="faq" data-image="../images/msdropdown/icons/icon_faq.gif">FAQ</option>
|
||||
<option value="games" data-image="../images/msdropdown/icons/icon_games.gif">Games</option>
|
||||
<option value="music" data-image="../images/msdropdown/icons/icon_music.gif">Music</option>
|
||||
<option value="phone" data-image="../images/msdropdown/icons/icon_phone.gif">Phone</option>
|
||||
<option value="graph" data-image="../images/msdropdown/icons/icon_sales.gif">Graph</option>
|
||||
<option value="secured" data-image="../images/msdropdown/icons/icon_secure.gif">Secured</option>
|
||||
<option value="video" data-image="../images/msdropdown/icons/icon_video.gif">Video</option>
|
||||
<option value="cd" data-image="../images/msdropdown/icons/icon_cd.gif" name="cd">CD</option>
|
||||
</select>
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="bottom"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="bottom"><input type="submit" value="Submit" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="bottom"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="bottom"><strong>Source Code:</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
|
||||
<code>
|
||||
<pre>
|
||||
<script>
|
||||
$(document).ready(function(e) {
|
||||
$("#payments").msDropdown({visibleRows:4});
|
||||
$("#tech").msDropdown();
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
<p> </p>
|
||||
|
||||
<script>
|
||||
//var tc;
|
||||
$(document).ready(function(e) {
|
||||
$("#payments").msDropdown({visibleRows:4});
|
||||
$("#tech").msDropdown().data("dd");//{animStyle:'none'} /{animStyle:'slideDown'} {animStyle:'show'}
|
||||
//no use
|
||||
try {
|
||||
var pages = $("#pages").msDropdown({on:{change:function(data, ui) {
|
||||
var val = data.value;
|
||||
if(val!="")
|
||||
window.location = val;
|
||||
}}}).data("dd");
|
||||
|
||||
var pagename = document.location.pathname.toString();
|
||||
pagename = pagename.split("/");
|
||||
pages.setIndexByValue(pagename[pagename.length-1]);
|
||||
$("#ver").html(msBeautify.version.msDropdown);
|
||||
} catch(e) {
|
||||
//console.log(e);
|
||||
}
|
||||
|
||||
$("#ver").html(msBeautify.version.msDropdown);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,478 @@
|
||||
<!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>Javascript image dropdown - mouse events</title>
|
||||
<link rel="stylesheet" href="css/sample.css" />
|
||||
<script src="../js/jquery/jquery-1.9.0.min.js"></script>
|
||||
|
||||
<!-- <msdropdown> -->
|
||||
<link rel="stylesheet" type="text/css" href="../css/msdropdown/dd.css" />
|
||||
<script src="../js/msdropdown/jquery.dd.min.js"></script>
|
||||
<!-- </msdropdown> -->
|
||||
|
||||
<style type="text/css">
|
||||
.small1 {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="1" cellpadding="5" class="topmenu">
|
||||
<tr>
|
||||
<td colspan="2" class="top"><h1>Javascript image dropdown <span id="ver"></span> <a title="Download" href="http://www.marghoobsuleman.com/jquery-image-dropdown" class="small">Download</a></h1></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="25%"><select style="width:250px" name="pages" id="pages">
|
||||
<option value="" selected="selected">Choose a sample page</option>
|
||||
<option value="index.html">Normal</option>
|
||||
<option value="byjson.html">By Json Data</option>
|
||||
<option value="multiple-skin.html">Multiple Skin</option>
|
||||
<option value="css-sprite.html">CSS Sprite</option>
|
||||
<option value="object-oriented-approach.html">Object Oriented Approach</option>
|
||||
<option value="object-oriented-approach-more.html">Object Oriented Approach - More</option>
|
||||
<option value="use-checkbox.html">Use Checkbox</option>
|
||||
<option value="mouse-events.html">Mouse Events</option>
|
||||
<option value="help.html">Documentation</option>
|
||||
</select></td>
|
||||
<td align="left"><a href="help.html">Documentation</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
<form action="submitdata.php" method="post" enctype="multipart/form-data" name="frmdata">
|
||||
<table width="100%" border="0" cellspacing="1" cellpadding="5" class="tblWhite">
|
||||
<tr>
|
||||
<td colspan="3"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="59%" valign="top"><table width="600" border="0" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td width="600" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">
|
||||
<tr>
|
||||
<td align="center" bgcolor="#f2f2f2">
|
||||
<a class="demoinaction" id="converta" href="javascript:convertNow();" style="cursor:pointer;">Convert all combobox to image dropdown!</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center" bgcolor="#f2f2f2"><div id="mainHolder" style="background-color:#CCCCCC">
|
||||
<input type="button" name="designView" id="designView" value="Design View" onclick="$('#designhtml').show();$('#codehtml').hide();" style="width:100px; margin:10px" />
|
||||
<input type="button" name="codeView" id="codeView" value="Code View" onclick="$('#designhtml').hide();$('#codes').text($('#designhtml').html());$('#codehtml').show();" style="width:100px; margin:10px" />
|
||||
<input type="button" name="convertBtn" id="convertBtn" value="Convert to image dropdown" onclick="convertNow('#designhtml select')" style="margin:10px" />
|
||||
<div id="codehtml" class="hidden" style="height:500px; overflow:auto; border:1px solid #c3c3c3; width:500px; background-color:#FFFFFF">
|
||||
<pre id="codes" style="overflow:auto">
|
||||
</pre>
|
||||
</div>
|
||||
<div id="designhtml">
|
||||
<table width="100%" border="0" align="left" cellpadding="5" cellspacing="0" bgcolor="#999999">
|
||||
<tr>
|
||||
<td height="30" align="left" valign="bottom" bgcolor="#FFFFFF"><h2><strong> Event Examples</strong></h2></td>
|
||||
<td align="left" bgcolor="#FFFFFF"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td height="30" align="left" valign="bottom" bgcolor="#FFFFFF">onchange drop down</td>
|
||||
<td align="left" bgcolor="#FFFFFF"><select name="websites3" id="websites3" style="width:200px;" onchange="showValue($('#websites3 option:selected').text(), this.value);output('onchange', this);" >
|
||||
<option value="calendar" selected="selected" title="../images/msdropdown/icons/icon_calendar.gif">Calendar</option>
|
||||
<option value="shopping_cart" title="../images/msdropdown/icons/icon_cart.gif">Shopping Cart</option>
|
||||
<option value="cd" title="../images/msdropdown/icons/icon_cd.gif">CD</option>
|
||||
<option value="email" title="../images/msdropdown/icons/icon_email.gif">Email</option>
|
||||
<option value="faq" title="../images/msdropdown/icons/icon_faq.gif">FAQ</option>
|
||||
<option value="games" title="../images/msdropdown/icons/icon_games.gif">Games</option>
|
||||
<option value="music" title="../images/msdropdown/icons/icon_music.gif">Music</option>
|
||||
<option value="phone" title="../images/msdropdown/icons/icon_phone.gif">Phone</option>
|
||||
<option value="graph" title="../images/msdropdown/icons/icon_sales.gif">Graph</option>
|
||||
<option value="secured" title="../images/msdropdown/icons/icon_secure.gif">Secured</option>
|
||||
<option value="video" title="../images/msdropdown/icons/icon_video.gif">Video</option>
|
||||
</select></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td height="30" align="left" bgcolor="#FFFFFF">onclick</td>
|
||||
<td align="left" valign="bottom" bgcolor="#FFFFFF"><select name="websites5" id="websites5" onclick="showValue($('#websites5 option:selected').text(), this.value);output('onclick', this);" style="width:200px;" >
|
||||
<option value="calendar" title="../images/msdropdown/icons/icon_calendar.gif">Calendar</option>
|
||||
<option value="shopping_cart" title="../images/msdropdown/icons/icon_cart.gif">Shopping Cart</option>
|
||||
<option value="cd" selected="selected" title="../images/msdropdown/icons/icon_cd.gif">CD</option>
|
||||
<option value="email" title="../images/msdropdown/icons/icon_email.gif">Email</option>
|
||||
<option value="faq" title="../images/msdropdown/icons/icon_faq.gif">FAQ</option>
|
||||
<option value="games" title="../images/msdropdown/icons/icon_games.gif" >Games</option>
|
||||
<option value="music" title="../images/msdropdown/icons/icon_music.gif">Music</option>
|
||||
<option value="phone" title="../images/msdropdown/icons/icon_phone.gif">Phone</option>
|
||||
<option value="graph" title="../images/msdropdown/icons/icon_sales.gif">Graph</option>
|
||||
<option value="secured" title="../images/msdropdown/icons/icon_secure.gif">Secured</option>
|
||||
<option value="video" title="../images/msdropdown/icons/icon_video.gif">Video</option>
|
||||
</select></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td height="30" align="left" bgcolor="#FFFFFF">ondblclick<br />
|
||||
(does not support in original, but it works in converted)</td>
|
||||
<td align="left" valign="bottom" bgcolor="#FFFFFF"><select name="websites6" id="websites6" ondblclick="showValue($('#websites6 option:selected').text(), this.value);output('ondblclick', this)" style="width:200px;">
|
||||
<option value="calendar" title="../images/msdropdown/icons/icon_calendar.gif">Calendar</option>
|
||||
<option value="shopping_cart" title="../images/msdropdown/icons/icon_cart.gif">Shopping Cart</option>
|
||||
<option value="cd" title="../images/msdropdown/icons/icon_cd.gif">CD</option>
|
||||
<option value="email" selected="selected" title="../images/msdropdown/icons/icon_email.gif">Email</option>
|
||||
<option value="faq" title="../images/msdropdown/icons/icon_faq.gif">FAQ</option>
|
||||
<option value="games" title="../images/msdropdown/icons/icon_games.gif" >Games</option>
|
||||
<option value="music" title="../images/msdropdown/icons/icon_music.gif">Music</option>
|
||||
<option value="phone" title="../images/msdropdown/icons/icon_phone.gif">Phone</option>
|
||||
<option value="graph" title="../images/msdropdown/icons/icon_sales.gif">Graph</option>
|
||||
<option value="secured" title="../images/msdropdown/icons/icon_secure.gif">Secured</option>
|
||||
<option value="video" title="../images/msdropdown/icons/icon_video.gif">Video</option>
|
||||
</select></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td height="30" align="left" bgcolor="#FFFFFF">onmousemove</td>
|
||||
<td align="left" valign="bottom" bgcolor="#FFFFFF">
|
||||
<select name="websites8" id="websites8" onmousemove="showValue($('#websites8 option:selected').text(), this.value);output('onmousemove', this)" style="width:200px;">
|
||||
<option value="calendar" title="../images/msdropdown/icons/icon_calendar.gif">Calendar</option>
|
||||
<option value="shopping_cart" title="../images/msdropdown/icons/icon_cart.gif">Shopping Cart</option>
|
||||
<option value="cd" title="../images/msdropdown/icons/icon_cd.gif">CD</option>
|
||||
<option value="email" title="../images/msdropdown/icons/icon_email.gif">Email</option>
|
||||
<option value="faq" selected="selected" title="../images/msdropdown/icons/icon_faq.gif">FAQ</option>
|
||||
<option value="games" title="../images/msdropdown/icons/icon_games.gif" >Games</option>
|
||||
<option value="music" title="../images/msdropdown/icons/icon_music.gif">Music</option>
|
||||
<option value="phone" title="../images/msdropdown/icons/icon_phone.gif">Phone</option>
|
||||
<option value="graph" title="../images/msdropdown/icons/icon_sales.gif">Graph</option>
|
||||
<option value="secured" title="../images/msdropdown/icons/icon_secure.gif">Secured</option>
|
||||
<option value="video" title="../images/msdropdown/icons/icon_video.gif">Video</option>
|
||||
</select></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td height="30" align="left" bgcolor="#FFFFFF">onmouseover</td>
|
||||
<td align="left" valign="bottom" bgcolor="#FFFFFF">
|
||||
<select name="websites7" id="websites7" onmouseover="showValue($('#websites7 option:selected').text(), this.value);output('onmouseover', this)" style="width:200px;">
|
||||
<option value="calendar" title="../images/msdropdown/icons/icon_calendar.gif">Calendar</option>
|
||||
<option value="shopping_cart" title="../images/msdropdown/icons/icon_cart.gif">Shopping Cart</option>
|
||||
<option value="cd" title="../images/msdropdown/icons/icon_cd.gif">CD</option>
|
||||
<option value="email" title="../images/msdropdown/icons/icon_email.gif">Email</option>
|
||||
<option value="faq" title="../images/msdropdown/icons/icon_faq.gif">FAQ</option>
|
||||
<option value="games" selected="selected" title="../images/msdropdown/icons/icon_games.gif">Games</option>
|
||||
<option value="music" title="../images/msdropdown/icons/icon_music.gif">Music</option>
|
||||
<option value="phone" title="../images/msdropdown/icons/icon_phone.gif">Phone</option>
|
||||
<option value="graph" title="../images/msdropdown/icons/icon_sales.gif">Graph</option>
|
||||
<option value="secured" title="../images/msdropdown/icons/icon_secure.gif">Secured</option>
|
||||
<option value="video" title="../images/msdropdown/icons/icon_video.gif">Video</option>
|
||||
</select></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td height="30" align="left" bgcolor="#FFFFFF">onmouseout</td>
|
||||
<td align="left" valign="bottom" bgcolor="#FFFFFF">
|
||||
<select name="websites9" id="websites9" onmouseout="showValue($('#websites9 option:selected').text(), this.value);output('onmouseout', this)" style="width:200px;">
|
||||
<option value="calendar" title="../images/msdropdown/icons/icon_calendar.gif">Calendar</option>
|
||||
<option value="shopping_cart" title="../images/msdropdown/icons/icon_cart.gif">Shopping Cart</option>
|
||||
<option value="cd" title="../images/msdropdown/icons/icon_cd.gif">CD</option>
|
||||
<option value="email" title="../images/msdropdown/icons/icon_email.gif">Email</option>
|
||||
<option value="faq" title="../images/msdropdown/icons/icon_faq.gif">FAQ</option>
|
||||
<option value="games" title="../images/msdropdown/icons/icon_games.gif" >Games</option>
|
||||
<option value="music" selected="selected" title="../images/msdropdown/icons/icon_music.gif">Music</option>
|
||||
<option value="phone" title="../images/msdropdown/icons/icon_phone.gif">Phone</option>
|
||||
<option value="graph" title="../images/msdropdown/icons/icon_sales.gif">Graph</option>
|
||||
<option value="secured" title="../images/msdropdown/icons/icon_secure.gif">Secured</option>
|
||||
<option value="video" title="../images/msdropdown/icons/icon_video.gif">Video</option>
|
||||
</select></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td height="30" align="left" bgcolor="#FFFFFF">onmousedown</td>
|
||||
<td align="left" valign="bottom" bgcolor="#FFFFFF">
|
||||
<select name="websites11" id="websites11" onmousedown="showValue($('#websites11 option:selected').text(), this.value);output('onmousedown', this)" style="width:200px;">
|
||||
<option value="calendar" title="../images/msdropdown/icons/icon_calendar.gif">Calendar</option>
|
||||
<option value="shopping_cart" title="../images/msdropdown/icons/icon_cart.gif">Shopping Cart</option>
|
||||
<option value="cd" title="../images/msdropdown/icons/icon_cd.gif">CD</option>
|
||||
<option value="email" title="../images/msdropdown/icons/icon_email.gif">Email</option>
|
||||
<option value="faq" title="../images/msdropdown/icons/icon_faq.gif">FAQ</option>
|
||||
<option value="games" title="../images/msdropdown/icons/icon_games.gif" >Games</option>
|
||||
<option value="music" title="../images/msdropdown/icons/icon_music.gif">Music</option>
|
||||
<option value="phone" title="../images/msdropdown/icons/icon_phone.gif">Phone</option>
|
||||
<option value="graph" selected="selected" title="../images/msdropdown/icons/icon_sales.gif">Graph</option>
|
||||
<option value="secured" title="../images/msdropdown/icons/icon_secure.gif">Secured</option>
|
||||
<option value="video" title="../images/msdropdown/icons/icon_video.gif">Video</option>
|
||||
</select></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td height="30" align="left" bgcolor="#FFFFFF">onmouseup</td>
|
||||
<td align="left" valign="bottom" bgcolor="#FFFFFF">
|
||||
<select name="websites12" id="websites12" onmouseup="showValue($('#websites12 option:selected').text(), this.value);output('onmouseup', this)" style="width:200px;">
|
||||
<option value="calendar" title="../images/msdropdown/icons/icon_calendar.gif">Calendar</option>
|
||||
<option value="shopping_cart" title="../images/msdropdown/icons/icon_cart.gif">Shopping Cart</option>
|
||||
<option value="cd" title="../images/msdropdown/icons/icon_cd.gif">CD</option>
|
||||
<option value="email" title="../images/msdropdown/icons/icon_email.gif">Email</option>
|
||||
<option value="faq" title="../images/msdropdown/icons/icon_faq.gif">FAQ</option>
|
||||
<option value="games" title="../images/msdropdown/icons/icon_games.gif" >Games</option>
|
||||
<option value="music" title="../images/msdropdown/icons/icon_music.gif">Music</option>
|
||||
<option value="phone" title="../images/msdropdown/icons/icon_phone.gif">Phone</option>
|
||||
<option value="graph" title="../images/msdropdown/icons/icon_sales.gif">Graph</option>
|
||||
<option value="secured" selected="selected" title="../images/msdropdown/icons/icon_secure.gif">Secured</option>
|
||||
<option value="video" title="../images/msdropdown/icons/icon_video.gif">Video</option>
|
||||
</select></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td height="30" align="left" valign="top" bgcolor="#FFFFFF"> </td>
|
||||
<td align="left" bgcolor="#FFFFFF">javascript Image dropdown :)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td height="30" align="left" valign="top" bgcolor="#FFFFFF">onkeydown</td>
|
||||
<td align="left" bgcolor="#FFFFFF"><select name="websitesonkey" id="websitesonkey" onkeydown="showValue($('#websitesonkey option:selected').text(), this.value);output('onkeydown', this)" style="width:200px;">
|
||||
<option value="calendar" title="../images/msdropdown/icons/icon_calendar.gif">Calendar</option>
|
||||
<option value="shopping_cart" title="../images/msdropdown/icons/icon_cart.gif">Shopping Cart</option>
|
||||
<option value="cd" title="../images/msdropdown/icons/icon_cd.gif">CD</option>
|
||||
<option value="email" title="../images/msdropdown/icons/icon_email.gif">Email</option>
|
||||
<option value="faq" title="../images/msdropdown/icons/icon_faq.gif">FAQ</option>
|
||||
<option value="games" title="../images/msdropdown/icons/icon_games.gif" >Games</option>
|
||||
<option value="music" title="../images/msdropdown/icons/icon_music.gif">Music</option>
|
||||
<option value="phone" title="../images/msdropdown/icons/icon_phone.gif">Phone</option>
|
||||
<option value="graph" title="../images/msdropdown/icons/icon_sales.gif">Graph</option>
|
||||
<option value="secured" selected="selected" title="../images/msdropdown/icons/icon_secure.gif">Secured</option>
|
||||
<option value="video" title="../images/msdropdown/icons/icon_video.gif">Video</option>
|
||||
</select></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td height="30" align="left" valign="top" bgcolor="#FFFFFF">onkeyup</td>
|
||||
<td align="left" bgcolor="#FFFFFF"><select name="websitesonkeyup" id="websitesonkeyup" onkeyup="showValue($('#websitesonkeyup option:selected').text(), this.value);output('onkeyup', this)" style="width:200px;">
|
||||
<option value="calendar" title="../images/msdropdown/icons/icon_calendar.gif">Calendar</option>
|
||||
<option value="shopping_cart" title="../images/msdropdown/icons/icon_cart.gif">Shopping Cart</option>
|
||||
<option value="cd" title="../images/msdropdown/icons/icon_cd.gif">CD</option>
|
||||
<option value="email" title="../images/msdropdown/icons/icon_email.gif">Email</option>
|
||||
<option value="faq" title="../images/msdropdown/icons/icon_faq.gif">FAQ</option>
|
||||
<option value="games" title="../images/msdropdown/icons/icon_games.gif" >Games</option>
|
||||
<option value="music" title="../images/msdropdown/icons/icon_music.gif">Music</option>
|
||||
<option value="phone" title="../images/msdropdown/icons/icon_phone.gif">Phone</option>
|
||||
<option value="graph" title="../images/msdropdown/icons/icon_sales.gif">Graph</option>
|
||||
<option value="secured" selected="selected" title="../images/msdropdown/icons/icon_secure.gif">Secured</option>
|
||||
<option value="video" title="../images/msdropdown/icons/icon_video.gif">Video</option>
|
||||
</select></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td height="30" align="left" valign="top" bgcolor="#FFFFFF"> </td>
|
||||
<td align="left" bgcolor="#FFFFFF"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td height="30" colspan="2" align="left" valign="top" bgcolor="#FFFFFF"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td height="30" align="left" valign="top" bgcolor="#FFFFFF"> </td>
|
||||
<td align="left" bgcolor="#FFFFFF"> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mainHolder2" style="background-color:#CCCCCC; clear:both;">
|
||||
<input type="button" name="designView2" id="designView2" value="Design View" onclick="$('#designhtml2').show();$('#codehtml2').hide();" style="width:100px; margin:10px" />
|
||||
<input type="button" name="codeView2" id="codeView2" value="Code View" onclick="$('#designhtml2').hide();$('#codes2').text($('#designhtml2').html());$('#codehtml2').show();" style="width:100px; margin:10px" />
|
||||
<input type="button" name="convertBtn" id="convertBtn" value="Convert to image dropdown" onclick="convertNow('#designhtml2 select')" style="margin:10px" />
|
||||
<div id="codehtml2" class="hidden" style="height:500px; overflow:auto; border:1px solid #c3c3c3; width:95%; background-color:#FFFFFF">
|
||||
<pre id="codes2" style="overflow:auto">
|
||||
</pre>
|
||||
</div>
|
||||
<div id="designhtml2">
|
||||
<table width="100%" border="0" align="left" cellpadding="5" cellspacing="0" bgcolor="#999999">
|
||||
<tr>
|
||||
<td height="30" align="left" valign="bottom" bgcolor="#FFFFFF"><h2><strong>Inline Style</strong></h2></td>
|
||||
<td align="left" bgcolor="#FFFFFF"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td height="30" align="left" bgcolor="#FFFFFF"><label>Inline Style </label></td>
|
||||
<td align="left" valign="bottom" bgcolor="#FFFFFF"><select name="multi2" id="multi2" onchange="showValue($('#multi2 option:selected').text(), this.value); output('onchage', this)" style="width:300px">
|
||||
<option value="enabled" title="../images/msdropdown/icons/enabled.gif">I am enabled</option>
|
||||
<option value="disabled" title="../images/msdropdown/icons/enabled.gif" disabled="disabled">I am disabled</option>
|
||||
<option value="colored" title="../images/msdropdown/icons/enabled.gif" style="background-color:#99FF00; color:#333333;">I´ve inline style :0</option>
|
||||
<option value="what" title="../images/msdropdown/icons/enabled.gif">I am simple</option>
|
||||
<option value="what" title="../images/msdropdown/icons/enabled.gif">I am also simple</option>
|
||||
</select></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td height="30" align="left" valign="top" bgcolor="#FFFFFF"> </td>
|
||||
<td align="left" bgcolor="#FFFFFF"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td height="30" align="left" valign="top" bgcolor="#FFFFFF"> </td>
|
||||
<td align="left" bgcolor="#FFFFFF"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td height="30" align="left" valign="bottom" bgcolor="#FFFFFF"><h2><strong>OPTGROUP</strong></h2></td>
|
||||
<td align="left" bgcolor="#FFFFFF">
|
||||
<select name="ComOS2" id="ComOS2" style="width:250px">
|
||||
<option selected="selected" label="none" value="none">None</option>
|
||||
<optgroup label="PortMaster 3" title="../images/msdropdown/icons/icon_calendar.gif">
|
||||
<option value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1</option>
|
||||
<option value="pm3_3.7">PortMaster 3 with ComOS 3.7</option>
|
||||
<option value="pm3_3.5">PortMaster 3 with ComOS 3.5</option>
|
||||
</optgroup>
|
||||
<optgroup label="PortMaster 2">
|
||||
<option value="pm2_3.7" title="../images/msdropdown/icons/enabled.gif">PortMaster 2 with ComOS 3.7</option>
|
||||
<option value="pm2_3.5">PortMaster 2 with ComOS 3.5</option>
|
||||
</optgroup>
|
||||
<optgroup label="IRX">
|
||||
<option value="IRX_3.7R" style="background-color:#CCCC00">IRX with ComOS 3.7R</option>
|
||||
<option value="IRX_3.5R">IRX with ComOS 3.5R</option>
|
||||
</optgroup>
|
||||
</select></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td height="30" align="left" valign="top" bgcolor="#FFFFFF"> </td>
|
||||
<td align="left" bgcolor="#FFFFFF"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td height="30" align="left" valign="top" bgcolor="#FFFFFF"><h2>List</h2></td>
|
||||
<td align="left" bgcolor="#FFFFFF"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td height="30" align="left" valign="bottom" bgcolor="#FFFFFF"><select name="listbox" size="5" multiple="multiple" id="listbox" style="width:200px;" onchange="showValue($('#websites3 option:selected').text(), this.value);output('onchange', this);" >
|
||||
<option value="calendar" title="../images/msdropdown/icons/icon_calendar.gif">Calendar</option>
|
||||
<option value="shopping_cart" selected="selected" title="../images/msdropdown/icons/icon_cart.gif">Shopping Cart</option>
|
||||
<option value="cd" title="../images/msdropdown/icons/icon_cd.gif">CD</option>
|
||||
<option value="email" selected="selected" title="../images/msdropdown/icons/icon_email.gif">Email</option>
|
||||
<option value="faq" title="../images/msdropdown/icons/icon_faq.gif">FAQ</option>
|
||||
<option value="games" selected="selected" title="../images/msdropdown/icons/icon_games.gif">Games</option>
|
||||
<option value="music" title="../images/msdropdown/icons/icon_music.gif">Music</option>
|
||||
<option value="phone" title="../images/msdropdown/icons/icon_phone.gif">Phone</option>
|
||||
<option value="graph" title="../images/msdropdown/icons/icon_sales.gif">Graph</option>
|
||||
<option value="secured" title="../images/msdropdown/icons/icon_secure.gif">Secured</option>
|
||||
<option value="video" title="../images/msdropdown/icons/icon_video.gif">Video</option>
|
||||
</select>
|
||||
</td>
|
||||
<td align="left" bgcolor="#FFFFFF"><button type="button" id="get" value="Get Indexes" onclick="return getSelctedIndexes('listbox')">Get Indexes</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td height="30" align="left" valign="top" bgcolor="#FFFFFF"> </td>
|
||||
<td align="left" bgcolor="#FFFFFF"> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mainHolder3" style="background-color:#CCCCCC; clear:both;">
|
||||
<input type="button" name="designView3" id="designView3" value="Design View" onclick="$('#designhtml3').show();$('#codehtml3').hide();" style="width:100px; margin:10px" />
|
||||
<input type="button" name="codeView3" id="codeView3" value="Code View" onclick="$('#designhtml3').hide();$('#codes3').text($('#designhtml3').html());$('#codehtml3').show();" style="width:100px; margin:10px" />
|
||||
<input type="button" name="convertBtn" id="convertBtn" value="Convert to image dropdown" onclick="convertNow('#designhtml3 select')" style="margin:10px" />
|
||||
<div id="codehtml3" class="hidden" style="height:500px; overflow:auto; border:1px solid #c3c3c3; width:95%; background-color:#FFFFFF">
|
||||
<pre id="codes3" style="overflow:auto">
|
||||
</pre>
|
||||
</div>
|
||||
<div id="designhtml3">
|
||||
<table width="100%" border="0" align="left" cellpadding="5" cellspacing="0" bgcolor="#999999">
|
||||
<tr>
|
||||
<td height="30" align="left" valign="top" bgcolor="#FFFFFF"> </td>
|
||||
<td align="left" bgcolor="#FFFFFF"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td height="30" align="left" valign="top" bgcolor="#FFFFFF"> </td>
|
||||
<td align="left" bgcolor="#FFFFFF"> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div></td>
|
||||
</tr>
|
||||
</table></td>
|
||||
</tr>
|
||||
</table></td>
|
||||
<td width="2%" valign="top"> </td>
|
||||
<td width="39%" valign="top"><div id="debugwindow" style="position:absolute;border:2px solid #333; margin:10px; background:#FFF; width:400px; float:right " >
|
||||
<div style="height:20px; padding:5px 10px;background-color:#000; color:#FFF;"><a href="javascript:clearDebugWindow()" style="float:right;color:#fff">Clear Window</a> Debug Window</div>
|
||||
<div style="clear:both;padding:10px;">
|
||||
<h1 id="selectedvalue">Select any dropdown </h1>
|
||||
<p id="info"></p>
|
||||
</div>
|
||||
<div id="output" style="padding:10px;"></div>
|
||||
</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" valign="bottom"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" valign="bottom"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" valign="top"> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
<p> </p>
|
||||
|
||||
<script>
|
||||
|
||||
$(document).ready(function(e) {
|
||||
//no use
|
||||
try {
|
||||
var pages = $("#pages").msDropdown({on:{change:function(data, ui) {
|
||||
var val = data.value;
|
||||
if(val!="")
|
||||
window.location = val;
|
||||
}}}).data("dd");
|
||||
|
||||
var pagename = document.location.pathname.toString();
|
||||
pagename = pagename.split("/");
|
||||
pages.setIndexByValue(pagename[pagename.length-1]);
|
||||
$("#ver").html(msBeautify.version.msDropdown);
|
||||
} catch(e) {
|
||||
//console.log(e);
|
||||
}
|
||||
|
||||
$("#ver").html(msBeautify.version.msDropdown);
|
||||
|
||||
//window scroll
|
||||
$(window).bind("scroll",scrollMe);
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
//This file is just for demo purpose.
|
||||
//no use in your project :)
|
||||
// please dont use this file in your project
|
||||
function showValue(arg, arg2) {
|
||||
//alert("calling show me: arg1 " + arg + " arg2 " + arg2);
|
||||
var s = (arg2==undefined) ? '' : "<br /><font color='darkgreen'>value:</font> "+ arg2;
|
||||
$("#selectedvalue").html("<font color='darkgreen'>label:</font> " + arg + s);
|
||||
}
|
||||
function convertNow(byIds) {
|
||||
//MSDropDown.showIconWithTitle(false);
|
||||
try {
|
||||
if(byIds==undefined) {
|
||||
$("body select").msDropDown();
|
||||
} else {
|
||||
$(byIds).msDropDown();
|
||||
}
|
||||
$("#converta").hide("fast");
|
||||
} catch(e) {
|
||||
//console.debug(e);
|
||||
alert(e);
|
||||
}
|
||||
$('#info').html('<h2>I would appreciate your <a style="color:chocolate" href="http://www.marghoobsuleman.com/jquery-image-dropdown#comment-controls">feedback.</a></h2>');
|
||||
}
|
||||
var counter = 1;
|
||||
function output(msg, id) {
|
||||
if(counter>=100) counter = 1;
|
||||
var old = $("#output").html();
|
||||
var sID = (typeof id=="string") ? id : id.id;
|
||||
$("#output").html((counter++)+": id= "+ sID +" : " + msg+"<br />"+old);
|
||||
}
|
||||
function clearDebugWindow() {
|
||||
counter = 1;
|
||||
$("#output").html("");
|
||||
}
|
||||
|
||||
function disabledcombo(targetCombo, disabled) {
|
||||
$("#"+targetCombo).data("dd").set("disabled", disabled)
|
||||
}
|
||||
|
||||
function getSelctedIndexes(targetCombo) {
|
||||
var selectedIndex = $("#"+targetCombo).data("dd").selectedOptions;
|
||||
for(var i=0;i<selectedIndex.length;i++) {
|
||||
output(selectedIndex[i].index, targetCombo);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function scrollMe() {
|
||||
var position = $("#debugwindow").position();
|
||||
var windowPos = $(window).scrollTop();
|
||||
if(windowPos<100) {
|
||||
windowPos = 100;
|
||||
}
|
||||
//console.debug("windowPos "+windowPos);
|
||||
$("#debugwindow").animate({top:(windowPos)}, {queue:false, duration:1000});
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,153 @@
|
||||
<!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>Javascript image dropdown - multiple skin</title>
|
||||
<link rel="stylesheet" href="css/sample.css" />
|
||||
<script src="../js/jquery/jquery-1.9.0.min.js"></script>
|
||||
|
||||
<!-- <msdropdown> -->
|
||||
<link rel="stylesheet" type="text/css" href="../css/msdropdown/dd.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../css/msdropdown/skin2.css" />
|
||||
<script src="../js/msdropdown/jquery.dd.min.js"></script>
|
||||
<!-- </msdropdown> -->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<table width="100%" border="0" cellspacing="1" cellpadding="5" class="topmenu">
|
||||
<tr>
|
||||
<td colspan="2" class="top"><h1>Javascript image dropdown <span id="ver"></span> <a title="Download" href="http://www.marghoobsuleman.com/jquery-image-dropdown" class="small">Download</a></h1></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="25%"><select style="width:250px" name="pages" id="pages">
|
||||
<option value="" selected="selected">Choose a sample page</option>
|
||||
<option value="index.html">Normal</option>
|
||||
<option value="byjson.html">By Json Data</option>
|
||||
<option value="multiple-skin.html">Multiple Skin</option>
|
||||
<option value="css-sprite.html">CSS Sprite</option>
|
||||
<option value="object-oriented-approach.html">Object Oriented Approach</option>
|
||||
<option value="object-oriented-approach-more.html">Object Oriented Approach - More</option>
|
||||
<option value="use-checkbox.html">Use Checkbox</option>
|
||||
<option value="mouse-events.html">Mouse Events</option>
|
||||
<option value="help.html">Documentation</option>
|
||||
</select></td>
|
||||
<td align="left"><a href="help.html">Documentation</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
<form action="submitdata.php" method="post" enctype="multipart/form-data" name="frmdata">
|
||||
<table width="100%" border="0" cellspacing="1" cellpadding="5" class="tblWhite">
|
||||
<tr>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top">Created from HTML SELECT Element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
<select style="width:200px" class="tech" name="tech" id="tech">
|
||||
<option value="calendar" data-image="../images/msdropdown/icons/icon_calendar.gif">Calendar</option>
|
||||
<option value="shopping_cart" data-image="../images/msdropdown/icons/icon_cart.gif">Shopping Cart</option>
|
||||
<option value="cd" data-image="../images/msdropdown/icons/icon_cd.gif" name="cd">CD</option>
|
||||
<option value="email" data-image="../images/msdropdown/icons/icon_email.gif">Email</option>
|
||||
<option value="faq" data-image="../images/msdropdown/icons/icon_faq.gif">FAQ</option>
|
||||
<option value="games" data-image="../images/msdropdown/icons/icon_games.gif">Games</option>
|
||||
<option value="music" data-image="../images/msdropdown/icons/icon_music.gif">Music</option>
|
||||
<option value="phone" data-image="../images/msdropdown/icons/icon_phone.gif">Phone</option>
|
||||
<option value="graph" data-image="../images/msdropdown/icons/icon_sales.gif">Graph</option>
|
||||
<option value="secured" data-image="../images/msdropdown/icons/icon_secure.gif">Secured</option>
|
||||
<option value="video" data-image="../images/msdropdown/icons/icon_video.gif">Video</option>
|
||||
<option value="cd" data-image="../images/msdropdown/icons/icon_cd.gif" name="cd">CD</option>
|
||||
</select>
|
||||
<select name="mycomp" id="mycomp" style="width:258px;">
|
||||
<option name="one" value="msDropDown" title="../images/msdropdown/skin2/icon-ok.gif">msDropDown</option>
|
||||
<option name="two" value="PrototypeCombobox" title="../images/msdropdown/skin2/icon-ok.gif">Prototype Combobox</option>
|
||||
<option value="jQuery Tabs" title="../images/msdropdown/skin2/icon-ok.gif">jQuery Tabs</option>
|
||||
<option value="Common Accordion" title="../images/msdropdown/skin2/icon-ok.gif">Common Accordion</option>
|
||||
</select>
|
||||
<div style="clear:both">
|
||||
<p>Flat corner - (No rounded corner)</p>
|
||||
<select style="width:200px" class="tech" name="flat" id="flat">
|
||||
<option value="calendar" data-image="../images/msdropdown/icons/icon_calendar.gif">Calendar</option>
|
||||
<option value="shopping_cart" data-image="../images/msdropdown/icons/icon_cart.gif">Shopping Cart</option>
|
||||
<option value="cd" data-image="../images/msdropdown/icons/icon_cd.gif" name="cd">CD</option>
|
||||
<option value="email" data-image="../images/msdropdown/icons/icon_email.gif">Email</option>
|
||||
<option value="faq" data-image="../images/msdropdown/icons/icon_faq.gif">FAQ</option>
|
||||
<option value="games" data-image="../images/msdropdown/icons/icon_games.gif">Games</option>
|
||||
<option value="music" data-image="../images/msdropdown/icons/icon_music.gif">Music</option>
|
||||
<option value="phone" data-image="../images/msdropdown/icons/icon_phone.gif">Phone</option>
|
||||
<option value="graph" data-image="../images/msdropdown/icons/icon_sales.gif">Graph</option>
|
||||
<option value="secured" data-image="../images/msdropdown/icons/icon_secure.gif">Secured</option>
|
||||
<option value="video" data-image="../images/msdropdown/icons/icon_video.gif">Video</option>
|
||||
<option value="cd" data-image="../images/msdropdown/icons/icon_cd.gif" name="cd">CD</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="bottom"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="bottom"><input type="submit" value="Submit" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="bottom"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="bottom">Source Code:</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
|
||||
<code>
|
||||
<pre>
|
||||
<script>
|
||||
$(document).ready(function(e) {
|
||||
$("#tech").msDropdown();
|
||||
$("#mycomp").msDropdown({mainCSS:'blue'}); //you dont have to pass here if you have in select element- data-maincss="blue"
|
||||
$("#flat").msDropdown({roundedCorner:false}); //rounded corner is off now
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
<p> </p>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(e) {
|
||||
$("#tech").msDropdown(); //no need to pass main css name - it will use default theme
|
||||
$("#mycomp").msDropdown({mainCSS:'blue'}); //you dont have to pass here if you have in select element- data-maincss="blue"
|
||||
$("#flat").msDropdown({roundedCorner:false});
|
||||
//no use
|
||||
try {
|
||||
var pages = $("#pages").msDropdown({on:{change:function(data, ui) {
|
||||
var val = data.value;
|
||||
if(val!="")
|
||||
window.location = val;
|
||||
}}}).data("dd");
|
||||
|
||||
var pagename = document.location.pathname.toString();
|
||||
pagename = pagename.split("/");
|
||||
pages.setIndexByValue(pagename[pagename.length-1]);
|
||||
$("#ver").html(msBeautify.version.msDropdown);
|
||||
} catch(e) {
|
||||
//console.log(e);
|
||||
}
|
||||
|
||||
$("#ver").html(msBeautify.version.msDropdown);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,289 @@
|
||||
<!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>Javascript image dropdown - Object oriented approach</title>
|
||||
<link rel="stylesheet" href="css/sample.css" />
|
||||
<script src="../js/jquery/jquery-1.9.0.min.js"></script>
|
||||
<script src="../js/jquery/tester.js"></script>
|
||||
<!-- <msdropdown> -->
|
||||
<link rel="stylesheet" type="text/css" href="../css/msdropdown/dd.css" />
|
||||
<script src="../js/msdropdown/jquery.dd.min.js"></script>
|
||||
<!-- </msdropdown> -->
|
||||
</head>
|
||||
<body>
|
||||
<table width="100%" border="0" cellspacing="1" cellpadding="5" class="topmenu">
|
||||
<tr>
|
||||
<td colspan="2" class="top"><h1>Javascript image dropdown <span id="ver"></span> <a title="Download" href="http://www.marghoobsuleman.com/jquery-image-dropdown" class="small">Download</a></h1></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="25%"><select style="width:250px" name="pages" id="pages">
|
||||
<option value="" selected="selected">Choose a sample page</option>
|
||||
<option value="index.html">Normal</option>
|
||||
<option value="byjson.html">By Json Data</option>
|
||||
<option value="multiple-skin.html">Multiple Skin</option>
|
||||
<option value="css-sprite.html">CSS Sprite</option>
|
||||
<option value="object-oriented-approach.html">Object Oriented Approach</option>
|
||||
<option value="object-oriented-approach-more.html">Object Oriented Approach - More</option>
|
||||
<option value="use-checkbox.html">Use Checkbox</option>
|
||||
<option value="mouse-events.html">Mouse Events</option>
|
||||
<option value="help.html">Documentation</option>
|
||||
</select></td>
|
||||
<td align="left"><a href="help.html">Documentation</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
<form action="submitdata.php" method="post" enctype="multipart/form-data" name="frmdata">
|
||||
<table width="100%" border="0" cellspacing="1" cellpadding="5" class="tblWhite">
|
||||
<tr>
|
||||
<td colspan="3"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" valign="top">Object Oriented Approch</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="24%" valign="top">
|
||||
<select style="width:200px" name="browsers" id="browsers">
|
||||
<option value="chrome" data-image="../images/msdropdown/icons/browser-chrome.png">Chrome</option>
|
||||
<option value="safari" data-image="../images/msdropdown/icons/browser-safari.png">Safari</option>
|
||||
<option value="firefox" data-image="../images/msdropdown/icons/browser-firefox.png">Firefox</option>
|
||||
<option value="opera" data-image="../images/msdropdown/icons/browser-opera.png">Opera</option>
|
||||
<option value="ie9" data-image="../images/msdropdown/icons/browser-msie.png">IE 9</option>
|
||||
<option value="ie8" data-image="../images/msdropdown/icons/browser-msie.png">IE 8</option>
|
||||
<option value="ie7" data-image="../images/msdropdown/icons/browser-msie.png">IE 7</option>
|
||||
<option value="ie6" data-image="../images/msdropdown/icons/browser-msie.png">IE 6</option>
|
||||
</select>
|
||||
</td>
|
||||
<td width="21%" valign="top"> </td>
|
||||
<td width="55%" valign="top"><div id="debugger">
|
||||
<ul class="debug" id="testResults">
|
||||
|
||||
</ul>
|
||||
</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" valign="top"><pre>//create
|
||||
<code>var oHandler1 = $("#browsers").msDropdown().data("dd");</code>
|
||||
</pre></td>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><input type="button" name="getIndex" id="getIndex" value="Get selectedIndex" /></td>
|
||||
<td valign="top" class="viewcode">view code</td>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
<tr class="hidden">
|
||||
<td colspan="2" valign="top"><pre>
|
||||
<code>$("#getIndex").on("click", function() {
|
||||
//var index = oHandler1.get("selectedIndex");
|
||||
var index = oHandler1.selectedIndex; //above line is same
|
||||
console.log("index: "+index);
|
||||
});</code></pre></td>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><input name="txt_index" type="text" id="txt_index" value="2" size="10" />
|
||||
<input type="button" name="setIndex" id="setIndex" value="Set selectedIndex" /></td>
|
||||
<td valign="top" class="viewcode">view code</td>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
<tr class="hidden">
|
||||
<td colspan="2" valign="top"><pre>
|
||||
<code>$("#setIndex").on("click", function() {
|
||||
var ind = document.getElementById("txt_index").value;
|
||||
oHandler1.set("selectedIndex", ind);
|
||||
});</code></pre></td>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><input type="button" name="btnDisable" id="btnDisable" value="Toggle Disable" /></td>
|
||||
<td valign="top" class="viewcode">view code</td>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
<tr class="hidden">
|
||||
<td colspan="2" valign="top"><pre>
|
||||
<code>$("#btnDisable").on("click", function() {
|
||||
var isDisabled = oHandler1.get("disabled");
|
||||
oHandler1.set("disabled", !isDisabled);
|
||||
});</code></pre></td>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><input type="button" name="btnOpen" id="btnOpen" value="Hover to open/close" /></td>
|
||||
<td valign="top" class="viewcode">view code</td>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
<tr class="hidden">
|
||||
<td colspan="2" valign="top"><pre>
|
||||
<code>$("#btnOpen").on("mouseenter", function() {
|
||||
oHandler1.open();
|
||||
});</code></pre></td>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><input type="button" name="btnShowHide" id="btnShowHide" value="Toggle Show" /></td>
|
||||
<td valign="top" class="viewcode">view code</td>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
<tr class="hidden">
|
||||
<td colspan="2" valign="top"><pre>
|
||||
<code>$("#btnShowHide").on("click", function() {
|
||||
var isVisible = oHandler1.visible();
|
||||
oHandler1.visible(!isVisible);
|
||||
});</code></pre></td>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><input type="button" name="getUIData" id="getUIData" value="Get uiData" /></td>
|
||||
<td valign="top" class="viewcode">view code</td>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
<tr class="hidden">
|
||||
<td colspan="2" valign="top"><pre>
|
||||
<code>$("#getUIData").on("click", function() {
|
||||
var uiData = oHandler1.uiData;
|
||||
console.log(uiData)'
|
||||
});</code></pre></td>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"> </td>
|
||||
<td valign="top"> </td>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" valign="bottom"><input type="submit" value="Submit" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" valign="bottom"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" valign="top"> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
<p> </p>
|
||||
|
||||
<script>
|
||||
/************** for testing purpose ************************/
|
||||
function Element(nm, attr, html) {
|
||||
var tag = document.createElement(nm);
|
||||
if (attr) {
|
||||
for(var i in attr) {
|
||||
switch(i) {
|
||||
case "style":
|
||||
tag.style.cssText = attr[i];
|
||||
break;
|
||||
default:
|
||||
tag[i] = attr[i];
|
||||
break;
|
||||
};
|
||||
};
|
||||
};
|
||||
if (html) {
|
||||
tag.innerHTML = html;
|
||||
};
|
||||
return tag;
|
||||
};
|
||||
/************** for testing purpose ************************/
|
||||
|
||||
var oHandler1;// this will be assign in onready below
|
||||
$(document).ready(function(e) {
|
||||
oHandler1 = $("#browsers").msDropdown({
|
||||
on:{create:function() {
|
||||
//console.log("Created");
|
||||
test("Test msDropdown", function(){assert(true, "msdropdown is created for 'select#browsers'...");});
|
||||
},
|
||||
change: function(data, ui) {
|
||||
assert(true, "value: "+data.value + ", label: "+data.text)
|
||||
}
|
||||
}
|
||||
}).data("dd");
|
||||
|
||||
|
||||
//assign action on buttons
|
||||
$("#getIndex").on("click", function() {
|
||||
//var index = oHandler1.get("selectedIndex");
|
||||
var index = oHandler1.selectedIndex; //above is same
|
||||
assert(true, "current index is "+index);
|
||||
// console.log("index: "+index);
|
||||
});
|
||||
$("#setIndex").on("click", function() {
|
||||
var ind = document.getElementById("txt_index").value;
|
||||
oHandler1.set("selectedIndex", ind);
|
||||
assert(true, "selectedIndex has been changed to "+ind);
|
||||
});
|
||||
$("#btnDisable").on("click", function() {
|
||||
var isDisabled = oHandler1.get("disabled");
|
||||
oHandler1.set("disabled", !isDisabled);
|
||||
assert(true, "disabled = "+!isDisabled);
|
||||
});
|
||||
$("#btnOpen").on("mouseenter", function() {
|
||||
oHandler1.open();
|
||||
});
|
||||
|
||||
$("#btnShowHide").on("click", function() {
|
||||
var isVisible = oHandler1.visible();
|
||||
oHandler1.visible(!isVisible);
|
||||
});
|
||||
|
||||
$("#getUIData").on("click", function() {
|
||||
var uiData = oHandler1.uiData;
|
||||
var val = "data";
|
||||
test("uiData."+val, function() {
|
||||
for(var j in uiData[val]) {
|
||||
assert(true, j +" : <span class='black'>"+uiData[val][j]+"</span>");
|
||||
}
|
||||
});
|
||||
val = "option";
|
||||
test("uiData."+val, function() {
|
||||
assert(true, "value : <span class='black'>"+uiData[val].value+"</span>");
|
||||
assert(true, "text : <span class='black'>"+uiData[val].text+"</span>");
|
||||
});
|
||||
test("", function() {
|
||||
assert(true, "uiData.index: "+uiData.index);
|
||||
});
|
||||
val = "ui";
|
||||
test("uiData."+val, function() {
|
||||
assert(true, uiData[val][0].outerHTML);
|
||||
});
|
||||
|
||||
//console.log(uiData)
|
||||
});
|
||||
|
||||
|
||||
$(".viewcode").on("click", function(e) {
|
||||
$(this).parent().next().toggle("show");
|
||||
})
|
||||
var html = "<div class='app'>This is last div</div>";
|
||||
//no use
|
||||
try {
|
||||
var pages = $("#pages").msDropdown({on:{change:function(data, ui) {
|
||||
var val = data.value;
|
||||
if(val!="")
|
||||
window.location = val;
|
||||
}}}).data("dd");
|
||||
|
||||
var pagename = document.location.pathname.toString();
|
||||
pagename = pagename.split("/");
|
||||
pages.setIndexByValue(pagename[pagename.length-1]);
|
||||
$("#ver").html(msBeautify.version.msDropdown);
|
||||
} catch(e) {
|
||||
//console.log(e);
|
||||
}
|
||||
|
||||
$("#ver").html(msBeautify.version.msDropdown);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,127 @@
|
||||
<!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>Javascript image dropdown - Object oriented approach</title>
|
||||
<link rel="stylesheet" href="css/sample.css" />
|
||||
<script src="../js/jquery/jquery-1.9.0.min.js"></script>
|
||||
|
||||
<!-- <msdropdown> -->
|
||||
<link rel="stylesheet" type="text/css" href="../css/msdropdown/dd.css" />
|
||||
<script src="../js/msdropdown/jquery.dd.min.js"></script>
|
||||
<!-- </msdropdown> -->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<table width="100%" border="0" cellspacing="1" cellpadding="5" class="topmenu">
|
||||
<tr>
|
||||
<td colspan="2" class="top"><h1>Javascript image dropdown <span id="ver"></span> <a title="Download" href="http://www.marghoobsuleman.com/jquery-image-dropdown" class="small">Download</a></h1></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="25%"><select style="width:250px" name="pages" id="pages">
|
||||
<option value="" selected="selected">Choose a sample page</option>
|
||||
<option value="index.html">Normal</option>
|
||||
<option value="byjson.html">By Json Data</option>
|
||||
<option value="multiple-skin.html">Multiple Skin</option>
|
||||
<option value="css-sprite.html">CSS Sprite</option>
|
||||
<option value="object-oriented-approach.html">Object Oriented Approach</option>
|
||||
<option value="object-oriented-approach-more.html">Object Oriented Approach - More</option>
|
||||
<option value="use-checkbox.html">Use Checkbox</option>
|
||||
<option value="mouse-events.html">Mouse Events</option>
|
||||
<option value="help.html">Documentation</option>
|
||||
</select></td>
|
||||
<td align="left"><a href="help.html">Documentation</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
<form action="submitdata.php" method="post" enctype="multipart/form-data" name="frmdata">
|
||||
<table width="100%" border="0" cellspacing="1" cellpadding="5" class="tblWhite">
|
||||
<tr>
|
||||
<td colspan="3"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" valign="top">Object Oriented Approch</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="24%" valign="top"><select name="tech1" id="tech1" style='width:200px;' size="5">
|
||||
<option value="calendar" selected="selected" title="../images/msdropdown/icons/icon_calendar.gif">Calendar</option>
|
||||
<option value="shopping_cart" title="../images/msdropdown/icons/icon_cart.gif">Shopping Cart</option>
|
||||
<option value="cd" title="../images/msdropdown/icons/icon_cd.gif">CD</option>
|
||||
<option value="email" title="../images/msdropdown/icons/icon_email.gif">Email</option>
|
||||
<option value="faq" title="../images/msdropdown/icons/icon_faq.gif">FAQ</option>
|
||||
<option value="games" title="../images/msdropdown/icons/icon_games.gif">Games</option>
|
||||
<option name="music" value="music" title="../images/msdropdown/icons/icon_music.gif">Music</option>
|
||||
<option value="phone" title="../images/msdropdown/icons/icon_phone.gif">Phone</option>
|
||||
<option value="graph" title="../images/msdropdown/icons/icon_sales.gif">Graph</option>
|
||||
<option value="secured" title="../images/msdropdown/icons/icon_secure.gif">Secured</option>
|
||||
<option value="video" title="../images/msdropdown/icons/icon_video.gif">Video</option>
|
||||
</select></td>
|
||||
<td width="17%" valign="top"><p>
|
||||
<input type="button" value="<- Add from left to right ->" onclick="add()" />
|
||||
</p>
|
||||
<p>
|
||||
<input type="button" value="Remove selected from right ->" onclick="remove()" />
|
||||
</p></td>
|
||||
<td width="59%" valign="top"><select name="tech2" id="tech2" style="width:200px;" size="7">
|
||||
|
||||
</select></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" valign="bottom"><input type="submit" value="Submit" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" valign="bottom"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" valign="top"> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
<p> </p>
|
||||
|
||||
<script>
|
||||
var oHandler1
|
||||
var oHandler2;
|
||||
$(document).ready(function(e) {
|
||||
oHandler1 = $("#tech1").msDropdown().data("dd");
|
||||
oHandler2 = $("#tech2").msDropdown().data("dd");
|
||||
//no use
|
||||
try {
|
||||
var pages = $("#pages").msDropdown({on:{change:function(data, ui) {
|
||||
var val = data.value;
|
||||
if(val!="")
|
||||
window.location = val;
|
||||
}}}).data("dd");
|
||||
|
||||
var pagename = document.location.pathname.toString();
|
||||
pagename = pagename.split("/");
|
||||
pages.setIndexByValue(pagename[pagename.length-1]);
|
||||
$("#ver").html(msBeautify.version.msDropdown);
|
||||
} catch(e) {
|
||||
//console.log(e);
|
||||
}
|
||||
|
||||
$("#ver").html(msBeautify.version.msDropdown);
|
||||
});
|
||||
function add() {
|
||||
oHandler2.add(oHandler1.getData().data);
|
||||
}
|
||||
function remove() {
|
||||
oHandler2.remove(oHandler2.getData().index);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,63 @@
|
||||
<!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>Samples</title>
|
||||
<link rel="stylesheet" href="css/sample.css" />
|
||||
<script src="../js/jquery/jquery-1.9.0.min.js"></script>
|
||||
<!-- <msdropdown> -->
|
||||
<link rel="stylesheet" type="text/css" href="../css/msdropdown/dd.css" />
|
||||
<script src="../js/msdropdown/jquery.dd.min.js"></script>
|
||||
<!-- </msdropdown> -->
|
||||
</head>
|
||||
<body>
|
||||
<table width="100%" border="0" cellspacing="1" cellpadding="5" class="topmenu">
|
||||
<tr>
|
||||
<td colspan="8"><h1>Javascript image dropdown <span id="ver"></span> <a title="Download" href="http://www.marghoobsuleman.com/jquery-image-dropdown" class="small">Download</a></h1></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="index.html">Normal</a></td>
|
||||
<td><a href="byjson.html">By Json Data</a></td>
|
||||
<td><a href="multiple-skin.html">Multiple Skin</a></td>
|
||||
<td><a href="css-sprite.html">CSS Sprite</a></td>
|
||||
<td><a href="object-oriented-approach.html">Object Oriented Approach</a></td>
|
||||
<td><a href="use-checkbox.html">Use Checkbox</a></td>
|
||||
<td><a href="mouse-events.html">Mouse Events</a></td>
|
||||
<td><a href="help.html">Documentation</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
<form action="submitdata.php" method="post" enctype="multipart/form-data" name="frmdata">
|
||||
<table width="100%" border="0" cellspacing="1" cellpadding="5" class="tblWhite">
|
||||
<tr>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
<?php
|
||||
echo "<pre>";
|
||||
print_r($_POST);
|
||||
echo "</pre>";
|
||||
?>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
<p> </p>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(e) {
|
||||
$("#payments").msDropdown({visibleRows:4});
|
||||
$("#tech").msDropdown();//{animStyle:'none'} /{animStyle:'slideDown'} {animStyle:'show'}
|
||||
//no use
|
||||
$("#ver").html(msBeautify.version.msDropdown);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,125 @@
|
||||
<!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>Javascript image dropdown - basic</title>
|
||||
<link rel="stylesheet" href="css/sample.css" />
|
||||
<script src="../js/jquery/jquery-1.9.0.min.js"></script>
|
||||
<!-- <msdropdown> -->
|
||||
<link rel="stylesheet" type="text/css" href="../css/msdropdown/dd.css" />
|
||||
<script src="../js/msdropdown/jquery.dd.min.js"></script>
|
||||
<!-- </msdropdown> -->
|
||||
</head>
|
||||
<body>
|
||||
<table width="100%" border="0" cellspacing="1" cellpadding="5" class="topmenu">
|
||||
<tr>
|
||||
<td colspan="2" class="top"><h1>Javascript image dropdown <span id="ver"></span> <a title="Download" href="http://www.marghoobsuleman.com/jquery-image-dropdown" class="small">Download</a></h1></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="25%"><select style="width:250px" name="pages" id="pages">
|
||||
<option value="" selected="selected">Choose a sample page</option>
|
||||
<option value="index.html">Normal</option>
|
||||
<option value="byjson.html">By Json Data</option>
|
||||
<option value="multiple-skin.html">Multiple Skin</option>
|
||||
<option value="css-sprite.html">CSS Sprite</option>
|
||||
<option value="object-oriented-approach.html">Object Oriented Approach</option>
|
||||
<option value="object-oriented-approach-more.html">Object Oriented Approach - More</option>
|
||||
<option value="use-checkbox.html">Use Checkbox</option>
|
||||
<option value="mouse-events.html">Mouse Events</option>
|
||||
<option value="help.html">Documentation</option>
|
||||
</select></td>
|
||||
<td align="left"><a href="help.html">Documentation</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
<form action="submitdata.php" method="post" enctype="multipart/form-data" name="frmdata">
|
||||
<table width="100%" border="0" cellspacing="1" cellpadding="5" class="tblWhite">
|
||||
<tr>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><select style="width:150px" class="tech" name="tech" id="tech" data-enablecheckbox="true">
|
||||
<option value="calendar">Calendar</option>
|
||||
<option value="shopping_cart">Shopping Cart</option>
|
||||
<option value="cd" name="cd">CD</option>
|
||||
<option value="email">Email</option>
|
||||
<option value="faq">FAQ</option>
|
||||
<option value="games">Games</option>
|
||||
<option value="music">Music</option>
|
||||
<option value="phone">Phone</option>
|
||||
<option value="graph">Graph</option>
|
||||
<option value="secured">Secured</option>
|
||||
<option value="video">Video</option>
|
||||
</select></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><ul>
|
||||
<li>child widtth can be alter. </li>
|
||||
<li>New multiple is introduced. Its multiple but with the checkbox.</li>
|
||||
<li><strong>Bonus:</strong> elementname<strong>_mscheck</strong> will be posted along with the form post/get. i.e. if element name is "tech" checkbox <strong>tech_mscheck[]</strong> is created. However you can set the suffix using 'checkboxNameSuffix' parameter. Submit to check the result. </li>
|
||||
</ul></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="bottom"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="bottom"><input type="submit" value="Submit" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="bottom"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="bottom"><strong>Source Code:</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top">
|
||||
|
||||
<code>
|
||||
<pre>
|
||||
<script>
|
||||
$(document).ready(function(e) {
|
||||
$("#tech").msDropdown({childWidth:"250px",enableCheckbox:true});
|
||||
//element's data-enablecheckbox="true" can also work for checkbox enabled dropdown. and data-childwidth can be used for seting child width
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
<p> </p>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(e) {
|
||||
$("#tech").msDropdown({childWidth:"250px", enableCheckbox:true});
|
||||
//no use
|
||||
try {
|
||||
var pages = $("#pages").msDropdown({on:{change:function(data, ui) {
|
||||
var val = data.value;
|
||||
if(val!="")
|
||||
window.location = val;
|
||||
}}}).data("dd");
|
||||
|
||||
var pagename = document.location.pathname.toString();
|
||||
pagename = pagename.split("/");
|
||||
pages.setIndexByValue(pagename[pagename.length-1]);
|
||||
$("#ver").html(msBeautify.version.msDropdown);
|
||||
} catch(e) {
|
||||
//console.log(e);
|
||||
}
|
||||
|
||||
$("#ver").html(msBeautify.version.msDropdown);
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
+11
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user