Joomla!1.5里使用Jquery UI

zlxadhkust 2012-02-21 10:22:36

我在我的Joomla!网站里有一个自己?的component，它其中一个view，这个view有若干个layout，其中一个layout有一个很宽的表格，所以我用了JQuery UI里的slider，就是http://jqueryui.com/demos/slider/#side-scroll

我把这个demo的源代码复制在本地建立一个scrollbar.HTML，再下载一个定制后的jQuery UI的压缩包，解压后，把文件都放进去：

测试运行，一切正常：

接下来我先安装了JQuery++ Integrator。

之后把新的jQuery 和JQuery UI的相关文件都拷贝到这个插件的目录下，然后在它的设定界面里设定JQuery和JQuery UI以及它的CSS都使用嵌入拷贝。

然后在这个component的layout的模板文件里这样写（这个代码基本上就是复制于在我本地刚刚创建的scrollbar.HTM，只是将其中的$都换成了jQuery，这是按照插件的官网的说明来做的，因为mootool用的也是$，joomla自带的Ajax框架是mootool）：



<?php // no direct access

defined('_JEXEC') or die('Restricted access');

if(isset($this->message))

{

	$this->display('message');

}?>

<style>



	.scroll-pane { overflow: auto; width: 99%; float:left; }

	.scroll-content { float: left; }



	.scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; }

	.scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto;  }

	.scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; }

	.scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; }

	.scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; }





</style>



<script type="text/javascript">

	jQuery(function() {

		//scrollpane parts

		var scrollPane = jQuery( ".scroll-pane" ),

			scrollContent = jQuery( ".scroll-content" );



		//build slider

		var scrollbar = jQuery( ".scroll-bar" ).slider({

			slide: function( event, ui ) {

				if ( scrollContent.width() > scrollPane.width() ) {

					scrollContent.css( "margin-left", Math.round(

						ui.value / 100 * ( scrollPane.width() - scrollContent.width() )

					) + "px" );

				} else {

					scrollContent.css( "margin-left", 0 );

				}

			}

		});



		//append icon to handle

		var handleHelper = scrollbar.find( ".ui-slider-handle" )

		.mousedown(function() {

			scrollbar.width( handleHelper.width() );

		})

		.mouseup(function() {

			scrollbar.width( "100%" );

		})

		.append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" )

		.wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();



		//change overflow to hidden now that slider handles the scrolling

		scrollPane.css( "overflow", "hidden" );



		//size scrollbar and handle proportionally to scroll distance

		function sizeScrollbar() {

			var remainder = scrollContent.width() - scrollPane.width();

			var proportion = remainder / scrollContent.width();

			var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );

			scrollbar.find( ".ui-slider-handle" ).css({

				width: handleSize,

				"margin-left": -handleSize / 2

			});

			handleHelper.width( "" ).width( scrollbar.width() - handleSize );

		}



		//reset slider value based on scroll content position

		function resetValue() {

			var remainder = scrollPane.width() - scrollContent.width();

			var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 :

				parseInt( scrollContent.css( "margin-left" ) );

			var percentage = Math.round( leftVal / remainder * 100 );

			scrollbar.slider( "value", percentage );

		}



		//if the slider is 100% and window gets larger, reveal content

		function reflowContent() {

				var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 );

				var gap = scrollPane.width() - showing;

				if ( gap > 0 ) {

					scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap );

				}

		}



		//change handle position on window resize

		jQuery( window ).resize(function() {

			resetValue();

			sizeScrollbar();

			reflowContent();

		});

		//init scrollbar size

		setTimeout( sizeScrollbar, 10 );//safari wants a timeout

	});

</script>



<div class="scroll-pane ui-widget ui-widget-header ui-corner-all">

	<div class="scroll-content">

	//这里放的就是我那个非常宽的表格，太长，这里省略



	</div>

	<div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">

		<div class="scroll-bar"></div>

	</div>

</div>

出来的结果却不是期望的那样，虽然界面的样式是正确的，可是当用鼠标拖拽滑块的时候，发现这个滑动条会消失，下面的内容随之向上移动。

于是我在浏览器里查看了下它实际生成的HTML代码：



<div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">

	<div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: relative; overflow-x: hidden; overflow-y: hidden; height: 28px; ">



		<div class="scroll-bar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; width: 368px; margin-top: 0px; ">



			<div class="ui-handle-helper-parent" style="width: 368.3070967741935px; ">



				<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="width: 543.6929032258065px; margin-left: -271.84645161290325px; left: 24%; ">

					<span class="ui-icon ui-icon-grip-dotted-vertical"></span>

				</a>

			</div>

		</div>

	</div>

</div>

这其中的第二个div，也就是没有id没有class属性的那个：
<div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: relative; overflow-x: hidden; overflow-y: hidden; height: 28px; ">

它是在鼠标左键按下之后才被Javascript动态加上去的，而在鼠标按下的时候，它的高度值是随着鼠标移动而变小或变大的。直到变成0px之后，就再也无法出现了。

问题就是，我再回去看看我复制到本地的scrollbar.HTML用同样的代码生成的HTML却没有这个问题，它不会生成这个多余的div插进去。

这个可真是太奇怪了，一般来说找到的一个第三方的东西不工作是因为它的某些功能没运行到，而现在我遇到的问题是，它除了该运行的都运行了之外，又多做了一些。请问有没有哪位朋友处理过类似问题，给指点下，我是真的一筹莫展了。

谢谢。

...全文