how create jquery plugin and css triangle
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="js/j.js"></script>
<script type="text/javascript">
$.fn.Triangle = function(classes,recolor="black",height="20",width="20",) {
switch (classes) {
case 'arrow-up':
this.css('border-bottom',height+'px solid '+recolor);
this.css('border-left',width+'px solid transparent');
this.css('border-right',width+'px solid transparent');
break;
case 'arrow-down':
this.css('border-top',height+'px solid '+recolor);
this.css('border-left',height+'px solid transparent');
this.css('border-right',height+'px solid transparent');
break;
case 'arrow-right':
this.css('border-left',height+'px solid '+recolor);
this.css('border-top',height+'px solid transparent');
this.css('border-bottom',height+'px solid transparent');
break;
case 'arrow-left':
this.css('border-right',height+'px solid '+recolor);
this.css('border-top',height+'px solid transparent');
this.css('border-bottom',height+'px solid transparent');
break;
default:
this.css('border-bottom',height+'px solid '+recolor);
this.css('border-left',width+'px solid transparent');
this.css('border-right',width+'px solid transparent');
break;
}
this.addClass(classes);
};
</script>
<style type="text/css">
.Triangle {
width: 0;
height: 0;
}
</style>
</head>
<body>
<div class="Triangle0 Triangle" > </div>
<div class="Triangle1 Triangle" > </div>
<div class="Triangle2 Triangle" > </div>
<script type="text/javascript">
$(".Triangle0" ).Triangle('arrow-up');
$(".Triangle1" ).Triangle('arrow-right');
$(".Triangle2" ).Triangle('arrow-left','red');
</script>
</body>
</html>
