问题描述
我的下一个挑战涉及jqtransform，可以在这里找到
This next challenge of mine involves jqtransform which can be found herehttp://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/
我有一个下拉列表，其项目是使用位于页面的< head> 中的函数 buildSelect1（）进行填充（特别感谢Brian Glaz在）
I have a dropdownlist, and its items are populated using the function buildSelect1() which is located in the <head> of the page (special thanks to Brian Glaz for writing such a wonderful script at write labels for <option> tags based on selectedIndex using JavaScript)
< select> box正在使用jQuery的流行jqTransform插件进行风格化。但似乎有一个bug。当使用jqTransform时，它似乎被其风格化的元素（或者可能只是下拉列表）不能为空。
The <select> box is being styled using the popular jqTransform plugin for jQuery. There seems to be a bug in it however. When using jqTransform, it seems that elements being styled by it (or perhaps just dropdownlists) can not be empty.
为了演示这个，我有以下的沙箱页面：（如果测试需要下载jqTransform，并将文件jqtransform.css放在名为css的文件夹和名为jquery的文件夹中的文件jquery.jqtransform.js，jquery库从）
To demonstrate this, I have the below sandbox page: (if testing you'll need to download jqTransform, and put the file "jqtransform.css" in a folder called "css" and the file "jquery.jqtransform.js" in a folder called "jquery", the jquery library is linked from https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js)
<!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>
我已经搜索了所有的论坛，因为似乎有一些bugs与jqtransform并且大多数已经通过添加新功能或替换现有功能来解决，但到目前为止，我还没有找到解决这个问题的方法。
I've searched all over the forums, as there seems to be a few "bugs" with jqtransform, and most have been solved by either adding new functions or replacing existing functions, but so far I have not found a solution to this problem.
任何线索？
非常感谢！
推荐答案
今天我有类似的问题。我用以下代码解决了（第250行）：
I had similar issue today. I resolved it with following code (line 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 */
然后更新后选择我更新下拉列表具有以下代码：
and then after updating select I update dropdown with following code:
$(destination).removeClass('jqTransformHidden');
$(destination).addClass('jqNeedsUpdate');
$(destination).jqTransSelect();
希望这仍然是你的实际。干杯
Hope this is still actually for you. Cheers
这篇关于使用jqtransform错误'offset（）。top'是null或不是一个对象。 <选择>填充了JavaScript，而不是< option>标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！