UI dialog

[Aiviss]

Tātad šis ir mana Jquery UI doaloga kods. VISS STRĀDĀ (vismaz uz populārākajām pārlūkprogrammām).

Taču vēlētos dzirdēt Jūsu teikumus, kur es feiloju - jo stipri šaubos, ka viss ir OK - 100% kaut ko vismaz var optimizēt.

 

Ja nav grūti pakomentē.

 

       	$(document).ready(function() { 

                                           	// atveram 
                                           	$('#ui').click(function() {

                                               	$('.ui-widget-overlay').fadeIn(300);


                                               	var href = $(this).attr("href");

                                               	var width = $(window).width() / 2;

                                               	var DIVwidth = $(href).width() / 2;


                                                   	$(href).fadeIn(300);   		

                                                   	$(href).css("top","100px");
                                                   	$(href).css("left", width - DIVwidth);

                                           	});



                          					// aizveram
                                           	$('.close').click(function() {

                                               	$('.ui-widget-overlay').fadeOut(300);

                                               	var title = $(this).attr("name");

                                               	$(title).fadeOut(300);

                                           	});



                          					// pogas "Aizvērt" hover
                          					$(".close").hover(

                                               	function () {
                                                 	$(this).css("background","url(images/closeHover.png)");
                                               	},

                                               	function () {
                                                 	$(this).css("background","url(images/close.png)");
                                               	}

                                             	);

});

 

 

<div id="wrap">
   	<a id="ui" href="#kaste">Start kaste</a>


</div><!--wrap -->



<div class="ui-widget-overlay"></div>

<div id="kaste" class="dialog">
   	<div class="close" name="#kaste"></div>

</div>

Edited April 15, 2011 by Aiviss

[codez]

Kas vainas iebūvētajam dialogam?

$('<div>').dialog({
 title:'abc',
 autoOpen:true,
 modal:true,
 width:400
}).html('Hello world');

 

 

P.S. paspēlēties ar to var šeit: http://jsfiddle.net/qpErq/

 

var arī ar pogām: http://jsfiddle.net/ys8sA/

Edited April 15, 2011 by codez

[Aiviss]

dizains - bet to protams ar CSS noteikt var izmainīt....

 

bet Kāpēc mainīt, ja piemēram mans variants darbojās un ir jau gatavs? (protams, kā jau minēju varbūt mans variants ir nekvalitatīvāks..., ko arī cen\sos noskaidrot...)

[codez]

Protams, ka dizainu var nomainīt, bet, ja nu grib mācību dēļ apgūt, tad tavs variants ir ļoti šķībs:

1)Ko tu darīsi, ja tev vajadzēs vēl vienu dialogu? rakstīsi visu funkcionalitāti otreiz? Tāpēc vajag veidot OOP stilā, lai funkcionalitāti varētu piešķirt neierobežotam skatiam objektu.

2)jqueryUI ir ļoti labs widget factory, iesaku izmantot to.

Primitīvs piemērs būtu: http://jsfiddle.net/JgMSw/

 

(function($){
   $.widget("ui.mydialog", {
       options:{
           title:"title",
           width:"300px",
           height:"100px"
       },
       _create:function(){
           var self=this;
           var el=this.element;
           el.addClass('ui-widget-overlay mydialog');
           el.width(this.options.width);
           el.height(this.options.height);

           $('<span class="close">close</span>').click(function(){
               self.hide();
           }).appendTo(el);
       },
       hide:function(){
           this.element.hide();
       }
   });
})(jQuery);

$('#d1').mydialog({width:"150px"});

Edited April 15, 2011 by codez

[Aiviss]

1)Ko tu darīsi, ja tev vajadzēs vēl vienu dialogu?

 

Jā to tikai pamanīj vēlāk - katrā gadījumā tas ir labots.

 

-----

Rezumējumu ieguvu - lietot jau iebūvēto, ja tas iespējams.

 

Katrā gadījumā - PALDIES!

[daGrevis]

Don't Reinvent The Wheel, Unless You Plan on Learning More About Wheels...

[Aiviss]

Paldies, ka atgādināji.

----

Bet gluži šī koda rakstīšanas mērķis nebija izgudrot riteni no jauna.

[foxsk8]

Personīgi no piemēra, laikam tev tur kopējot strukūra šķībi aizgājusi, kods nav nolikts pakāpeniski viena zem otra, kā nu šis saucās code folding, vai kā tur bija.

 

Nākošais, iekrita acīs tas, ja tu izmanto eng nosaukumus savā kodā, klasēs, tad dari to visur, nevis uzliec kaut kādu #kaste, tad jau labāk uzlikt #block, tā būtu vismaz loģiskāk.

 

Kas attiecās uz JQ UI paku, tad viņa ir samērā smagnēja, lai izveidotu vienu modulāro logu, šaubos vai vajadzētu ķēpāties ar pluginiem, kas visu tikai piegruzī pilnu.

[Aiviss]

jā tas notika pārkopējot...

---

ņemšu vērā valodu lietojumus - (parasti to ievēroju - šoreiz piemirsās)

---

 

Un kādas tad ir domas par pašu kodu? Viņš kaut kam vispār der - respektīvi - šādu kodu drīkst lietot? (drīkst jāsaprot ar to vai tas ir pilnībā darbspējīgs un spēs savu uzdevumu pildīt vienmēr un visur pie pareiziem apstākļiem... kaut kā tā).

[foxsk8]

Tāpēc jau tā visa ir programmēšana. Vispār ir jāatcerās, ka tāda ideāla koda, jeb varianta nav, nebūs, nepastāv (tīri teorētiski ņemot).

 

10 koderi šo visu uzrakstītu tā pat pa savam, un tas skaitītos pareizi.

 

Nu ja mēs te sāktu meklēt ideālo variantu visādām lietām, beigās mēs attaptos paši pie sava javascript freimworka.

 

Ja nemaldos biedrs azazul, aka mefisto kaut ko tādu būvēja.