jOrgCharts

Elinizde  kategorilere  ayırmak zorunda  olduğunuz  çok karmaşık  sayılabilecek bir liste var ve tek tek bunları  elle girmek sizi oldukça uğraştıracak gibi görünüyor. Ayrıca  bu tarz işlemleri her  gün tekrar ediyorsanız eğer web sitenizde sürükle  bırak (drag and drop) ile çalışan bir uygulama  kullanarak ürünleri, içerikleri çok kolay bir şekilde bir düzenleyebilirsiniz.

jOrgChart (organization chart) yani organizasyon grafik aracı adlı jQuery uygulaması ile web sitenizdeki organizasyonları, kategorileri, kategori içeriklerini sürükle bırak yoluyla  bir kategoriden diğerine  oldukça kolay bir şekilde yerleştirebilirsiniz.  Ayrıca x kategorisinden başka bir kategoriye sürüklediğiniz içerikler otomatik alt kategori gibi görünüyor. Bir nevi harita şeklinde olan bir grafik uygulaması da diyebiliriz buna.  Alt kategorilerinizi  ağaç dalları gibi gösteren bir grafik uygulaması

 Kullanım

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

Js ve  Css dosya  adresleri.

<link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="jquery.jOrgChart.js"></script>

 JavaScript : 

   <script>
    jQuery(document).ready(function() {
        $("#org").jOrgChart({
            chartElement : '#chart',
            dragAndDrop  : true
        });
    });
    </script>
  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<pre class="prettyprint lang-html" id="list-html" style="display:none"></pre>       
                </div>              
            </div>
        </div>
    </div>

    <ul id="org" style="display:none">
    <li>
       Food
       <ul>
         <li id="beer">Beer</li>
         <li>Vegetables
           <a href="http://mintik.com/?p=12123" target="_blank">Click me</a>
           <ul>
             <li>Pumpkin</li>
             <li>
                <a href="http://mintik.com/?p=12123" target="_blank">Aubergine</a>
                <p>A link and paragraph is all we need.</p>
             </li>
           </ul>
         </li>
         <li class="fruit">Fruit
           <ul>
             <li>Apple
               <ul>
                 <li>Granny Smith</li>
               </ul>
             </li>
             <li>Berries
               <ul>
                 <li>Blueberry</li>
                 <li><img src="images/raspberry.jpg" alt="Raspberry"/></li>
                 <li>Cucumber</li>
               </ul>
             </li>
           </ul>
         </li>
         <li>Bread</li>
         <li class="collapsed">Chocolate
           <ul>
             <li>Topdeck</li>
             <li>Reese's Cups</li>
           </ul>
         </li>
       </ul>
     </li>
   </ul>            

    <div id="chart" class="orgChart"></div>

 

Bu Yazıyı Paylaş

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla