Topic: HTML Tags In JS

Sveiki,

Pas manęs yra tokia situacija:

$("#blah").append("<div class='show-tooltip' title='<img src='sss' "+escape("/")+">'>Tekstas</div>");

Nu i niekaip tas velnio daiktas neveik, google irgi neduoda jokių teigiamų rezultatų, gal galit kas padėt?

Rezultatas turėtų būti toks, kad title tag`e veiktų img tag`as, nes dabar šį atvaizdavus iškraipo patį "tekstas" pvz: >testas, o title iš vis nerodo.

Dėkui.

Re: HTML Tags In JS

Bandau padet :P
$("#blah").append("<div class=\"show-tooltip\"><img src=\"sss\" title=\"Tekstas\" "+escape("/")+"></div>");

var_dump(0 == 'tekstas'); // TRUE. ar zinai kodel? :)

Re: HTML Tags In JS

Title atribute gali buti tik tekstas (http://www.w3schools.com/tags/att_standard_title.asp). Negi taip sunku pasiskaitineti dokumentacija?
Jei nori, kad uzvarius pele ant elemento atsirastu title paveikliukas, tai jau teks kodinti :)

Re: HTML Tags In JS

Neodan wrote:

Title atribute gali buti tik tekstas (http://www.w3schools.com/tags/att_standard_title.asp). Negi taip sunku pasiskaitineti dokumentacija?
Jei nori, kad uzvarius pele ant elemento atsirastu title paveikliukas, tai jau teks kodinti :)

žinau. :)
Tai padaryti galima su jQuery tooltip`u, mane domina šiuo atveju tik sintaksė. :)

Re: HTML Tags In JS

Nesigilinant į tai, ką galima dėti į title atributo reikšmę, ir šiek tiek nukrypstant nuo esmės, aš rekomenduočiau JS'o eilutes skliausti viengubomis kabutėmis, o HTML'o - dvigubomis.

Sekantis loginis žingsnis yra paskaityti dokumentacijoje apie konkrečias / bendras taisykles dėl reikšmių, ir neabejoju, kad jos turi būti esceipinamos, ir ir kuo esceipinti priklauso nuo to, kas tą konkretų turinį sugeneruoja. Gali ir su rankom esceipinti pasvirusį brūkšnį ("/") naudodamas atgalinį pasvirusį brūkšnį ("\/"). Tokiu atveju rezultatas būtų:

$('#blah').append('<div class="show-tooltip" title="<img src=\"http://name.tld/uri\" />">Tekstas</div>');

Taisydamas šį kodą net neesceipinau pasvirusio brūkšnio, nes kažkaip man atrodo, kad jo ir nereikia čia esceipinti, nes jis neturi nieko reiškti, čia juk paprasta eilutė, o ne koks nors šablonas... Pataisykit jeigu suklydau (-;

6 (edited by qutwala 2011-10-28 04:35:02)

Re: HTML Tags In JS

Ačiū Mindaugai už išsamų paaiškinimą, mėginsiu tvarkytis!
Vėliau raštelsiu, kaip sekėsi. :)

Redaguota:

Na pasidariau, tačiau jokio efekto su tool-tip`u.. rodo įprastą tag`ą img ir tiek.
Gal galite pasiūlyti kokių alternatyvų?

Re: HTML Tags In JS

qutwala pabandyk savo sukurti, įgausi praktikos ir suprasi kas kaip vyksta. Realiai čia sunkaus nieko nėra.

Tu nenurodyk pilna HTML i title atributą, užtenka ir paveiksliuko kelio.
Po to paimk ta atributą su jQuery, susikurk naują elementą kur išvesi tą paveiksliuką su position: absolute.
Judindamas pelę nurodyk kitokias koordinates
Patraukdamas pelę nuo elemento sunaikink elementą.

Paprasta :)

štai mano darytas ką tik. Niekad neesu bandęs ToolTip daryti, bet manau principą suprasi. Pasikoreguok pagal savę. Bandžiau tiek su <div> tiek su <a> elementais tai veikė viskas. Truputi gliučina su mousemove, bet susitvarkysi jau pats šitą. Tokį dalyką susikurti gali ir pats per 10-15 min.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tooltip</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    </head>
<body>
    <a href="#" class="showTooltip" title="icon.png">Testas</a>
    <script language="javascript">
        $(".showTooltip").mouseover(function(e) {
            if ($("#ToolTip").length  == 0) {
                var img = $(this).attr("title");
                var mX = e.clientX + 10;
                var mY = e.clientY + 10;
                $("body").append('<img id="ToolTip" src="' + img +'" style="position:absolute;top:' + mY +'px;left:' + mX +'px;" />');
            }
        }).mouseleave(function() {
            $("#ToolTip").remove();
        }).mousemove(function(e) {
            var mX = e.clientX;
            var mY = e.clientY;
            $("#ToolTip").css("left",mX).css("top",mY);
        });
    </script>
</body>
</html>