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?

<!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;utf-8" />
<title>Spry Tabbbed Panel + tooltip</title>

<style type="text/css">
.TabbedPanels {
	margin: 0px;
	padding: 0px;
	float: left;
	clear: none;
	width: 160px; }
.TabbedPanelsTabGroup {
	margin: 0px;
	padding: 0px;}
.TabbedPanelsTab {
	position: relative;
	top: 1px;
	float: left;
	padding: 0px 3px 0px 0px;
	margin: px 1px 0px 0px;
	background-color: #39F;
	font: bold 9px Verdana, Geneva, sans-serif;
	color:#C30;
	list-style: none;
	cursor: pointer;
	border:1px solid;
	white-space:nowrap;
	display:block;
	bottom:auto;
	width:34px;
	height:14px;}
.TabbedPanelsTabHover {
	background-color: #3CF;}
.TabbedPanelsTabSelected {
	background-color: #3FF;
	border-bottom: 1px solid #EEE;}
.TabbedPanelsTab a {
	color: black;
	text-decoration: none;}
.TabbedPanelsContentGroup {
	clear: both;
	border-left: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
	background-color: #3FF;
	height: 150px;}
.TabbedPanelsContent {
	padding: 1px;
	font:Verdana, Geneva, sans-serif;
	font-size:10px;
	overflow: hidden;
	color:#000;}
.TabbedPanelsContentVisible {}

/*********************** tooltip.css ****************/
.tooltipContent {	
  background-color: #FF0;
  font:Verdana, Geneva, sans-serif;
  font-size:10px;
  font-style:oblique;
}
</style>

<script language="JavaScript" type="text/javascript" src="http://labs.adobe.com/technologies/spry/widgets/tabbedpanels/SpryTabbedPanels.js"></script>

<script src="http://labs.adobe.com/technologies/spry/widgets/tooltip/SpryTooltip.js" type="text/javascript"></script>

</head>
<body>
 <div class="TabbedPanels" id="fules">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" id="trigger1">&deg;C+pH</li>
    <div class="tooltipContent" id="container1">H&ocirc;mérséklet és pH mérés</div>
    <script language="JavaScript" type="text/javascript">
      var tooltip1 = new Spry.Widget.Tooltip("container1", "#trigger1");
    </script>

    <li class="TabbedPanelsTab" id="trigger2"> sCl</li>
    <div class="tooltipContent" id="container2">Szabad Clor mérés</div>
    <script language="JavaScript" type="text/javascript">
      var tooltip2 = new Spry.Widget.Tooltip("container2", "#trigger2");
    </script>
        
    <li class="TabbedPanelsTab" id="trigger3">Cl 1_2</li>
    <div class="tooltipContent" id="container3">Szabad és Kötött Clor mérés</div>
    <script language="JavaScript" type="text/javascript">
      var tooltip3 = new Spry.Widget.Tooltip("container3", "#trigger3");
    </script>

    <li class="TabbedPanelsTab" id="trigger4">Egyedi</li>
    <div class="tooltipContent" id="container4">Rendkívüli mérések</div>
    <script language="JavaScript" type="text/javascript">
      var tooltip4 = new Spry.Widget.Tooltip("container4", "#trigger4");
    </script>

  </ul>
  <div class="TabbedPanelsContentGroup">
   <div class="TabbedPanelsContent">Tab 1 tartalom</div>
   <div class="TabbedPanelsContent">Tab 2 tartalom</div>
   <div class="TabbedPanelsContent">Tab 3 tartalom</div>
   <div class="TabbedPanelsContent">Tab 4 tartalom</div>
  </div>
 </div> <!-- end fules -->

<script language="JavaScript" type="text/javascript">
  var tp1 = new Spry.Widget.TabbedPanels("fules");
</script>
</body>
</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:
<!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;utf-8" />
  <title>Spry Tabbbed Panel + tooltip</title>
</head>
<body>
  <div class="TabbedPanels" id="fules">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" id="trigger1">
        &deg;C+pH
        <div class="tooltipContent" id="container1">Hőmérséklet és pH mérés</div>
      </li>
      <li class="TabbedPanelsTab" id="trigger2">
        sCl
        <div class="tooltipContent" id="container2">Szabad Clor mérés</div>
      </li>
      <li class="TabbedPanelsTab" id="trigger3">
        Cl 1_2
        <div class="tooltipContent" id="container3">Szabad és Kötött Clor mérés</div>
      </li>
      <li class="TabbedPanelsTab" id="trigger4">
        Egyedi
        <div class="tooltipContent" id="container4">Rendkívüli mérések</div>
      </li>
    </ul>
    <div class="TabbedPanelsContentGroup">
      <div class="TabbedPanelsContent">Tab 1 tartalom</div>
      <div class="TabbedPanelsContent">Tab 2 tartalom</div>
      <div class="TabbedPanelsContent">Tab 3 tartalom</div>
      <div class="TabbedPanelsContent">Tab 4 tartalom</div>
    </div>
  </div> <!-- end fules -->
  <script language="JavaScript" type="text/javascript" src="http://labs.adobe.com/technologies/spry/widgets/tabbedpanels/SpryTabbedPanels.js"></script>
  <script src="http://labs.adobe.com/technologies/spry/widgets/tooltip/SpryTooltip.js" type="text/javascript"></script>
  <script language="JavaScript" type="text/javascript">
    var tp1 = new Spry.Widget.TabbedPanels("fules");
    var tooltip1 = new Spry.Widget.Tooltip("container1", "#trigger1");
    var tooltip2 = new Spry.Widget.Tooltip("container2", "#trigger2");
    var tooltip3 = new Spry.Widget.Tooltip("container3", "#trigger3");
    var tooltip4 = new Spry.Widget.Tooltip("container4", "#trigger4");
  </script>
</body>
</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.