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 ბრაუზერებში.. სკრიპტის წარმადობას ვერ ვამოწმებ, მაგრამ თუ გავაუმჯობესე და დავაოპტიმიზირე, ახალ ვერსიასაც ავტვირთავ.

გამოხმაურება

comments