Problema con Jquery UI e codice che non viene generato

[American]

Salve,

sto seguendo questo tutorial
http://www.html.it/articoli/widget-m...one-con-tab-3/

ma arrivato alla pagina 3 c'è qualcosa che non mi torna...
Viene infatti asserito che le classi scaricate dal sito ufficiale del framework Jquery, generano il codice riportato nel riquadro (deduco che viene generato automaticamente nel body)..

Ma com'è che nel mio caso nonostante avessi correttamente importato le classi, non mi viene generato alcun codice e se lancio la pagina col browser risulta completamente bianca??

[ilCrosta]

Ciao! Con JQuery sono abbastanza capace, lo uso sempre per lavoro.

JQuery-ui ti offre dei vantaggi a livello grafico, ma non genera tutto il codice.
Ti crea diversi DIV container con le sue classi, però per funzionare il tutto è associato a un tuo elemento.

Riesci a postare il tuo codice? Così vedo se c'è qualche errore.

[American]

Originariamente inviato da ilCrosta
Ciao! Con JQuery sono abbastanza capace, lo uso sempre per lavoro.

JQuery-ui ti offre dei vantaggi a livello grafico, ma non genera tutto il codice.
Ti crea diversi DIV container con le sue classi, però per funzionare il tutto è associato a un tuo elemento.

Riesci a postare il tuo codice? Così vedo se c'è qualche errore.

Ma il problema non è che non funziona. Il widget funziona seguendo la guida, solo che non capisco il passaggio in cui viene asserito che mi ritrovo quello snippet di codice generato dopo l'importazione delle classi Jquery UI...

Io non trovo alcun codice generato, eccezion fatta per quello ovviamente presente nella stessa classe, che comunque non corrisponde a quello riportato nel riquadro della guida

[American]

Poi un altro dubbio: importando il mio codice CSS, faccio in modo che graficamente il widget corrisponda alle regole da me dettatogli piuttosto che da quelle che applica di defaul jquery UI... Ma con quale logica l'HTML dà priorità ad una regola piuttosto che un altra? Ovvero, come fa il mio CSS a risultare prioritario rispetto alle regole delle classi di Jquery ui ?

[cassano]

Se ricordo bene, le regole CSS, come dice il nome stesso vanno dall'alto verso il basso, quindi quella più bassa avrà priorità.

[American]

e come si stabilisce tale gerarchia? io nel codice html ho importato prima il CSS e poi gli script jquery, quindi questi si trovano "più in basso" nel codice se è questo che intendi

[ilCrosta]

Originariamente inviato da American
e come si stabilisce tale gerarchia? io nel codice html ho importato prima il CSS e poi gli script jquery, quindi questi si trovano "più in basso" nel codice se è questo che intendi

Il tutto a livello gerarchico.

Se nell'HTML importo prima jquery-ui, e poi il mio css, gli elemtni comuni avranno il tuo css.
Ad esempio:

--- jquery
.class {
color: red;
}

--- tuo css
.class {
color: blue;
}

Il colore sarà blu.

Occhio, però, che con le librerie non sempre funziona per via della notazione "!important", che a volte trovi.

--- jquery
.class {
color: red !important;
}

--- tuo css
.class {
color: blue;
}

In questo caso il testo sarà sempre rosso.


Tornando al tuo problema, senza il codice davanti non sò come aiutarti.

[American]

Originariamente inviato da ilCrosta
Il tutto a livello gerarchico.

Se nell'HTML importo prima jquery-ui, e poi il mio css, gli elemtni comuni avranno il tuo css.
Ad esempio:

--- jquery
.class {
color: red;
}

--- tuo css
.class {
color: blue;
}

Il colore sarà blu.

Occhio, però, che con le librerie non sempre funziona per via della notazione "!important", che a volte trovi.

--- jquery
.class {
color: red !important;
}

--- tuo css
.class {
color: blue;
}

In questo caso il testo sarà sempre rosso.

Così come nelal guida, il CSS è importato PRIMA del jquery UI, tuttavia ho notato che alla fine del file css c'è questa annotazione
.ui-tabs .ui-tabs-hide { display: none !important; }

è per questo che il css risulta primario rispetto al jquery? e che sarebbero .ui-tabs e .ui-tabs-hide ?

Tornando al tuo problema, senza il codice davanti non sò come aiutarti.

ripeto, non è una questione di codice, mi trovo solo in dubbio in quanto asserito nella guida...

Così come nella guida, importo le classi jqyery in questo modo:
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>

alché la guida dice questo:

Inseriamo nella <head> del nostro file HTML i collegamenti ai file di jQuery appena scaricati (vedi esempio) e analizziamo il codice generato dal framework Javascript:

<div class="widget ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
  <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class="first ui-state-default ui-corner-top ui-tabs-selected ui-state-active">[url="#tabs-1"]Tab1[/url]
    <li class="ui-state-default ui-corner-top">[url="#tabs-2"]Tab2[/url]
    <li class="ui-state-default ui-corner-top">[url="#tabs-3"]Tab2[/url][/list]
  <div class="widget-content">
  
    <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"> Contenuto d'esempio primo tab. </div>
    <div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"> Contenuto d'esempio secondo tab.</div>
    <div id="tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"> Contenuto d'esempio terzo tab.</div>
  </div>
  <div class="widget-footer"/>
</div> 

io sinceramente capisco che una volta importati gli script, nel body mi ritrovo automaticamente quel codice generato, il che non si verifica affatto!

[American]

Cmq ecco il codice html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>



<link href="widget.css" rel="stylesheet" type="text/css">


<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>

<script type="text/javascript">
            $(function(){
    
                // Tabs
                $('#tabs').tabs();
                
                //hover states on the static widgets
                $('#dialog_link, ul#icons li').hover(
                    function() { $(this).addClass('ui-state-hover'); }, 
                    function() { $(this).removeClass('ui-state-hover'); }
                );
                
            });
        </script>

</head>

<body>

<div id="tabs" class="widget">
  <ul>
    <li class="first">[url="#tabs-1"]Tab1[/url][*][url="#tabs-2"]Tab2[/url][*][url="#tabs-3"]Tab2[/url][/list]
  <div class="widget-content">
  
    <div id="tabs-1"> Contenuto d'esempio primo tab. </div>
    <div id="tabs-2"> Contenuto d'esempio secondo tab.</div>
    <div id="tabs-3"> Contenuto d'esempio terzo tab.</div>
  </div>
  <div class="widget-footer"></div>
</div>


</body> 

Non capisco come è possibile che sia data priorità al foglio di stile personalizzato considerando che lo inizializzo prima dello script jquery

[Xinod]

devi approfondire il concetto di peso e specificita' del selettore nelle regole css
http://www.html.it/pag/14222/eredita...tti-tra-stili/