Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 132 lines (116 sloc) 5.74 kb
33289381 »
2012-03-30 added test file for jQuery UI test
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>Image Dropdown</title>
6 <link rel="stylesheet" type="text/css" href="msdropdown/dd.css" />
7 <script type="text/javascript" src="msdropdown/js/jquery-1.6.1.min.js"></script>
8 <script type="text/javascript" src="msdropdown/js/uncompressed.jquery.dd.js"></script>
9 <style type="text/css">
10 .toplinks{ font-family:Arial, Helvetica, sans-serif;
11 font-size:12px;
12 background-color: #777777;
13 color:#fff;
14 border-bottom:2px solid #c3c3c3;
15 margin-bottom:10px;
16 padding-bottom:10px;
17 }
18 .toplinks a, .toplinks a :visited{color:#FFF;}
19 .small{font-size:10px; line-height:12px; color:#006; font-weight:normal; font-family:Arial, Helvetica, sans-serif; position:relative; top:-10px}
20
21 </style>
22 <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
23 <script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
24 </head>
25 <body>
26
27
28 <table width="100%" border="0" cellspacing="0" cellpadding="5" class="toplinks">
29 <tr>
30 <td width="11%"><strong><a href="normal.html">Simple</a></strong></td>
31 <td width="16%"><a href="cssSprite.html"><strong>CSS Sprite</strong></a></td>
8d7a46a1 »
2012-06-12 JSLint Error Reduction, Minor Example Code Edits
32 <td width="18%"><a href="multipleSkin.html"><strong>Multiple Skin</strong></a></td>
33289381 »
2012-03-30 added test file for jQuery UI test
33 <td width="17%"><a href="objectOriented.html"><strong>Object Oriented Approch</strong></a></td>
34 <td width="18%"><a href="ajax-main.html"><strong>Ajax Call</strong></a></td>
35 <td width="20%"><a href="mouse-events.html"><strong>Mouse Events</strong></a></td>
36 </tr>
37 </table>
38 <form name="myform" id="myform" action="getvalue.php" enctype="multipart/form-data" method="post">
39 <h1>Javascript image dropdown <span id="ver"></span> <a class="small" href="http://www.marghoobsuleman.com/jquery-image-dropdown" title="Download">Download</a> </h1>
40
41 <p>
42 <select style="width:200px" class="mydds" name="myimge">
43 <option value="calendar" selected="selected" title="icons/icon_calendar.gif">Calendar</option>
44 <option value="shopping_cart" title="icons/icon_cart.gif">Shopping Cart</option>
45 <option value="cd" title="icons/icon_cd.gif">CD</option>
46 <option value="email" title="icons/icon_email.gif">Email</option>
47 <option value="faq" title="icons/icon_faq.gif">FAQ</option>
48 <option value="games" title="icons/icon_games.gif">Games</option>
49 <option value="music" title="icons/icon_music.gif">Music</option>
50 <option value="phone" title="icons/icon_phone.gif">Phone</option>
51 <option value="graph" title="icons/icon_sales.gif">Graph</option>
52 <option value="secured" title="icons/icon_secure.gif">Secured</option>
53 <option value="video" title="icons/icon_video.gif">Video</option>
54 </select>
55 <br />
56 <br />
57 </p>
58 <p id="dpholder" >
59 <h3>With title: used json style in title attribute. ie: title="{image:'icons/icon_cart.gif', title:'Shopping Cart'}" </h3>
60 <select style="width:200px" class="mydds" name="myimge">
61 <option value="calendar" selected="selected" title="{image:'icons/icon_calendar.gif', title:'Calendar'}">Calendar</option>
62 <option value="shopping_cart" title="{image:'icons/icon_cart.gif', title:'Shopping Cart'}">Shopping Cart</option>
63 <option value="cd" title="{image:'icons/icon_cd.gif', title:'CD'}">CD</option>
64 <option value="email" title="{image:'icons/icon_email.gif', title:'Email'}">Email</option>
65 <option value="faq" title="{image:'icons/icon_faq.gif', title:'FAQ'}">FAQ</option>
66 <option value="games" title="{image:'icons/icon_games.gif', title:'Games'}">Games</option>
67 <option value="music" title="{image:'icons/icon_music.gif', title:'Music'}">Music</option>
68 <option value="phone" title="{image:'icons/icon_phone.gif', title:'Phone'}">Phone</option>
69 <option value="graph" title="{image:'icons/icon_sales.gif', title:'Graph'}">Graph</option>
70 <option value="secured" title="{image:'icons/icon_secure.gif', title:'Secured'}">Secured</option>
71 <option value="video" title="{image:'icons/icon_video.gif', title:'Video'}">Video</option>
72 </select>
73 <br />
74 <br />
75 </p>
76 <p style="clear:both">
77 <input type="submit" value="Submit Value" />
78 </p>
79
80
81 <div style="border:1px solid #c3c3c3; padding:50px; width:200px; background:#fff" id="draggable">
82 Used jQuery UI - Drag me
83 </div>
84
85
86
87 </form>
88 <script language="javascript" type="text/javascript">
89
90 function showvalue(arg) {
91 alert(arg);
92 //arg.visible(false);
93 }
94
95
96 $(document).ready(function() {
97
98 try {
99 oHandler = $(".mydds").msDropDown().data("dd");
100 //oHandler.visible(true);
101 //alert($.msDropDown.version);
102 //$.msDropDown.create("body select");
103 $("#ver").html($.msDropDown.version);
104 } catch(e) {
105 alert("Error: "+e.message);
106 }
107 $( "#draggable" ).draggable();
108 })
109 /*
110 $(document).bind("keydown", function() {
111 console.log("document keydown");
112 })
113 */
114
115 </script>
116 <div class="node-links" style="padding:10px; border:1px solid #c3c3c3;background:#222222; margin-top:40px">
117 <div class="adsense">
118 <script type="text/javascript"><!--
119 google_ad_client = "pub-7681689922712917";
120 /* 468x15 */
121 google_ad_slot = "4604426671";
122 google_ad_width = 468;
123 google_ad_height = 15;
124 //-->
125 </script>
126 <!--script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script-->
127 </div>
128 </div>
129
130 </body>
131 </html>
Something went wrong with that request. Please try again.