我的下一个挑战涉及jqtransform，可以在这里找到 http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/
我有一个下拉列表，其项目使用位于页面buildSelect1()的函数<head>进行填充（特别感谢Brian Glaz在{{3}编写了这样一个精彩的脚本}}）
使用流行的jQuery的jqTransform插件为<select>框设置样式。然而，它似乎有一个错误。使用jqTransform时，似乎由它设置的元素（或者可能只是下拉列表）不能为空。
为了证明这一点，我有以下沙箱页面：（如果测试你需要下载jqTransform，并将文件“jqtransform.css”放在名为“css”的文件夹中，文件“jquery”。 jqtransform.js“在一个名为”jquery“的文件夹中，jquery库是从write labels for <option> tags based on selectedIndex using JavaScript链接的
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>Title Drop</title>
<link rel="stylesheet" href="css/jqtransform.css" type="text/css" media="all" />
<script type='text/javascript'>
//<![CDATA[
//hosts labels or "titles" of templates
function buildSelect1() {
var labels = ["Please select a template...",
"Head Option 1",
"Head Option 2",
"Head Option 3",
"Head Option 4",
"Head Option 5",
"Head Option 6",
"Head Option 7",
"Head Option 8",
"Head Option 9"
];
for(var i=0; i<labels.length; i++) {
var selectBox = document.getElementById('foo');
var newOption = document.createElement('option');
newOption.label = labels[i];
newOption.innerHTML = labels[i];
newOption.value = labels[i];
if(i==0) { newOption.setAttribute('selected','selected'); }
selectBox.appendChild(newOption);
}
}
showSelectedTemplate = function(elem) {
var selectedTemplate = elem.options[elem.options.selectedIndex].value;
alert(selectedTemplate);
}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
window.onload=function()
{
buildSelect1();
}
//]]>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery.jqtransform.js">
</script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$('form.test').jqTransform({imgPath:'jqtransformplugin/img/'});
});
//]]>
</script>
</head>
<body>
<form class="test">
<p>
<select id="foo" class="c10"> <!--toggle class="test" to show the problem -->
<option>Please select a template...</option>
<option>body option 1</option>
</select>
</p>
If you disable jqtransform (simplest way is to remove class="test" from < form >) you'll see the dropdown list populates using both the option tags as well as the buildSelect1() function in the head of the page. But if jqtransform is enabled, the dropdown list will not populate using the buildSelect1() function, the only items that will appear will be the option tags
</form>
<form class="test">
<p>
<select id="foo" class="c10">
</select>
</p>
</form>
If you leave a jQtransform enabled < select > box empty (i.e. no < option > tags assigned) when you click on it you'll see the following error:
<br /><br /><br />
<i>
<pre>
Webpage error details
Timestamp: Sun, 4 Sep 2011 16:24:36 UTC
Message: 'offset().top' is null or not an object
Line: 298
Char: 7
Code: 0
URI: file:///H:/New%20OLH%20Project/Note%20Generator/jquery/jquery.jqtransform.js
</pre>
</i>
<br /><br />Hopefully if the bug can be fixed, the final result should look like this:
<p>
<form class="test">
<p>
<select id="foo" class="c10">
<option>Please select a template...</option>
<option>head option 1</option>
<option>head option 2</option>
<option>head option 3</option>
<option>head option 4</option>
<option>head option 5</option>
<option>head option 6</option>
<option>head option 7</option>
<option>head option 8</option>
<option>head option 9</option>
</select>
</p>
</form>
</p>
</body>
</html>
我在各个论坛上搜索过，因为jqtransform似乎有一些“错误”，大多数都是通过添加新功能或替换现有功能解决的，但到目前为止我还没有找到解决方案这个问题。
任何线索？
非常感谢！
答案 0 :(得分：1)
我今天遇到过类似的问题。我使用以下代码（第250行）解决了这个问题：
if ($select.hasClass('jqTransformHidden')) { return; }
if ($select.attr('multiple')) { return; }
var oLabel = jqTransformGetLabel($select);
/* First thing we do is Wrap it */
var $wrapper;
if (!$select.hasClass('jqNeedsUpdate')) {
$wrapper = $select
.addClass('jqTransformHidden')
.wrap('<div class="jqTransformSelectWrapper"></div>')
.parent()
.css({ zIndex: 10 - index });
}
else {
$wrapper = $select.parent();
$select.addClass('jqTransformHidden');
$wrapper.find('div,ul').remove();
}
/* Now add the html for the select */
$wrapper.prepend('<div><span></span><a href="#" class="jqTransformSelectOpen"></a></div><ul></ul>');
var $ul = $('ul', $wrapper).css('width', $select.width()).hide();
/* Now we add the options */
然后在更新之后使用以下代码选择我更新下拉列表：
$(destination).removeClass('jqTransformHidden');
$(destination).addClass('jqNeedsUpdate');
$(destination).jqTransSelect();
希望这仍然适合你。干杯