Treelist – jQuery plugin

Update: დაემატა expandAll() და collapseAll() ფუნქციები. ასევე აქტიური ელემენტის დამახსოვრება გვერდის განახლების დროს.

სინამდვილეში ამას პლაგინი მარტო იმის გამო ქვია, რომ ძალიან მინდოდა პლაგინის დაწერა :))) პატარაა და თან მისი მსგავსები ძალიან ბევრია ინტერნეტში სხვადასხვა ფერის და გემოსი.

პლაგინის დანიშნულება ასაკეცი/ჩამოსაშლელი მენიუს შექმნაა. უფრო სწორად, არსებულ ქვეპუნქტებიან ლისტს აკეცვა/ჩამოშლის შესაძლებლობას აძლევს.

გამოყენების ინსტრუქცია:
1. სკრიპტი ჩავამატოთ საიტზე, ხოლო სკრიპტამდე ჩავამატოთ თვითონ jQuery-ის სკრიპტი. მაგალითად:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.treelist.js" type="text/javascript"></script>

2. Tip: jQuery-ის ჩამატებისას შეგიძლიათ თქვენს სერვერზე არსებული ფაილის მაგივრად Google-ის ჰოსტზე განთავსებული ფაილი აიღოთ. ბევრი მომხმარებლის ბრაუზერში უკვე არის მისი კეშირებული ვარიანტი და ჩატვირთვა აღარ დასჭირდება:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js" type="text/javascript"></script>

3. თვითონ საიტზე კი, სადაც სიაა, ჩავამატოთ ჯავასკრიპტი.

$('#tree').treelist();

ამ მაგალითში tree სიის ძირეული <ul> ელემენტის id-ია.

1.3.0 ვერსიაში დამატებით არის ორი ფუნქცია. expandAll ყველაფერს ჩამოშლის, ხოლო collapseAll ყველაფერს აკეცავს.

$('#tree').expandAll();
$('#tree').collapseAll();

თუ გვინდა რომ გვერდის განახლების შემდეგ რომელიმე პუნქტი ჩამოშლილი დარჩეს, მაშინ სიის შესაბამის <li> ელემენტს უნდა მივანიჭოთ ”active” კლასი. “active” არის default-ად. კლასის სხვა სახელის შემთხვევაში, treelist() ფუნქციას პარამეტრად უნდა გადასცეთ კლასის სახელი.

შესაძლო პარამეტრები: active, show_speed, hide_speed.

პარამეტრების გადაცემების მაგალითი:

$('#tree').treelist({show_speed:200,
active:'active_item'
});

სადემონსტრაციო ვერსია

გადმოწერა:
jquery.treelist-1.3.0.js 09-08-2009
jquery.treelist-1.0.0.js 02-07-2009

პ.ს. ვცადე IE 6+, Mozilla FireFox, Chrome ბრაუზერებში.. სკრიპტის წარმადობას ვერ ვამოწმებ, მაგრამ თუ გავაუმჯობესე და დავაოპტიმიზირე, ახალ ვერსიასაც ავტვირთავ.

8 thoughts on “Treelist – jQuery plugin

  • 02 ივლისი, 2009 at 22:57
    Permalink

    მშვენიერია, მაგრამ ერთი ბაგი აქვს: რომელიმე იტემის გასწვრივ რომ დააწკაპუნო სადმე ცარიელ ადგილზე მაინც ჩამოიშლება/აიკეცება ხე.

    ამას იმ პროექტში ვნახავ რომელშიც მგონია? (happy)

    Reply
  • 02 ივლისი, 2009 at 23:02
    Permalink

    🙂 ა, მართალი ხარ.
    ოღონდ ბაგი არ არის. სიგანე არ მივუთითე სიას და მთელ გვერდზე გაიშალა.
    ანუ ტექსტზე კი არ მოქმედებს აკეცვა/ჩამოკეცვა, არამედ თვითონ სიის მთელ ელემენტზე.

    იმ პროექტში იმის ადგილას ჩავანაცვლებ 🙂 ის ცოტა გრძელი გზა გამოვიდა.

    Reply
  • 27 ივლისი, 2009 at 02:45
    Permalink

    არ გინდა ამ მენიუს სკრიპტზე აწყობილი პლაგინი დაწერო ვორდპრესისთვის რომელიც არქივებს მოასწესრიგებს? :უსერ:

    Reply
  • 04 აგვისტო, 2009 at 01:35
    Permalink

    საყვარლობაა :))

    ახლა .expandAll() და .collapseAll() მეთოდებიც დაუმატე და ეგაა 🙂

    ასევე, ჩატვირთვის დროს .is(“.active”) ტიპი რომ ავტომატურად გაიშალოს 😀

    Reply
  • 04 აგვისტო, 2009 at 12:58
    Permalink

    @Sweet Baby Girl
    🙂 საინტერესო იდეაა. ცოტა დროს რომ გამოვნახავ, ვიფიქრებ როგორ შეიძლება გაკეთდეს

    @Rocko
    მაგ შესაძლებლობებს დავამატებ 🙂 აუცილებელიცაა..

    Reply
  • 21 ოქტომბერი, 2009 at 11:06
    Permalink

    როგორ მინდა ასეთი რამეები ვისწავლო… ზაფხულში უნდა ჩავუჯდე!

    Reply
  • 08 ივლისი, 2013 at 23:00
    Permalink

    erti kitxva maqvs iqneb damexmarot. jquerys swavla minda da gageba da sadme xo ar icit?

    Reply
  • 16 ივლისი, 2013 at 20:07
    Permalink

    @tornike
    მათ საიტზე არის აღწერილი, როგორ უნდა გამოიყენო http://learn.jquery.com/about-jquery/how-jquery-works/

    შედარებით უფრო მარტივი გზა შეიძლება იყოს codecademy-ის ინტერაქტიული კურსი jquery-ის სასწავლად: http://www.codecademy.com/tracks/jquery

    Reply

კომენტარის დატოვება

თქვენი ელფოსტის მისამართი გამოქვეყნებული არ იყო. აუცილებელი ველები მონიშნულია *