Mouse ile çerçeve içerisindeki içeriği tutup sürükleyin
Adım 1 : Aşağıdaki kodu <head> </head> tagları arasına yerleştirin
<!-- http://mintik.com kod baslangici --> <head> <title>iPhone Tarz1 Mouse ile 0�erik Kayd1rma</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> html{color:#000;background:#FFF;} body,li{margin:0;padding:0;} li{list-style:none;} #kay_mintikcom { border:1px solid #000; border-top:0; } #kay_mintikcom-icerik li { border-bottom: 1px solid #ccc; padding: 8px; font-size: 140%; font-weight: bold; background-color:#fff; } #kay_mintikcom-icerik li { *zoom:1; } #kay_mintikcom-icerik ul { *zoom:1; } #kay_mintikcom-ust { background-color:#6d83a1; border:1px solid #000; border-bottom:#2d3033; height:44px; background: -webkit-gradient( linear, left top, left bottom, from(#d8dee6), color-stop(0.01, #b0bccc), color-stop(0.49, #889bb3), color-stop(0.50, #8094ae), to(#6d83a1) ); } #kay_mintikcom-ust h1 { color: #fff; margin:0; padding:10px 0; text-align:center; font-size:150%; font-weight:bold; text-shadow: 0 -1px 0 rgba(0,0,0,0.7); } #kay_mintikcom-kap { cursor: move; margin: 0; width: 450px; float: none } </style> <script src="http://mintik.com/wp-content/uploads/2011/07/yui-min.js" type="text/javascript" charset="utf-8"></script> </head> <!-- http://mintik.com kod sonu -->
Adım 2 : Kaydırılabilir İçerik örneğini Koymak İstediğiniz Yere Aşağıdaki Kodu Yerleştirin
<!-- http://mintik.com kod baslangici --> <div id="kay_mintikcom-kap"> <div id="kay_mintikcom-ust"> <h1>Kayd1r1labilir 0�erik</h1> </div> <div id="kay_mintikcom-icerik" class="mintik.com"> <ul> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/07/yui_library.jpg" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/07/akrepkesilmis.png" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/07/2ctrla.png" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/07/orjinalresim.png" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/07/aslan.jpg" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/07/melek_sag.png" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/07/ayrilik_acisi.jpg" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/plaj.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/kumsalsahil.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/kumsal.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/karlidag.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/denizgece.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/gunbatimi.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/gunbatimi.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/denizdag1.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/denizdag.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/deniz.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/1-74.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/05/jquery.png" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/05/logoMysql.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/04/anne_bebek.jpg" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/04/medal_of_honor.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/04/motorola-FIGHT-NIGHT-ROUND-game.jpg" alt="" height="205" width="327" border="0"></a></li> </ul> </div> <div id="kay_mintikcom-ust"> <h1>Mintik.com</h1> </div> </div> </div> <script type="text/javascript" charset="utf-8"> YUI().use('scrollview', function(Y) { var scrollView = new Y.ScrollView({ id: "scrollview", srcNode: '#kay_mintikcom-icerik', height: 310, flick: { minDistance:100, // her kaydirmada atlanacak olan mesafe mintik.com minVelocity:1.3, // kaydirma hiz ayari mintik.com axis: "y" } }); scrollView.render(); var content = scrollView.get("contentBox"); content.delegate("click", function(e) { if (Math.abs(scrollView.lastScrolledAmt) > 2) { e.preventDefault(); Y.log("Link Davranisi Bastirildi") } }, "a"); content.delegate("mousedown", function(e) { e.preventDefault(); }, "a"); }); </script> </body> </html> <!-- http://mintik.com kod sonu -->
Adım 3 : Kodların birleştirilmiş hali
<!-- http://mintik.com kod baslangici --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>iPhone Tarz1 Mouse ile 0�erik Kayd1rma</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> html{color:#000;background:#FFF;} body,li{margin:0;padding:0;} li{list-style:none;} #kay_mintikcom { border:1px solid #000; border-top:0; } #kay_mintikcom-icerik li { border-bottom: 1px solid #ccc; padding: 8px; font-size: 140%; font-weight: bold; background-color:#fff; } #kay_mintikcom-icerik li { *zoom:1; } #kay_mintikcom-icerik ul { *zoom:1; } #kay_mintikcom-ust { background-color:#6d83a1; border:1px solid #000; border-bottom:#2d3033; height:44px; background: -webkit-gradient( linear, left top, left bottom, from(#d8dee6), color-stop(0.01, #b0bccc), color-stop(0.49, #889bb3), color-stop(0.50, #8094ae), to(#6d83a1) ); } #kay_mintikcom-ust h1 { color: #fff; margin:0; padding:10px 0; text-align:center; font-size:150%; font-weight:bold; text-shadow: 0 -1px 0 rgba(0,0,0,0.7); } #kay_mintikcom-kap { cursor: move; margin: 0; width: 450px; float: none } </style> <script src="http://mintik.com/wp-content/uploads/2011/07/yui-min.js" type="text/javascript" charset="utf-8"></script> </head> <div id="kay_mintikcom-kap"> <div id="kay_mintikcom-ust"> <h1>Kayd1r1labilir 0�erik</h1> </div> <div id="kay_mintikcom-icerik" class="mintik.com"> <ul> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/07/yui_library.jpg" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/07/akrepkesilmis.png" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/07/2ctrla.png" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/07/orjinalresim.png" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/07/aslan.jpg" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/07/melek_sag.png" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/07/ayrilik_acisi.jpg" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/plaj.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/kumsalsahil.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/kumsal.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/karlidag.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/denizgece.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/gunbatimi.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/gunbatimi.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/denizdag1.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/denizdag.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/deniz.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/06/1-74.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/05/jquery.png" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/05/logoMysql.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/04/anne_bebek.jpg" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/04/medal_of_honor.gif" alt="" height="205" width="327" border="0"></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/04/motorola-FIGHT-NIGHT-ROUND-game.jpg" alt="" height="205" width="327" border="0"></a></li> </ul> </div> <div id="kay_mintikcom-ust"> <h1>Mintik.com</h1> </div> </div> </div> <script type="text/javascript" charset="utf-8"> YUI().use('scrollview', function(Y) { var scrollView = new Y.ScrollView({ id: "scrollview", srcNode: '#kay_mintikcom-icerik', height: 310, flick: { minDistance:100, // her kaydirmada atlanacak olan mesafe mintik.com minVelocity:1.3, // kaydirma hiz ayari mintik.com axis: "y" } }); scrollView.render(); var content = scrollView.get("contentBox"); content.delegate("click", function(e) { if (Math.abs(scrollView.lastScrolledAmt) > 2) { e.preventDefault(); Y.log("Link Davranisi Bastirildi") } }, "a"); content.delegate("mousedown", function(e) { e.preventDefault(); }, "a"); }); </script> </body> </html> <!-- http://mintik.com kod sonu -->