Wie integriert man ein javascript korrekt?

Diskussionen rund um die Templates (incl. Smarty)
Antworten
Kopernikus
Beiträge: 390
Registriert: Fr 19. Okt 2012, 12:15

Wie integriert man ein javascript korrekt?

Beitrag von Kopernikus »

Seit einigen Versionen ist ja die general.js aus dem javascript template Ordner verschwunden. Neu gibt es ja die templates.js in welche offenbar javascript code integriert werden kann. Ich habe damit leider so meine Probleme, da ich bis jetzt kein Script mehr zum laufen gebracht habe.

Ich hätte da z.B. das folgende Script:

Code: Alles auswählen

<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/ratingstars.js"
type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("#rating_star").xtcm_rating({
rating_star_length: '5',
rating_initial_value: '3',
rating_function_name: '',
directory: '<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/img/'
});
});
</script>
<?php
Damals konnte ich dieses einfach direkt so in die generals.js kopieren und alles war gut. Ich weiss nun nicht, wie ich das Skript genau in der Templates.js einbauen muss.
Wenn ich nur den folgenden Schnippsel integriere, funktioniert überhaupt nichts mehr (auch die bisherigen Skripts).

Code: Alles auswählen

$(function() {
$("#rating_star").xtcm_rating({
rating_star_length: '5',
rating_initial_value: '3',
rating_function_name: '',
directory: '<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/img/'
});
});
</script>
<?php
Nebenbei bemerkt muss ich für dieses Skript ja auch noch die ratingstars.js in dem javascript ordner ablegen. Das habe ich gemacht und den entsprechenden Link in der templates_default.php gesetzt. Ebenfalls habe ich im template den {javascript} Befehl gesetzt. Passieren tut jedoch nach wie vor nichts.

Hier noch das ratingstars.js Skript:

Code: Alles auswählen

(function(a){
	a.fn.xtcm_rating=function(p){
	var p=p||{};
	var b=p&&p.rating_star_length?p.rating_star_length:"5";
	var c=p&&p.rating_function_name?p.rating_function_name:"";
	var e=p&&p.rating_initial_value?p.rating_initial_value:"0";
	var d=p&&p.directory?p.directory:"images";
	var f=e;
	var g=a(this);
	b=parseInt(b);
	init();
		g.next("ul").children("li").hover(function(){
		$(this).parent().children("li").css('background-position','0px 0px');
		var a=$(this).parent().children("li").index($(this));
		$(this).parent().children("li").slice(0,a+1).css('background-position','0px -28px')
		},function(){});
		g.next("ul").children("li").click(function(){
		var a=$(this).parent().children("li").index($(this));
		f=a+1;
		g.val(f);
		if(c!=""){	eval(c+"("+g.val()+")")	}
		});
		g.next("ul").hover(function(){},function(){
		if(f==""){
			$(this).children("li").slice(0,f).css('background-position','0px 0px')
		}else{
			$(this).children("li").css('background-position','0px 0px');
			$(this).children("li").slice(0,f).css('background-position','0px -28px')
		}
		});
	function init(){
		$('<div style="clear:both;margin-bottom:25px;"></div>').insertAfter(g);
		g.css("float","left");
		var a=$("<ul>");
		a.addClass("xtcm_rating");
	for(var i=1;i<=b;i++){
		a.append('<li style="background-image:url(<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER).DIR_WS_CATALOG.'templates/'.CURRENT_TEMPLATE; ?>/img/xtcm_star.gif)"><span>'+i+'</span></li>')
	}
	a.insertAfter(g);
	if(e!=""){
		f=e;
		g.val(e);
        g.next("ul").children("li").slice(0,f).css('background-position','0px -28px')
	}
	}
}
})(jQuery);
Ich finde durch die Auslagerung der javascript Dateien ist alles viel umständlicher und (zumindest für mich) unübersichtlich geworden. Kann mir jemand erklären wie ich dieses Skript doch noch zum Laufen bekomme?
Antworten