სპოილერი მოსახერხებელი საშუალებაა საიტისთვის. იგი ფართოდ გამოიყენება სხვადასხვა ფორუმებსა და ბლოგებში, რაც მომხმარებელს საშუალებას აძლევს დამალოს კონკრეტული ელემენტი ღილაკის დაჭერის დროს. უფრო მეტიც, სპოილერი კარგად გამოიყურება საიტზე და ხელს უწყობს იმ ნაწილების დამალვას, რომლებიც ზედმეტად გადატვირთავს გვერდს.
Ეს აუცილებელია
ჟიკერების ბიბლიოთეკა
ინსტრუქციები
Ნაბიჯი 1
სპოილერის განხორციელება შესაძლებელია jquery- ის პოპულარული დანამატის ბიბლიოთეკის გამოყენებით, რომელიც დაწერილია Java Script პროგრამირების ენაზე. იგი გამოიყენება პროგრამირების ენის სრული ურთიერთქმედების განსახორციელებლად გვერდის HTML მარკირების კოდთან. Jquery კავშირი ხორციელდება HTML გამოყენებით ტეგის გამოყენებით. უნდა მიუთითოთ ის ადგილი, სადაც მდებარეობს სკრიპტი და მიუთითოთ მისი ტიპი: $ (დოკუმენტი). მზად (ფუნქცია ()
ნაბიჯი 2
გარკვეულ პუნქტში მითითებული ტექსტის ფრაგმენტი უნდა იყოს თანდართული ცალკე ფენაში - div, რომლის დახმარებითაც კონტროლდება სპოილერი: საშა ფეხით გავიდა მაგისტრალზე და გაშრა.
ნაბიჯი 3
შემდეგ, თქვენ უნდა შექმნათ ყველა განყოფილების წინ, სახელწოდებით გააფუჭოს შესაბამისი ღილაკები, რომლებიც დაიშლება და გააფართოვებს ტექსტს. პირველი, სპოილერი იმალება სტანდარტული "hide ()" ფუნქციის გამოყენებით: $ ("div [name = 'spoil']"). დამალვა (); შემდეგ, თქვენ უნდა შექმნათ ტექსტი და სურათი ყველა სპოილერისთვის, რომელიც გამოყენებული იქნება როგორც ღილაკების ფონი: $ ("P [name = 'spoilbutton"]). Html ("ტექსტის ჩვენება");
ნაბიჯი 4
იპოვნეთ ყველა ღილაკი გვერდზე და შეამოწმეთ პირველი დონის სათაურები ღილაკის წინ. ამისათვის შექმენით პირობა, რომელიც h1 თეგებს მოძებნის სახელით. მითითებული სათაურის ტექსტი გაყოფილია div- ში: $ ("p [name = 'spoilbutton']"). თითოეული (ფუნქცია () {If ($ (ეს).prev (ეს).get (0).tagName == "H1") {Var NewSpoilButton = " + $ (ეს).prev (ეს).html () + "ტექსტის ჩვენება"; $ (this).prev (this).replaceWith ("); $ (this).შეცვლა (NewSpoilButton);}})
ნაბიჯი 5
შემდეგ, თქვენ უნდა გაუმკლავდეთ მაუსის ღილაკზე დაჭერით დაჭერით. თუ დააჭირეთ ღილაკს, ის შეიძლება ნაჩვენები იყოს: $ ("div [name = 'spoilbutton']"). დააჭირეთ (ფუნქცია () {If ($ (this).next (this).css ("display") = =”ბლოკი”) {
ნაბიჯი 6
შემდეგ დაწერე მემკვიდრეობა. Div- ის ფარგლებში, ტექსტი მოცემულია პუნქტში p, რომლის შინაარსი მოთავსებულია span tag- ში: $ (ეს).ბავშვები („p“). ბავშვები („span“). Html („ტექსტის ჩვენება“); კოლაფსი ღია სპოილერი. თუ ის ღია არ არის, გააფართოვეთ ტექსტი. ეს ნაბიჯი ემყარება მემკვიდრეობის წესს: $ (ეს). შემდეგი (ეს).slideUp ("ნორმალური");} სხვაგან {$ (ეს).ბავშვები ("p"). ბავშვები ("span"). Html ("ტექსტის დამალვა"); $ (ეს). შემდეგი (ეს).slideDown ("ნორმალური");} false false; })
ნაბიჯი 7
შემდეგ ღილაკზე მაუსის ძალიან დაჭერით ფიქსირდება, რომლითაც სკრიპტი მალავს და ავითარებს სპოილერს. $ ("P [name = 'spoilbutton']"). დააჭირეთ ღილაკს (ფუნქცია () {If ($ (ეს). შემდეგი (ეს).css ("ჩვენება") = "ბლოკი") {$ (ეს). შემდეგი (ეს).slideUp ("ნორმალური"); $ (ეს).html ("დამალვა");} დაბრუნების ყალბი;}); სპოილერი მზად არის. ის გამოჩნდება, როდესაც შესაბამისი DIV ბლოკი მოიძებნება.
