ÇANKAYA uɐɥɹO: Javascript

Javascript etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

1 Ekim 2018 Pazartesi

javascript ile dropdown secimine göre alan gösterimi

@Html.DropDownList("optionId", new SelectList(SelectListData), "Select an option")

@Html.TextBox("controlId")

<script>
  $("#optionId").on("change", function () {
    if ($("#optionId option:selected").index() == 0) {
      $("#controlId").hide();
    } else {
      $("#controlId").show();
    }
  });
</script>

7 Temmuz 2014 Pazartesi

JavaScript olaylar (Event) ve açıklamaları

JavaScript olaylar ve açıklamaları

onclick	Fareyle tıklamayı ifade eder.
ondblclick	Fareyle çift tıklamayı ifade eder.
onmouseover	Farenin imleciyle üzerine gelmeyi ifade eder.
onmouseout	Farenin imlecini üzerinden çekmeyi ifade eder.
onmousedown	Fare düğmesine basmayı ifade eder.
onmouseup	Fare düğmesini bırakmayı ifade eder.
onload	Sayfanın yüklenmesini ifade eder.
onunload	Sayfanın kapatılmasını ifade eder.
onchange	Form aracının değişmesini ifade eder.
onsubmit	Form bilgilerinin gönderilmesini ifade eder.
onreset	Form bilgilerinin silinmesini ifade eder.
onselect	Form aracının seçilmesini ifade eder.
onblur	Form aracının pasif hale geçmesini ifade eder.
onfocus	Form aracının aktif hale geçmesini ifade eder.
accesskey	İstenen karakterin girilmesini ifade eder.
tabindex	Nesnelerin işlem sıralamasını numaralandırır.
onkeydown	Tuşun basılmasını ifade eder.
onkeyup	Tuşun salınmasını ifade eder.
onfocus	Tuşun basılıp salınmasını ifade eder.

Bu olaylar yaratıcı web tasarımcılar için yeterli değildir. Başka olaylar oluşturmak için event (olay) komutlarından yararlanılır. Olay komutlarının önüne event. kodu getirilir. Önemli Not: Bu komutlar sadece IE gözatıcıları tarafından desteklenmektedir.

Sağ Tıklama, Sol Tıklama

Fareyle sağ tıklanıldığında, bir fonksiyon çağırmak için button (düğme) olay komutu kullanılır. event.button şeklinde yazılır ve sol tıklanırsa 1, sağ tıklanırsa 2 değerini alır.

İmlecin Koordinatları

İmlecin sayfadaki konumuna göre kod yazmak isteyebiliriz. İmlecin hangi yatay ve düşey koordinatlarda olduğunu belirlemek için clientX, clientY veya offsetX, offsetY veya x, y olay komutlarından yararlanılır. Kısa bir uygulama yapalım:

Verdiğimiz diğer kodları da siz deneyin, aynı sonuca ulaşacaksınız. Bu kodların hepsi imlecin, pencerenin sol üst köşesine olan yatay ve düşey mesafeyi piksel cinsinden vermektedir. Eğer pencerenin değil de ekranın sol üst köşesine olan yatay ve düşey mesafeyi edinmek istiyorsak, screenX, screenY komutlarını kullanırız.

2 Nisan 2014 Çarşamba

JavaScript MVC Örnek

Öncelikle Sayfamıza button ekliyoruz id'si "add-friend" olarak tanımlıyoruz. Daha sonra girilen verilerin gösterimin yapılacağı bir list tanımı yapıyoruz id'si "friends-list" atamasını yapıyoruz.

sayfamıza aşağıda yer alan jsicript kütüphanelerini ekliyoruz :
script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"
script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"
script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"

Javasipt Kodu :

(function ($) {

Friend = Backbone.Model.extend({
//Create a model to hold friend atribute
name: null
});

Friends = Backbone.Collection.extend({
//This is our Friends collection and holds our Friend models
initialize: function (models, options) {
this.bind("add", options.view.addFriendLi);
//Listen for new additions to the collection and call a view function if so
}
});

AppView = Backbone.View.extend({
el: $("body"),
initialize: function () {
this.friends = new Friends( null, { view: this });
//Create a friends collection when the view is initialized.
//Pass it a reference to this view to create a connection between the two
},
events: {
"click #add-friend": "showPrompt",
},
showPrompt: function () {
var friend_name = prompt("Who is your friend?");
var friend_model = new Friend({ name: friend_name });
//Add a new friend model to our friend collection
this.friends.add( friend_model );
},
addFriendLi: function (model) {
//The parameter passed is a reference to the model that was added
$("#friends-list").append("

" + model.get('name') + "

");
//Use .get to receive attributes of the model
}
});

var appview = new AppView;
})(jQuery);

Sayfalar