Wrangle

Demo sayfasını ilk incelediğimde yine bildiğimiz lightbox sanmıştım. Bilirsiniz resmi tıklayınca arka plan kararır ve resim biraz daha büyük bir şekilde görünür. Demo sayfasında eklenti açısından gözüme ilişen tek şey bu olmuştu. Böyle anlamamın sebebi ise Wrangle uygulaması ile beraber Reveal uygulamasının kullanılmasıydı. Wrangle’nin lightbox tarzı çalışmalar ile uzaktan yakından bir alakası yok. Wrangle’nin kullanım amacı nesnelerin mouse yada dokunarak daha kolay seçilebilmesidir. Android cihazlardaki klavye üzerinde parmağınızı basılı tutup kelimeler üzerinde gezdirdiğinizde en uygun kelimeyi bulup yazı ekranına yazma gibi bir özelliği vardır. Wrangle’nin kullanımı da aynı bu şekilde.

Mouse ile seçme olayını bilirsiniz ve mutlaka kullandığınız bir özelliktir. Bilgisayarın masa üstünde bile kullanılan bir özelliktir. Shift tuşunu basılı tutup seçmek istediklerinizi kare içine aldığınızda topluca işlem yapabilmeniz mümkün yada ctrl tuşuna basıp tek tek seçerek toplu işlem yapabilmek mümkün. Websitelerini örnek gösterecek olursak eğer toplu arkadaşlık istekleri kabul etme yada mouse ile tek tek tıklayarak belirli kişileri seçip onaylama yada bu tarz işlemler için kullandığımız bir özelliktir. Kendim en çok nefret ettiğim özelliklerden biridir ve en çok kullandığım yer ise Twitter’da takip etme işlemidir. Halbuki mouseyi sürüklesek çizgi gibi çok daha rahat olacak bizler için. Hem zamandan kazanırız hemde boş boş sıkıntı çekmeyiz. Tabi Twitter’in bu tür özellikler kullanmamasının nedeni kullanıcı memnuniyeti. Bizi düşünen yok tabi spamdan farkımız yok 🙂

Geoff Kimball tarafından geliştirilen Wrangle bu tür konularda kullanıcılarınıza çok büyük kolaylık sağlayacak türden bir örnektir. Her türlü element seçmede kullanılabilen Wrangle resimde gördüğünüz gibi üyelerinizin seçmek istedikleri elementlerin üzerinden mouseyi tutup gezdirmeleri yeterli olacaktır. Mouse ile çalışabildiği gibi dokunmatik cihazlar üzerinden dokunarak ta kullanılabiliyor.

Demo sayfasına ilk ziyarette benim yaptığım gibi hata yapmayın. Sol üst tarafta Start Demo butonuna bastıktan sonra mouseyi sol yada sağ tıklayıp resimlerin üzerinden gezdirdiğinizde mouseyi takip eden bir çizgi göreceksiniz. O çizginin üstünden geçtiği bütün resimler mouse ile tek tek tıklanmış gibi seçili bir halde dururlar. Zaten dikkat ederseniz eğer resim çerçeve renginin kırmızıya dönüştüğünü görebilirsiniz. Sadece resimlerde kullanılan bir örnek değil Wrangle. Önceki satırlarda da belirttiğim gibi bütün html elementler ile kullanabilirsiniz.

Download

Demo

Kullanım

Head etiketleri arasına eklemeniz gereken bölümler.

Js adresleri :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 <script src="jquery.wrangle.js" type="text/javascript"></script>

JavaScript :

<script type="text/javascript">
 $(window).on('load', function(){
 var options = {
 lineColor: 'rgba(255,0,0,0.75)',
 lineWidth: 5,
 selectToggle: false,
 }
 var actions = {
 'delete': function(items) {
 items.remove();
 return false;
 },
 'reverse': function(items) {
 var rev = $.makeArray(items);
 rev.reverse();
 console.log(rev);
 items.replaceWith();
 }
 }
 $(document).wrangle(options, actions);
 });
 </script>

Body etiketleri arasına eklemeniz gereken bölüm.

Html :

İçerik listeniz UL yada OL olmalıdır. Seçilecek olan içeriklerde LI elementleri arasında dizilmelidirler.

<div data-selectarea>
 <canvas data-canvas></canvas>
 <ul data-list>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 </ul>
</div>