PHP + MySQ + Jquery (simplemodal-osx)

Cibiņš · December 16, 2010

Tātad integrēju lapā smuku fīču. Un kautkā nesanāk tā kā vēlos, nu reāli jau var bet negribas ka ir liels penteris lapā kas kā jau jūs paši ziniet - kosmiski nobremzē lapu.

Tātad integrēju osx simplemodal fīču, simplemodalu darbina jquery.

Šeit ir simplemodal funkcija: http://paste.php.lv/5fa98a74fb2c25cf9fb59d5067a27a82?lang=php

Un šeit ir simplemodal css nosacījumi: http://paste.php.lv/775058f1d9d88e8a77628cfb8c7ed014?lang=php

Links, kuram piesaistīts tas simplemodals ir

<div class="productBuffer">
               	<a class="productImage osx-1" href="#">
                   	<img src="bilde.jpg" width="229" height="167" alt="bilde" />
                   </a>
               	<a class="productDescription osx-1" href="#">
                   	Meesls 1<br />
               		<span style="font-size: 9px;">Mazinjshtekstinjsh</span>
                   </a>
               </div>

Pats simplemodals, kurš atveras nospiežot uz linka:

<div id="osx-modal-content-1" style="width: 600px;">
		<div id="osx-modal-title">Vaks</div>
		<div class="close">
           	<a href="#" class="simplemodal-close">x</a>
           </div>
		<div id="osx-modal-data">
			<h2>Hello! I'm SimpleModal! 1</h2>
			<p>SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. 1</p>
			<p>SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.. 1</p>
			<p>As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. With a handful options, 2 custom callbacks and some styling, you have a visually appealing dialog that is ready to use! 1</p>
			<p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
		</div>
	</div>

Jautājums-kā var dabūt lai simplemodal funkcija un css failā norāde uz dizaina nosacījumiem būtu viena uz visiem linkiem lai nav jāģenerē garš penteris katram linkam atsevišķi??

Klasi osx-cipars un id osx-modal-content-cipars domājams ģenerēd no db pēc id kur cipars ir skaitlis.

Arī pašu simplemodal teksta laukumu vēlos tā lai tajā logā atveras katram linkam savs teksts.

Ceru ka ir saprotams.

Piemērs šeit: http://www.ericmmartin.com/projects/simplemodal-demos/ OSX Style Dialog

Edited December 16, 2010 by Cibiņš

Blitz · December 16, 2010

CSS #blabla partaisi par klasi .babla un noradi tam modal kodam lai lieto css klasi

un taa visiem tiem elementiem ko redzi css failā. Partaisi par klasi, un attiecigajam elementam kodā pieliec šo klasi.

Šobrīd tur stils ir pieškirts uz elementa ID, kurš reali var būt tik viens lapā. Klasi var pieķirt neierobežotam skaitam elementu.

Edited December 16, 2010 by Blitz

Cibiņš · December 16, 2010

CSS #blabla partaisi par klasi .babla un noradi tam modal kodam lai lieto css klasi

<div id="osx-modal-content-1" class="blabla" style="width: 600px;">

un taa visiem tiem elementiem ko redzi css failā. Partaisi par klasi, un attiecigajam elementam kodā pieliec šo klasi.

Šobrīd tur stils ir pieškirts uz elementa ID, kurš reali var būt tik viens lapā. Klasi var pieķirt neierobežotam skaitam elementu.

