Jump to content
AlMalalah

Cum fac asta in HTML5 & CSS3 & PHP ?

By AlMalalah, in Programare

Recommended Posts

AlMalalah Newbie

AlMalalah

Posted
Posted

Am mai multe butoane. Sa zicem ca vreo 25 de butoane ordonate ca o matrice 5 linii x 5 coloane si ca text sunt numerotate de la 1 la 25.

Sub butoane am un slider care este setat default pe 100%.

Cand dau click cu mouseul pe fiecare buton vreau sa-si schimbe culoare ca si cum as fi selectat anumite butoane din cele 25, sa zicem ca culoarea butoanelor neselectate e galbena iar a celor selectate e verde.

Toate aceste butoane sa ramana sub starea de "pressed" si sa aiba culoarea verde.

Butoanele selectate astfel vreau sa fie "stocate" undeva intr-un vector ca sa le pot folosi.

Mai departe, mut sliderul de la 100% la, sa zicem, 75% si selectez alte butoane ramase neselectate din cele 25 iar ele sa ramana tot asa, pressed si sa isi schimbe culoarea din galben in verde dar mai deschis (75%), nu verde ca cele din grupul de 100%. Si sa le bage intr-un alt vector.

Mai departe, mut sliderul de la 75% la o alta valoare si selectez alte butoane, le bag in alt vector, si tot asa.

In caz ca selectez un buton care deja face parte dintr-un alt grup atunci sa mi-l scoata din grupul ala si sa-l bage in noul grup.

Cum fac chestia asta ?

Va rog frumos sa ma ajutati, nu am venit cu nici un cod fiindca nu am nici o idee despre cum sa fac asta.

Multumesc mult de tot !

Link to comment
Share on other sites
AlMalalah Newbie

AlMalalah

Posted
  • Author
Posted
Nici macar markup-ul nu l-ai scris ?

<!DOCTYPE html><html><head>
<style type="text/css">

.button_example{
border:1px solid #ffc826; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
 background-color: #ffd65e; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffd65e), to(#febf04));
 background-image: -webkit-linear-gradient(top, #ffd65e, #febf04);
 background-image: -moz-linear-gradient(top, #ffd65e, #febf04);
 background-image: -ms-linear-gradient(top, #ffd65e, #febf04);
 background-image: -o-linear-gradient(top, #ffd65e, #febf04);
 background-image: linear-gradient(to bottom, #ffd65e, #febf04);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffd65e, endColorstr=#febf04);
}

.button_example:hover{
 border:1px solid #f7b800;
 background-color: #ffc92b; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffc92b), to(#ce9a01));
 background-image: -webkit-linear-gradient(top, #ffc92b, #ce9a01);
 background-image: -moz-linear-gradient(top, #ffc92b, #ce9a01);
 background-image: -ms-linear-gradient(top, #ffc92b, #ce9a01);
 background-image: -o-linear-gradient(top, #ffc92b, #ce9a01);
 background-image: linear-gradient(to bottom, #ffc92b, #ce9a01);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffc92b, endColorstr=#ce9a01);
}
</style></head>
<body>

<a class="button_example" href="#">1</a><a class="button_example" href="#">2</a><a class="button_example" href="#">3</a><a class="button_example" href="#">4</a><a class="button_example" href="#">5</a><br>
<a class="button_example" href="#">6</a><a class="button_example" href="#">7</a><a class="button_example" href="#">8</a><a class="button_example" href="#">9</a><a class="button_example" href="#">10</a><br>
<a class="button_example" href="#">11</a><a class="button_example" href="#">12</a><a class="button_example" href="#">13</a><a class="button_example" href="#">14</a><a class="button_example" href="#">15</a><br>
<a class="button_example" href="#">16</a><a class="button_example" href="#">17</a><a class="button_example" href="#">18</a><a class="button_example" href="#">19</a><a class="button_example" href="#">20</a><br>
<a class="button_example" href="#">21</a><a class="button_example" href="#">22</a><a class="button_example" href="#">23</a><a class="button_example" href="#">24</a><a class="button_example" href="#">25</a><br>

<p>**** Aici trebuia sa fie un slider orizontal de care vorbesc dar nu stiu cum se face in html</p>

</body>
</html>

Cam asa arata:

Capture.png

Ele ar trebui sa formeze un patrat si nu forma aia neregulata. Nu stiu care e chestia.

Sub ele ar trebui sa fie acel slider pe care nu stiu cum sa-l fac.

Si... cam atat, pana aici ma pricep, de aici va rog mult sa ma ajutati daca se poate si nu va suparati.

Multumesc mult de tot !

Link to comment
Share on other sites
AlMalalah Newbie

AlMalalah

Posted
  • Author
Posted
Nu-ti raspunde nimeni din simplul fapt ca ai atat de multe specificatii incat depaseste limitele cand vine vorba de ajuta pe cineva :)

Poate ca am vorbit eu prea mult insa nu vreau decat un slider si posibilitatea de a selecta unul sau mai multe butoane formand grupuri de butoane selectate cu ajutorul sliderului iar ca sa poti cunoaste fiecare grup sa aibe fiecare cate o nuanta de verde. Atata tot...

Link to comment
Share on other sites
AlMalalah Newbie

AlMalalah

Posted
  • Author
Posted
Iti trebuie JavaScript. Altfel nu poti face un slider functional. HTML si CSS iti pun la dispozitie doar elemente de interfata. Functionalitatea este data tot de JS.

Atat poti face cu HTML5 dintr-un slider (useless pana apesi submit = bun daca vrei sa faci handling-ul server side): HTML5 Forms: Range Type Demo | Wufoo

Treaba cu butoanele e chiar imposibil de realizat doar cu HTML5.

Iar ca sa intelegem, vrei sa selectezi procentul de butoane de pe slider, nu ? Adica daca duci sliderul la 80%, selectezi 20 din 25, nu ?

Nu. Misc sliderul la 100% si selectez niste butoane care raman apasate si din culoarea galbena capata culoarea verde 100%.

Misc apoi sliderul la 50% si selectez alte butoane care capata culoarea tot verde dar cu 50% mai deschis.

Misc sliderul la 35% si selectez alte butoane care vor capata culoarea tot verde dar cu 75% mai deschis (100% e verde maxim - 35% = 75% mai deschis).

Misc sliderul la 10% si butoanele pe care le selectez vor o culoare slaba de verde (verde maxim (100%) - 10%(selectat pe slider)=90% mai deschis e verdele.

s.a.m.d.

Sliderul nu arata procentajul de butoane selectate ci defineste cat de deschisa vor avea culoarea grupul de butoane ce urmeaza sa fie selectat.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
Go to topic listing
×
×
  • Create New...