ugrás a tartalomhoz

Adobe Spry- nem sirály!!!!

aeternum · 2011. Szep. 29. (Cs), 17.43
Hogy én mindig mellényúlok!!!!
:)))))))))

Föladtam a regexpes dolgot, amikor nagyon nagyon nagyon kell, úgyis megoldom.
:)

Nos. Akkor legyen az a helyzet, hogy egy oldalon négy féle űrlap legyen.
Kevés a hely, ezért a fülezés mellett döntöttem...

Szépen megcsináltam az elrendezést és látám, hogy mukodik, mégse nem jó. A kevés hely miatt a füleken is kevés az info.

Sebaj, a Spry-nak van tooltip-je.
Szabálosan rá is teendem.
Oszt láss csudát: fika az egész!!!

Csak az első két fül működik és a második fül a 4. fül tartalmát hozza be.
HA! Ha jól látom CSS osztály öröklődési gond van.

De hiába látom jól, megoldani nem tudom, mert a FÜLEKHEZ kell kötnöm a tooltipet és öröklődést meg MÉG nem tudok megakadályozni.
Próbáltam a trigger-t span-ra tenni li-tagon belül, kívül.. ugyanez törpénik.

Felejcsem el a tooltipet? A Spry-t? Vagy mindent, amit tudok és mennyek el kapányi?
:)))))))))

