modalControl.js

Bootstrap modal kontrolü içerisine iframe ile bir başka sayfayı yüklemek, ve bu sayfadan gelen bir mesajı main sayfa içersinde bir html kontrole değer olarak atamak fikrinden çıktı herşey. Çok da büyütülecek bi plug-in değil tabi ki de ama iş görür, zaman kazandırır.

Kullanım case’lerinden bikaç örnek verecek olursak; benim son projemde bir çok arayüzde kullanıcının işlem yaptığı data üzerinde benzer özellikte operasyonlar yürütülüyor. Mesela, üniversitemizin satın alma süreçlerinin yürütüldüğü ve yönetildiği bu arayüzlerde, ilgili malzemeye ilişkin mali bir kod seçilmesi gerekiyor. Ya da satın alma birimleri tarafından ön tanımlanmış malzeme listelerinden malzeme seçilmesi gibi benzer operasyonlar yapılmakta. Normalde bu operasyonları açtığımız bir modal içerisinden yürütüyoruz. Tabi bu benzer operasyonlar birbirinden farklı tam 4 arayüzde de var. Sonuç olarak işimizi kolaylaştıracak bir yapı düşündük ve koyulduk işe.

Öncelikle plug-in’in option’larını belirledik. Burada callback function’lardan ve ayarlardan bahsediyoruz lütfen pls. Modal içersine bir ifame çakacağız önce, sonrasında option’dan gelen url’i vereceğiz source’una. Olaylar olaylar. Neyse ben direkt mevzuya gireyim de okuması anlaması daha güzel olsun.

Initializing


$('#hiddenFieldId').modalControl({
selected: [{
text: 'aydoganf@itu.edu.tr',
value: 'magic'
}],
modal: {
title: 'Seçiniz 1',
url: 'http://local.site/service/get-list.aspx',
css: '',
actionButton: {
icon: 'fa fa-check',
text: 'Tamam'
},
cancelButton: {
text: 'İptal'
},
loadIframeEveryCall: false
},
selectionButton: 'Seç',
allowMultipleSelection: true,
});

Options


selected
Type: Array
plug-in initialize edilirken seçili olarak eklemek istediğimiz object array.
Format:
selected: [{ text:"selected item text", value:"selected item value" }, {}...]


modal
Type: Object
Modal ayarlarını içeren object.
Format:
modal: {
title: 'Seçiniz',
url: undefined,
css: '',
getSelectedMethod: 'getSelected',
actionButton: null,
cancelButton: null,
loadIframeEveryCall: false
}


modal.title (default: ‘Seçiniz’)
Type: String
Açılacak olan modal’ın title text değerini tutar.


modal.url (default: undefined)
Type: String
Modal içerisinde bulunan iframe’in içine yüklemek istediğimiz source url değeridir.


modal.css (default: ”)
Type: String
Modal içersinde modal-dialog css class’ına sahip div elemanına eklenmek istenen css class text değerini tutar. Özellikle large size modal açabilmek için düşünülmüştür.


modal.actionButton (default: null)
Type: Object, String
Modal action butonunu tanımıdır. Icon eklemek ve text değerini belirlemek için kullanılır.
Format:
actionButton: { icon: 'fa fa-check ', text: 'Tamam', css: 'btn btn-primary' }
actionButton: 'Tamam' // info: default css: btn btn-primary
actionButton: null // buton initialize edilmez


modal.cancelButton (default: null)
Type: Object, String
Modal close butonu tanımıdır.  Icon eklemek ve text değerini belirlemek için kullanılır.
Format:
cancelButton: { icon: 'fa fa-trash', text: 'İptal', css: 'btn btn-default' }
cancelButton: 'Kapat' // info: default css: btn btn-default
cancelButton: null // buton initialize edilmez


modal.loadIframeEveryCall (default: false)
Type: Boolean
Modal her açılışında iframe source’u yüklenmeli midir değerini tutar.


selectionButton (default: ‘Seç’)
Type: Object, String
Modal’ı açmak için kullanılan buton için icon ve text değerleri tutar.
Format:
selectionButton: { icon: 'fa fa-plus', text: 'Seç' }
selectionButton: 'Seç'


allowMultipleSelection (default: false)
Type: Boolean
Çoklu seçim özelliğini belirler.


onSelectionAdded (default: undefiend)
Type: Function
Seçim işlemi tamamlandıktan sonra fırlatılacak olan fonksiyondur.


onModalShown (default: undefiend)
Type: Function
Modal açıldığında fırlatılacak olan fonksiyondur.


onIframeLoadCompleted (default: undefiend)
Type: Function
Iframe yüklenmesi tamamlandığında fırlatılacak fonksiyondur.


onSelectionRemoved (default: undefiend)
Type: Function
Seçim kaldırma işlemi tamamlandığında fırlatılacak fonksiyondur.



Events


modalControl(“getSelectedValue”) (returns: Array)
Kontrole aite seçilmiş değerleri array olarak döner.
Return format:
[]
[{ text: "selected item text", value: "selected item value" }, {}..]


modalControl(“setSelectedValue”, arg) (void)
Kontrole seçilmiş object eklemek için kullanılır.
@param arg:
Type: Array
[{ text: "selected item text", value: "selected item value" }, {}..]


modalControl(“clearControl”) (void)
Kontrole eklenmiş bütün object’leri siler.



Buradan indirebilirsin kodu 🙂
Tenks tatlış..

Etiket(ler): , .Yer işareti koy Kalıcı Bağlantı.

Yorumlar kapatıldı.