Nu ar to klasi okee bet tu taču neģenerēsi piemēram 100 ierakstiem katram savu to jquery funkciju pareizi? Ja liksim tur tapat klasi klāt tāpatās tā funkcija jāģenerē katram savu un galu galā tur būs garš penteris. :( Jo links tad nesapratīs kurš tas logs jāatver un kāda informācija jāatspoguļo logā. Tie linki atvērs tikai vienu logu, teiksim ja ir links 1, links 2 un links 2, un modal logā ir "teksts 1", "teksts 2", "teksts 3". Katrs teksts tiek atvērts ar savu linku. tātad vienam hrefam ir piešķirta klase osx-1 un tas atver logu ar "teksts 1"..bet tā viņš atvērs tikai vienu tekstu visi linki nevis katram savs, tātad vajag to funkciju kautkā dabūt lai nav ķēpa. a kā klase tur neder un nekāda starpība nav vai liec klasi vai ID tāpat tur jābūt ir kaut kam unikālam lai varētu noteikt, kuru logu ar kādu info ir jāatver.

Edited December 16, 2010 by Cibiņš

Blitz · December 16, 2010

Funkcijā arī nomaini # pret .

Tie ir css selektori tur, taka strada tieši tā pat.

Cibiņš · December 16, 2010

Needeeerrrrrrrrrrrrrrrrrr!!!!!!!!!!!!!

Tad sanāks tā:

<div class="productBuffer">
                       <a class="productImage osx-1" href="#">
                       <img src="bilde.jpg" width="229" height="167" alt="bilde" />
                   </a>
                       <a class="productDescription osx-1" href="#">
                       Meesls 1<br />
                               <span style="font-size: 9px;">Mazinjshtekstinjsh</span>
                   </a>
               </div>



<div id="osx-modal-content-1" style="width: 600px;">
                       <div id="osx-modal-title">Vaks</div>
                       <div class="close">
               <a href="#" class="simplemodal-close">x</a>
           </div>
                       <div id="osx-modal-data">
                               <h2>Hello! I'm SimpleModal! 1</h2>
                               <p>SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. 1</p>
                               <p>SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.. 1</p>
                               <p>As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. With a handful options, 2 custom callbacks and some styling, you have a visually appealing dialog that is ready to use! 1</p>
                               <p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
                       </div>
               </div>


<div class="productBuffer">
                       <a class="productImage osx-2" href="#">
                       <img src="bilde1.jpg" width="229" height="167" alt="bilde1" />
                   </a>
                       <a class="productDescription osx-2" href="#">
                       Otrs teksts<br />
                               <span style="font-size: 9px;">te ir otra linka teksts</span>
                   </a>
               </div>



<div id="osx-modal-content-2" style="width: 600px;">
                       <div id="osx-modal-title">Vaks</div>
                       <div class="close">
               <a href="#" class="simplemodal-close">x</a>
           </div>
                       <div id="osx-modal-data">
                               <h2>Test text</h2>
                               <p>Teeeeeeeeeeeeeeeeeeeeeeeeeeeeekkksts</p>
                               <p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
                       </div>
               </div>

Respektīvi uzspiedīšu uz šī linka:

<div class="productBuffer">
                       <a class="productImage osx-2" href="#">
                       <img src="bilde1.jpg" width="229" height="167" alt="bilde1" />
                   </a>
                       <a class="productDescription osx-1" href="#">
                       Otrs teksts<br />
                               <span style="font-size: 9px;">te ir otra linka teksts</span>
                   </a>
               </div>

man atvērsies


<div id="osx-modal-content-1" style="width: 600px;">
                       <div id="osx-modal-title">Vaks</div>
                       <div class="close">
               <a href="#" class="simplemodal-close">x</a>
           </div>
                       <div id="osx-modal-data">
                               <h2>Hello! I'm SimpleModal! 1</h2>
                               <p>SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. 1</p>
                               <p>SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.. 1</p>
                               <p>As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. With a handful options, 2 custom callbacks and some styling, you have a visually appealing dialog that is ready to use! 1</p>
                               <p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
                       </div>
               </div>

ar tekstu

<h2>Hello! I'm SimpleModal! 1</h2>
                               <p>SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. 1</p>
                               <p>SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.. 1</p>
                               <p>As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. With a handful options, 2 custom callbacks and some styling, you have a visually appealing dialog that is ready to use! 1</p>

nevis


<div id="osx-modal-content-2" style="width: 600px;">
                       <div id="osx-modal-title">Vaks</div>
                       <div class="close">
               <a href="#" class="simplemodal-close">x</a>
           </div>
                       <div id="osx-modal-data">
                               <h2>Test text</h2>
                               <p>Teeeeeeeeeeeeeeeeeeeeeeeeeeeeekkksts</p>
                               <p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
                       </div>
               </div>

ar tekstu

                               <h2>Test text</h2>
                               <p>Teeeeeeeeeeeeeeeeeeeeeeeeeeeeekkksts</p>

Tāpēc jau tur ir jābūt tām unikālajām klasēm un id!

Uz to norāda linkā

<a class="productImage osx-1" href="#">

atver

<div id="osx-modal-content-1" style="width: 600px;">

ar tekstu

<h2>Hello! I'm SimpleModal! 1</h2>
                               <p>SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. 1</p>
                               <p>SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.. 1</p>
                               <p>As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. With a handful options, 2 custom callbacks and some styling, you have a visually appealing dialog that is ready to use! 1</p>

vai

<a class="productImage osx-2" href="#">

atver

<div id="osx-modal-content-2" style="width: 600px;">

ar tekstu

<h2>Test text</h2>
                               <p>Teeeeeeeeeeeeeeeeeeeeeeeeeeeeekkksts</p>

Edited December 16, 2010 by Cibiņš

Cibiņš · December 16, 2010

A nee veel krutaak, atveras abi logi tad valjaa vispaar..galigi garaam. Klase nekadi tur neder :/

Funkcijaa taksh noraada uzspiezhot kuru linku atveersies kursh logs. Ja nomainisim uz klasi tad abi logi atversies vienlaikus tas neder. Vajag lai ir viens logs uzspiezhot vienu linku atversies viens logs ar vienu tekstu un uzspiezhot otru-atversies otrs ar otru tekstu. nevis abi vienlaikus :D :/

Edited December 16, 2010 by Cibiņš

Blitz · December 16, 2010

Nja, tagad papetiju siikaak.

Teoretiski jau to jquery parrakstit varetu, pec click chekot kurs links ir noklikskinats, tad ja linkam piemeram ir pieskirts rel="logs1" ar attiecigaa loga id, tad turpmāk kur $("#osx-modal-content-1")... tur padot so id (logs1).

Bet lai sikaka ko pateiktu, jarokas caur jquery dokumentaciju, neesu daudz ar vinu cakarejies.

Cibiņš · December 16, 2010

Nja, tagad papetiju siikaak.

Teoretiski jau to jquery parrakstit varetu, pec click chekot kurs links ir noklikskinats, tad ja linkam piemeram ir pieskirts rel="logs1" ar attiecigaa loga id, tad turpmāk kur $("#osx-modal-content-1")... tur padot so id (logs1).

Bet lai sikaka ko pateiktu, jarokas caur jquery dokumentaciju, neesu daudz ar vinu cakarejies.

Šādi vajadzētu būt (id.zip);

Šādi ir aplami, ja padod klasi (class.zip)

Kukuu nezin neviens kā atrisināt lai viena funkcija būtu visiem tiem linkiem un katram parādītos savs teksts tā kā ir id.zip ???

id.zip

class.zip

Edited December 16, 2010 by Cibiņš

briedis · December 16, 2010

Šitāda veida topiki ir paši garlaicīgākie un iedziļināties, kur nu vēl palīdzēt galīgi negribas. Kāpēc? Tāpēc ka tu paņem kaut kādu gatavu produktu, nelasi manuāli kā to uzstādīt, kā tas strādā, un prasi, lai citi to dara tavā vietā. Pie tam, paņem kaut kādu galīgi nepopulāru produktu, kuru neviens nepārzin. Ko darīt? Doties uz produkta lapu, meklēt dokumentāciju, meklēt vietējo forumu, vai sūti pašam izstrādātājam savu jautājumu.

Sign In

PHP + MySQ + Jquery (simplemodal-osx)

Recommended Posts

Cibiņš

Link to comment

Share on other sites

Blitz

Link to comment

Share on other sites

Cibiņš

Link to comment

Share on other sites

Blitz

Link to comment

Share on other sites

Cibiņš

Link to comment

Share on other sites

Cibiņš

Link to comment

Share on other sites

Blitz

Link to comment

Share on other sites

Cibiņš

Link to comment

Share on other sites

briedis

Link to comment

Share on other sites

Join the conversation

Browse

Activity