Szóval. Valóban a Spry-jal van dond, vagy én nem használom jól?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html;utf-8" />  
  5. <title>Spry Tabbbed Panel + tooltip</title>  
  6.   
  7. <style type="text/css">  
  8. .TabbedPanels {  
  9.     margin: 0px;  
  10.     padding: 0px;  
  11.     float: left;  
  12.     clear: none;  
  13.     width: 160px; }  
  14. .TabbedPanelsTabGroup {  
  15.     margin: 0px;  
  16.     padding: 0px;}  
  17. .TabbedPanelsTab {  
  18.     position: relative;  
  19.     top: 1px;  
  20.     float: left;  
  21.     padding: 0px 3px 0px 0px;  
  22.     margin: px 1px 0px 0px;  
  23.     background-color: #39F;  
  24.     font: bold 9px Verdana, Geneva, sans-serif;  
  25.     color:#C30;  
  26.     list-style: none;  
  27.     cursor: pointer;  
  28.     border:1px solid;  
  29.     white-space:nowrap;  
  30.     display:block;  
  31.     bottom:auto;  
  32.     width:34px;  
  33.     height:14px;}  
  34. .TabbedPanelsTabHover {  
  35.     background-color: #3CF;}  
  36. .TabbedPanelsTabSelected {  
  37.     background-color: #3FF;  
  38.     border-bottom: 1px solid #EEE;}  
  39. .TabbedPanelsTab a {  
  40.     color: black;  
  41.     text-decoration: none;}  
  42. .TabbedPanelsContentGroup {  
  43.     clear: both;  
  44.     border-left: solid 1px #CCC;  
  45.     border-bottom: solid 1px #CCC;  
  46.     border-top: solid 1px #999;  
  47.     border-right: solid 1px #999;  
  48.     background-color: #3FF;  
  49.     height: 150px;}  
  50. .TabbedPanelsContent {  
  51.     padding: 1px;  
  52.     font:Verdana, Geneva, sans-serif;  
  53.     font-size:10px;  
  54.     overflow: hidden;  
  55.     color:#000;}  
  56. .TabbedPanelsContentVisible {}  
  57.   
  58. /*********************** tooltip.css ****************/  
  59. .tooltipContent {     
  60.   background-color: #FF0;  
  61.   font:Verdana, Geneva, sans-serif;  
  62.   font-size:10px;  
  63.   font-style:oblique;  
  64. }  
  65. </style>  
  66.   
  67. <script language="JavaScript" type="text/javascript" src="http://labs.adobe.com/technologies/spry/widgets/tabbedpanels/SpryTabbedPanels.js"></script>  
  68.   
  69. <script src="http://labs.adobe.com/technologies/spry/widgets/tooltip/SpryTooltip.js" type="text/javascript"></script>  
  70.   
  71. </head>  
  72. <body>  
  73.  <div class="TabbedPanels" id="fules">  
  74.   <ul class="TabbedPanelsTabGroup">  
  75.     <li class="TabbedPanelsTab" id="trigger1">&deg;C+pH</li>  
  76.     <div class="tooltipContent" id="container1">H&ocirc;mérséklet és pH mérés</div>  
  77.     <script language="JavaScript" type="text/javascript">  
  78.       var tooltip1 = new Spry.Widget.Tooltip("container1", "#trigger1");  
  79.     </script>  
  80.   
  81.     <li class="TabbedPanelsTab" id="trigger2"> sCl</li>  
  82.     <div class="tooltipContent" id="container2">Szabad Clor mérés</div>  
  83.     <script language="JavaScript" type="text/javascript">  
  84.       var tooltip2 = new Spry.Widget.Tooltip("container2", "#trigger2");  
  85.     </script>  
  86.           
  87.     <li class="TabbedPanelsTab" id="trigger3">Cl 1_2</li>  
  88.     <div class="tooltipContent" id="container3">Szabad és Kötött Clor mérés</div>  
  89.     <script language="JavaScript" type="text/javascript">  
  90.       var tooltip3 = new Spry.Widget.Tooltip("container3", "#trigger3");  
  91.     </script>  
  92.   
  93.     <li class="TabbedPanelsTab" id="trigger4">Egyedi</li>  
  94.     <div class="tooltipContent" id="container4">Rendkívüli mérések</div>  
  95.     <script language="JavaScript" type="text/javascript">  
  96.       var tooltip4 = new Spry.Widget.Tooltip("container4", "#trigger4");  
  97.     </script>  
  98.   
  99.   </ul>  
  100.   <div class="TabbedPanelsContentGroup">  
  101.    <div class="TabbedPanelsContent">Tab 1 tartalom</div>  
  102.    <div class="TabbedPanelsContent">Tab 2 tartalom</div>  
  103.    <div class="TabbedPanelsContent">Tab 3 tartalom</div>  
  104.    <div class="TabbedPanelsContent">Tab 4 tartalom</div>  
  105.   </div>  
  106.  </div> <!-- end fules -->  
  107.   
  108. <script language="JavaScript" type="text/javascript">  
  109.   var tp1 = new Spry.Widget.TabbedPanels("fules");  
  110. </script>  
  111. </body>  
  112. </html>  
 
1

HTML

Poetro · 2011. Szep. 29. (Cs), 18.17
Mi lenne ha valid HTML-t csinálnál, egyből működni. Itt a javított változat CSS nélkül:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.   <meta http-equiv="Content-Type" content="text/html;utf-8" />  
  5.   <title>Spry Tabbbed Panel + tooltip</title>  
  6. </head>  
  7. <body>  
  8.   <div class="TabbedPanels" id="fules">  
  9.     <ul class="TabbedPanelsTabGroup">  
  10.       <li class="TabbedPanelsTab" id="trigger1">  
  11.         &deg;C+pH  
  12.         <div class="tooltipContent" id="container1">Hőmérséklet és pH mérés</div>  
  13.       </li>  
  14.       <li class="TabbedPanelsTab" id="trigger2">  
  15.         sCl  
  16.         <div class="tooltipContent" id="container2">Szabad Clor mérés</div>  
  17.       </li>  
  18.       <li class="TabbedPanelsTab" id="trigger3">  
  19.         Cl 1_2  
  20.         <div class="tooltipContent" id="container3">Szabad és Kötött Clor mérés</div>  
  21.       </li>  
  22.       <li class="TabbedPanelsTab" id="trigger4">  
  23.         Egyedi  
  24.         <div class="tooltipContent" id="container4">Rendkívüli mérések</div>  
  25.       </li>  
  26.     </ul>  
  27.     <div class="TabbedPanelsContentGroup">  
  28.       <div class="TabbedPanelsContent">Tab 1 tartalom</div>  
  29.       <div class="TabbedPanelsContent">Tab 2 tartalom</div>  
  30.       <div class="TabbedPanelsContent">Tab 3 tartalom</div>  
  31.       <div class="TabbedPanelsContent">Tab 4 tartalom</div>  
  32.     </div>  
  33.   </div> <!-- end fules -->  
  34.   <script language="JavaScript" type="text/javascript" src="http://labs.adobe.com/technologies/spry/widgets/tabbedpanels/SpryTabbedPanels.js"></script>  
  35.   <script src="http://labs.adobe.com/technologies/spry/widgets/tooltip/SpryTooltip.js" type="text/javascript"></script>  
  36.   <script language="JavaScript" type="text/javascript">  
  37.     var tp1 = new Spry.Widget.TabbedPanels("fules");  
  38.     var tooltip1 = new Spry.Widget.Tooltip("container1", "#trigger1");  
  39.     var tooltip2 = new Spry.Widget.Tooltip("container2", "#trigger2");  
  40.     var tooltip3 = new Spry.Widget.Tooltip("container3", "#trigger3");  
  41.     var tooltip4 = new Spry.Widget.Tooltip("container4", "#trigger4");  
  42.   </script>  
  43. </body>  
  44. </html>  
Azt hogy ezeket miért mented ki változóba nem világos, mert nem hiszem, hogy a változókat bármire is szeretnéd használni.
2

Először is köszönöm! :)

aeternum · 2011. Szep. 29. (Cs), 20.08
Általánosan is az a bajom a keretrendszerekkel, hogy a dokumentáltságuk ölég hiányos arra vonatkozóan, hogy ha két-három komponenst szeretnék egy oldalban használni.
Így van ez-sajnos-, a Spry-jal is. Én legalábbis csak azokig a példákig jutottam el, amik egy-egy komponens különálló megvalósítását írja le.

Talán a tooltipnél van olyan, hogy DataSettel kombinálódik táblázat adat megjelenítéshez. Vagy valami ilyesmi.

De külön levezetve, hogy minek és hol van a helye, az a legritkább esetben érhető el az eddig(!) látott keretrendszerek esetében.

A változót meg nem én gyártom, hanem a howto szerint így kell csinálni.
Legalábbis, nem mondja-írja, hogy másképp is lehe(ne).

A valid HTML-ért pedig elnézést! Kínomban és tudatlanságomban már mindent kipróbáltam.
Majdnem mindent..

Köszönöm mégegyszer!
:)
3

Probald felcserelni a

Ajnasz · 2011. Szep. 30. (P), 09.02
Probald felcserelni a sorrendet:
Ahelyett, hogy masok altal elkeszitett frameworkoket es plugineket kezdesz el fogalom nelkul hasznalni, elobb tanuld meg a technologia (legalabb) alapjait. Igy kepes leszel gondolkodni es tudni fogod, hogy mi folyik a masolt kodban, esetleg tudsz majd jobbat talalni vagy csinalni es kombinalni is tudod majd oket.