1
我無法得到一個稱爲ui multiselect的jquery插件在模態中正確顯示（使用jqmodal）。我實際上已經嘗試了另一種叫做simplemodal的模式，以及一個不同的multiselect插件，但沒有運氣。從我可以收集的信息看來，uimultiselect的CSS沒有被應用，因爲multiselect駐留在模式div中，在頁面加載時顯示爲：none。我嘗試了其他人提出的一些不同的事情，而這些事情都沒有成功。也許我做錯了。JQuery插件將無法在模態內工作
在我的代碼中，我顯示了模態內部和外部的多重選擇。它在外面很好地工作。
這裏是我的html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery UI Multiselect</title>
<link rel="stylesheet" href="css/multiselect/common.css" type="text/css" />
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/ui.all.css" />
<link type="text/css" href="css/multiselect/ui.multiselect.css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="css/jqModalForm.css" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
<link type="text/css" rel="stylesheet" href="css/jqModal.css" />
<script type="text/javascript" src="js/multiselect/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/multiselect/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="js/multiselect/plugins/localisation/jquery.localisation-min.js"></script>
<script type="text/javascript" src="js/multiselect/plugins/scrollTo/jquery.scrollTo-min.js"></script>
<script type="text/javascript" language="javascript" src="js/jqModal.js"></script>
<script type="text/javascript" language="javascript" src="js/jqDnR.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$().ready(function() {
$('#addShortCodes').jqm({
trigger: '#addShortCodesTrigger',
overlay: 30, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
overlayClass: 'whiteOverlay'
})
.jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */
// Close Button Highlighting. IE doesn't support :hover. Surprise?
$('input.jqmdX')
.hover(function(){ $(this).addClass('jqmdXFocus'); },function(){ $(this).removeClass('jqmdXFocus'); })
.focus(function(){ this.hideFocus=true; $(this).addClass('jqmdXFocus'); })
.blur(function(){ $(this).removeClass('jqmdXFocus'); });
});
</script>
</head>
<body>
<a href="http://github.com/michael/multiselect"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub" /></a>
<div id="wrapper">
<div id="content">
<form action="index.html">
<select id="countries" class="multiselect" multiple="multiple" name="countries[]">
<option value="AFG">Afghanistan</option>
<option value="ALB">Albania</option>
<option value="FRA">France</option>
</select>
<br/>
<input type="submit" value="Submit Form"/>
</form>
<a href="#" id="addShortCodesTrigger">Add</a>
<script type="text/javascript" src="js/multiselect/ui.multiselect.js"></script>
<script type="text/javascript">
$(function(){
$.localise('ui-multiselect', {/*language: 'en',*/ path: 'js/locale/'});
$(".multiselect").multiselect();
$('#switcher').themeswitcher();
});
</script>
<div id="addShortCodes" class="jqmDialog">
<div class="jqmdTL">
<div class="jqmdTR">
<div class="jqmdTC jqDrag">Add Short Codes</div>
</div>
</div>
<div class="jqmdBL">
<div class="jqmdBR">
<div class="jqmdBC">
<form id="addMonitor" action="addMonitor.do" method="post">
<div class="leftBox1">
Short Codes:
<textarea name="shortCodes" cols="20" rows="8"></textarea>
</div>
<div class="rightBox1">
<select id="countries" class="multiselect" multiple="multiple" name="countries[]">
<option value="AFG">Afghanistan</option>
<option value="ALB">Albania</option>
<option value="FRA">France</option>
</select>
</div>
<input type="hidden" name="requestId" value="${monitorRequest.requestId}" />
<div class="centerBox1">
<input type="submit" value="Add" />
</div>
</form>
</div>
</div>
</div>
<input type="image" src="dialog/close.gif" class="jqmdX jqmClose" />
</div>
<script type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/">
</script>
<div id="switcher"></div>
<h2>Features</h2>
<ul>
<li>Search within available options, if there are a lots of them</li>
<li>Displaying counts of selected and available items</li>
<li>Select All/Deselect All Buttons</li>
<li>Dragging items from the available list to the selected list directly</li>
</ul>
<h2>Contributors</h2>
<ul>
<li><a href="http://github.com/michael/multiselect/">Michael Aufreiter</a></li>
<li><a href="http://github.com/yanickrochon/multiselect">Yanick Rochon</a></li>
</ul>
</p>
<h2>Misc</h2>
<p>
There are no limitations. Do whatever you want with this plugin.
If you did some nice modifications, just let me know (via Github). I'd be happy to include them.
</p>
<h2>Elsewhere</h2>
<ul>
<li><a href="http://quasipartikel.at/donut">DONUT? - Radial Navigator</a> <small style="color: red;">NEW!</small></li>
</ul>
</div>
<div id="footer">
<p class="left">A <a href="http://quasipartikel.at/">Quasipartikel</a> Production</p>
<p class="right">Template adopted from <a href="http://orderedlist.com/demos/fancy-zoom-jquery/">orderedlist.com</a></p>
<br class="clear"/>
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10368067-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
Firebug說什麼？ –