atuy/buku
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
buku/assets/plugins/dropdown/examples/help.html
T
atuy c32764f514 deploy awal
2026-06-27 13:11:58 +07:00

405 lines
37 KiB
HTML
Raw Permalink Blame History

<!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">&nbsp;</td>
</tr>
<tr>
<td width="18%" class="title1"><strong>Properties</strong></td>
<td width="8%">&nbsp;</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">&lt;option&gt;</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">&lt;option&gt;</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">&lt;option&gt;</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>&nbsp;</td>
<td colspan="2">Reaad only properties can't be set by <code class="blue1">set()</code> method.</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td class="title1"><strong>Public Methods</strong></td>
<td colspan="2">&nbsp;</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; '>&quot;</span>#element<span style='color:#800000; '>&quot;</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; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</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; '>&quot;</span>#element<span style='color:#800000; '>&quot;</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; '>&quot;</span>dd<span style='color:#800000; '>&quot;</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>&nbsp;</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; '>&quot;</span>#element<span style='color:#800000; '>&quot;</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; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</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; '>&quot;</span><span style='color:#0000e6; '>Calendar</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>,</span> <span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>calendar</span><span style='color:#800000; '>&quot;</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; '>&quot;</span><span style='color:#0000e6; '>Calendar</span><span style='color:#800000; '>&quot;</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; '>&quot;</span><span style='color:#0000e6; '>Calendar</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>calendar</span><span style='color:#800000; '>&quot;</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; '>&quot;</span><span style='color:#0000e6; '>Calendar</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>,</span> value<span style='color:#800080; '>:</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>calendar</span><span style='color:#800000; '>&quot;</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>&nbsp;</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; '>&quot;</span>#element<span style='color:#800000; '>&quot;</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; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</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; '>&quot;</span>#element<span style='color:#800000; '>&quot;</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; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</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; '>&quot;</span><span style='color:#0000e6; '>shopping</span><span style='color:#800000; '>&quot;</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; '>&quot;</span>#element<span style='color:#800000; '>&quot;</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; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</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; '>&quot;</span><span style='color:#0000e6; '>shopping</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span>
</pre></td>
</tr>
<tr>
<td>set</td>
<td>&nbsp;</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; '>&quot;</span>#element<span style='color:#800000; '>&quot;</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; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>set<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>selectedIndex</span><span style='color:#800000; '>&quot;</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>&nbsp;</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; '>&quot;</span>#element<span style='color:#800000; '>&quot;</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; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</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; '>&quot;</span><span style='color:#0000e6; '>selectedIndex</span><span style='color:#800000; '>&quot;</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; '>&quot;</span>#element<span style='color:#800000; '>&quot;</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; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</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>&nbsp;</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; '>&quot;</span>#element<span style='color:#800000; '>&quot;</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; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</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>&nbsp;</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; '>&quot;</span>#element<span style='color:#800000; '>&quot;</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; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</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">&nbsp;</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; '>&quot;</span>#element<span style='color:#800000; '>&quot;</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; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</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>&nbsp;</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; '>&quot;</span>#element<span style='color:#800000; '>&quot;</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; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>on<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>change</span><span style='color:#800000; '>&quot;</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>&nbsp;</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; '>&quot;</span>#element<span style='color:#800000; '>&quot;</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; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>off<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>change</span><span style='color:#800000; '>&quot;</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>&nbsp;</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; '>&quot;</span>#element<span style='color:#800000; '>&quot;</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; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</span>)</span><span style='color:#800080; '>;</span>
oDropdown<span style='color:#808030; '>.</span>act<span style='color:#808030; '>(</span><span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>add</span><span style='color:#800000; '>&quot;</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; '>&quot;</span><span style='color:#0000e6; '>Lucky</span><span style='color:#800000; '>&quot;</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; '>&quot;</span><span style='color:#0000e6; '>remove</span><span style='color:#800000; '>&quot;</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; '>&quot;</span><span style='color:#0000e6; '>namedItem</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>,</span> <span style='color:#800000; '>&quot;</span><span style='color:#0000e6; '>calendar</span><span style='color:#800000; '>&quot;</span><span style='color:#808030; '>)</span><span style='color:#800080; '>;</span></pre></td>
</tr>
<tr>
<td>setIndexByValue</td>
<td>&nbsp;</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; '>&quot;</span>#element<span style='color:#800000; '>&quot;</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; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</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>&nbsp;</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; '>&quot;</span>#element<span style='color:#800000; '>&quot;</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; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</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>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>refresh</td>
<td>&nbsp;</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; '>&quot;</span>#element<span style='color:#800000; '>&quot;</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; '>&quot;</span>dd<span style='color:#808030; '><span style='color:#800000; '>&quot;</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(&quot;element&quot;).refresh();</pre></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</form>
<p>&nbsp;</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>
Reference in New Issue View Git Blame Copy Permalink