`

velocity中使用jquery出现的问题

阅读更多
velocity中使用jquery:
代码:
<!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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>多行滚动jQuery循环新闻列表代码</title>
		<style type="text/css">ul,li{margin:0;padding:0}#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}#scrollDiv li{height:25px;padding-left:10px;}
		</style>
		<script
			src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
			type="text/javascript">
		</script>
		<script type="text/javascript">
(function($){
$.fn.extend({
Scroll:function(opt, callback){
if (!opt){
var opt = {};
}			
var _this = this.eq(0).find("ul:first");
var lineH = _this.find("li:first").height(),
line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height()/lineH, 10),
speed = opt.speed ? parseInt(opt.speed, 10) : 400,
timer = opt.timer ? parseInt(opt.timer, 10) : 5000; 
if (line == 0){line = 1;}
var upHeight = 0 - line * lineH;
scrollUp = function() {
_this.animate( {
marginTop : upHeight
}, speed, function() {
for (i = 1; i <= line; i++) {
_this.find("li:first").appendTo(_this);
}
_this.css( {
marginTop : 0
});
});
}
_this.hover(function() {
clearInterval(timerID);
}, function() {
timerID = setInterval("scrollUp()", timer);
}).mouseout();
}
})
})(jQuery);


$(document).ready(function() {
$("#scrollDiv").Scroll( {
line : 4,
speed : 400,
timer : 5000
});
});
	</script>
	</head>
	<body>
		<p>
			多行滚动演示:
		</p>
		<div id="scrollDiv">
			<ul>
				<li>
					这是公告标题的第一行
				</li>
				<li>
					这是公告标题的第二行
				</li>
				<li>
					这是公告标题的第三行
				</li>
				<li>
					这是公告标题的第四行
				</li>
				<li>
					这是公告标题的第五行
				</li>
				<li>
					这是公告标题的第六行
				</li>
				<li>
					这是公告标题的第七行
				</li>
				<li>
					这是公告标题的第八行
				</li>
			</ul>
		</div>
	</body>
</html>


问题:
==================文件内容分析错误==================

/defaultSite/dezhou/roadCondition.html:解析错误 : Encountered "\r\nScroll:function(opt, callback){\r\nif (!opt){\r\nvar opt = {};\r\n}\t\t\t\r\nvar _this = this.eq(0).find(\"ul:first\");\r\nvar lineH = _this.find(\"li:first\").height(),\r\nline = opt.line ? parseInt(opt.line, 10) : parseInt(this.height()/lineH, 10),\r\nspeed = opt.speed ? parseInt(opt.speed, 10) : 400,\r\ntimer = opt.timer ? parseInt(opt.timer, 10) : 5000; \r\nif (line == 0){line = 1;}\r\nvar upHeight = 0 - line * lineH;\r\nscrollUp = function() {\r\n_this.animate( {\r\nmarginTop : upHeight\r\n}, speed, function() {\r\nfor (i = 1; i <= line; i++) {\r\n_this.find(\"li:first\").appendTo(_this);\r\n}\r\n_this.css( {\r\nmarginTop : 0\r\n});\r\n});\r\n}\r\n_this.hover(function() {\r\nclearInterval(timerID);\r\n}, function() {\r\ntimerID = setInterval(\"scrollUp()\", timer);\r\n}).mouseout();\r\n}\r\n})\r\n})(jQuery);\r\n\r\n\r\n" at line 14, column 14. Was expecting: ...

原因及解决方法(参考网友解决方法http://www.oschina.net/question/1092_3896):
elocity的$与Jquery的$发生冲突时的解决方法有以下几个:
1、使用jQuery代替$。
   如:jQuery.ajax();
   缺点:不适合扩展,一旦替换成第三方库时,那就麻烦大发

2、使用jQuery.noConflict。
   如:var j = jQuery.noConflict(); j.ajax();
   缺点:当使用jQuery的相关插件时,会使得插件失效哦!

3、wrap jQuery中的冲突方法。
   如$.ajax()在Velocity中会冲突,则重新定义如下:
function dw(){}
dw.ajax=function(s){
    jQuery.ajax(s);
}
dw.ajax();

方案3基本上解决了1、2中的缺点~~~故推荐使用第三种方法!

分享到:
评论

相关推荐

    org.apache.velocity_1.3.1 jquery 插件

    使用jQuery插件在Velocity中的好处有: 1. **简化DOM操作**:jQuery提供了一套丰富的选择器,使得选取HTML元素变得简单,同时也简化了添加、删除或修改元素的操作。 2. **动画效果**:jQuery的动画功能使得在网页上...

    用Velocity改装的jquery+json+springMVC+ibatis简单例子

    在这个“用Velocity改装的jquery+json+springMVC+ibatis简单例子”中,我们探讨的是一个集成多种技术的Web应用程序开发示例。这个项目利用了Velocity作为模板引擎,jQuery作为前端JavaScript库,JSON作为数据交换...

    Springmvc+mybatis+velocity+easyui+jquery框架

    MyBatis可以使用简单的XML或注解进行配置和原始映射,将接口和Java的POJOs(Plain Old Java Objects,普通的Java对象)映射成数据库中的记录。 【Velocity】 Velocity是Apache软件基金会的一个开源项目,它是一个Java...

    html文件中jquery与velocity变量中的$冲突的解决方法

    问题描述: 在使用velocity模版引擎的环境下,使用jquery时,如:$.fullCalendar.gcalFeed(‘http://www.google.com/calendar/feeds/sfzc1@realintelligence.com/public/basic’) 其中$与velocity变量中的$冲突。...

    一套基于SpringMVC+velocity框架的web应用 ,基于注解

    在Velocity模板中,开发者可以通过#set指令设置变量,#if进行条件判断,#foreach进行循环,以及引用Java对象的方法等,实现动态内容的生成。Velocity的宏和 VelocityContext 进一步增强了模板的功能和灵活性。 ...

    基于jQuery和Velocity.js引擎插件实现手机端动画切换特效源码.zip

    jQuery作为广泛使用的JavaScript库,简化了DOM操作、事件处理以及Ajax交互,而Velocity.js则是一款高性能的动画库,它提供了与jQuery动画类似的API,但性能更优,尤其适合复杂的动画效果。 首先,我们需要理解...

    Velocity是一个动画引擎有着和jQuery的animate一样的API

    Velocity 是一个动画引擎,有着和 jQuery 的 $.animate() 一样的 API。它既可以和 jQuery 一起工作,也可以脱离 jQuery 工作。它的速度难以置信地快,具有 颜色动画,转换,循环,缓动,支持 SVG,以及滚动的功能。

    jquery侧边栏插件sideToggle

    通过结合使用jQuery与velocity.js(一个高性能的动画库),`sideToggle`可以实现平滑流畅的动画效果,增强用户体验。 ### 2. jQuery库 jQuery是JavaScript的一个库,简化了DOM操作、事件处理、Ajax交互以及动画等...

    cj_easyui_combobox_struts_velocity.docx

    在Velocity模板中,可以使用`$!{}`语法来引用资源或对象。例如: ```html $!{res['label.combobox']} &lt;!-- 这里放置Combobox元素 --&gt; ``` 总的来说,通过整合Struts2、EasyUI和Velocity,我们可以轻松地创建...

    Spring3.0.1+Mybatis3.0.5+Struts2.2.3.1+velocity1.7+DWZ

    这是一个基于Java技术栈的老式项目配置,主要涵盖了Spring 3.0.1、Mybatis 3.0.5、Struts2.2.3.1、Velocity 1.7以及DWZ jQuery UI框架的整合应用。下面将详细介绍这些组件及其在项目中的作用。 **Spring 3.0.1**: ...

    velocity.min.js

    它能和 jQuery 完美协作,并和$.animate()有相同的 API,但它不依赖 jQuery,可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能, 还拥有:颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动...

    Velocity.js动画效果库.zip

    类似 jQuery 的 $.animate() 方法,但无需依赖 jQuery。速度非常快,而且提供一些很酷的动画效果,支持 SVG 和滚动。 示例代码: $element.velocity({  width: "500px",  property2: value2 }, {  /* ...

    基于Velocity.js的超酷滚动页面特效

    与jQuery的动画功能相比,Velocity.js在性能上有所提升,因为它优化了内部处理方式,减少了DOM操作和样式计算。这款库尤其适合用于创建复杂的页面滚动特效,如在给定的“基于Velocity.js的超酷滚动页面特效”项目中...

    jquery.uploadify3.2在struts2中使用的完整工程

    【jQuery Uploadify 3.2在Struts2中的应用】 jQuery Uploadify 3.2是一个流行的前端文件上传插件,它允许用户通过Ajax技术实现异步、多文件上传功能,大大提升了用户界面的交互性和用户体验。这个完整的工程是将...

    Struts2JQueryJson

    此外,Struts2支持多种视图技术,包括JSP、FreeMarker、Velocity等,而与jQuery和JSON的集成则进一步增强了其在前端展示和数据交换的能力。 **jQuery库** jQuery是一款高效、简洁、功能丰富的JavaScript库,它简化...

    struts2+ajax+jquery

    在这个例子中,我们使用jQuery的Ajax函数与Struts2进行交互。jQuery的$.ajax()方法可以创建一个Ajax请求,其参数包括URL、请求类型(GET或POST)、数据、回调函数等。例如: ```javascript $.ajax({ url: "action...

    jQuery手机端动画切换引擎插件.zip

    而Velocity.js则是一个高性能的动画库,它的出现是为了弥补jQuery在动画性能上的不足。Velocity.js不仅支持CSS属性的动画,还支持JavaScript对象的动画,提供更加精细的控制和更流畅的动画效果。 二、jQuery手机端...

Global site tag (gtag.js) - Google Analytics