-
Notifications
You must be signed in to change notification settings - Fork 0
/
Barra de Habilidades.mucow
148 lines (141 loc) · 5.16 KB
/
Barra de Habilidades.mucow
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<?xml version="1.0" encoding="UTF-8"?>
<!--
Widget: Barra de Habilidades - Adobe Muse CC 2014
Autor: Lenin Peña - http://twitter.com/leninalbertop
Versión del Widget: 1.0.1
-->
<HTMLWidget name="Barra de Habilidades" formatNumber="2" localization="none" creator="Lenin Peña" isResizable="true" defaultWidth="480" defaultHeight="25" termsText="Gracias por usar el Widget Barra de Habilidades. Este Widget se ofrece de forma gratuita con licencia Creative Commons Atribución-No Comercial-Compartir Igual 4.0 Internacional (CC BY-NC-SA 4.0). Queda terminantemente prohibido el uso comercial del mismo. Si desea comunicarse conmigo por favor visite mi perfil en Twitter @leninalbertop.">
<parameters>
<separator/>
<list name="icon" defaultValue="fa fa-html5 fa-lg" label="Seleccione un icono">
<value name="fa fa-lg" label="Sin icono"/>
<value name="fa fa-html5 fa-lg" label="Html 5"/>
<value name="fa fa-css3 fa-lg" label="Css 3"/>
<value name="fa fa-flask fa-lg" label="JavaScript"/>
<value name="fa fa-terminal fa-lg" label="JQuery"/>
<value name="fa fa-tablet fa-lg" label="Responsive Design"/>
<value name="fa fa-code fa-lg" label="Php"/>
<value name="fa fa-flash fa-lg" label="Flash"/>
<value name="fa fa-database fa-lg" label="Bases de datos"/>
<value name="fa fa-android fa-lg" label="Android Apps"/>
<value name="fa fa-apple fa-lg" label="Apple Apps"/>
<value name="fa fa-windows fa-lg" label="Windows Apps"/>
<value name="fa fa-wordpress fa-lg" label="Wordpress"/>
<value name="fa fa-joomla fa-lg" label="Joomla"/>
<value name="fa fa-drupal fa-lg" label="Drupal"/>
<value name="fa fa-github fa-lg" label="Github"/>
<value name="fa fa-bitbucket fa-lg" label="Bitbucket"/>
<value name="fa fa-git fa-lg" label="Git"/>
</list>
<text name="nombre" label="Nombre de la habilidad" defaultValue="HTML5"/>
<text name="colorh" label="Color para la habilidad" defaultValue="#d35400"/>
<text name="colora" label="Color para la barra animada" defaultValue="#e67e22"/>
<text name="porcen" label="Porcentaje de la habilidad" defaultValue="50%"/>
<list name="speed" defaultValue="3000" label="Velocidad de animación">
<value name="6000" label="Lento"/>
<value name="3000" label="Normal"/>
<value name="1000" label="Rápido"/>
<value name="500" label="Super Rápido"/>
</list>
<separator/>
<info label="Haga clic sobre este texto si desea ponerse en contacto con el autor" linkURL="http://www.twitter.com/leninalbertop"/>
<separator/>
</parameters>
<headHTML>
<![CDATA[
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">
.skillbar {
position:relative;
display:block;
margin-bottom:15px;
width:100%;
background:#eee;
height:35px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-webkit-transition:0.4s linear;
-moz-transition:0.4s linear;
-ms-transition:0.4s linear;
-o-transition:0.4s linear;
transition:0.4s linear;
-webkit-transition-property:width, background-color;
-moz-transition-property:width, background-color;
-ms-transition-property:width, background-color;
-o-transition-property:width, background-color;
transition-property:width, background-color;
}
.skillbar-title {
position:absolute;
top:0;
left:0;
width:auto;
font-weight:bold;
font-size:13px;
color:#ffffff;
background:#6adcfa;
-webkit-border-top-left-radius:3px;
-webkit-border-bottom-left-radius:4px;
-moz-border-radius-topleft:3px;
-moz-border-radius-bottomleft:3px;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
}
.skillbar-title span {
display:block;
background:rgba(0, 0, 0, 0.1);
padding:0 5px;
height:35px;
line-height:35px;
-webkit-border-top-left-radius:3px;
-webkit-border-bottom-left-radius:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-bottomleft:3px;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
}
.skillbar-bar {
height:35px;
width:0px;
background:#6adcfa;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.skill-bar-percent {
position:absolute;
right:10px;
top:0;
font-size:11px;
height:35px;
line-height:35px;
color:#ffffff;
color:rgba(0, 0, 0, 0.4);
}
</style>
]]>
</headHTML>
<pageItemHTML>
<![CDATA[
<div class="skillbar clearfix " data-percent="{param_porcen}">
<div class="skillbar-title" style="background: {param_colorh};"><span class="{param_icon}"> {param_nombre}</span></div>
<div class="skillbar-bar" style="background: {param_colora};"></div>
<div class="skill-bar-percent">{param_porcen}</div>
</div>
]]>
</pageItemHTML>
<bodyEndHTML>
<![CDATA[
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.skillbar').each(function(){
jQuery(this).find('.skillbar-bar').animate({
width:jQuery(this).attr('data-percent')
},{param_speed});
});
});
</script>
]]>
</bodyEndHTML>
</HTMLWidget>