scriptaculous और प्रोटोटाइप के BlindDown या SlideDown प्रभाव का उपयोग कर एक ड्रॉप-डाउन सूची बनाना

वोट
2

मैं एक जावास्क्रिप्ट ड्रॉपडाउन सूची scriptaculous और प्रोटोटाइप का उपयोग कर बनाने की कोशिश कर रहा हूँ। मैं जानता हूँ कि यह सीएसएस का उपयोग किया जा सकता है: मंडराना छद्म चयनकर्ताओं, लेकिन मैं इसे में अतिरिक्त विशिष्टता जोड़ना चाहते हैं। समस्या यह है कि जब मैं एक तरह से लटकती प्राप्त कर सकते हैं / ऊपर प्रभाव काम कर रहे हैं, यह बहुत परतदार लगता है। वहाँ यह करने के लिए एक आसान तरीका है, या मैं होवर पर कायम करना चाहिए? यहाँ सीएसएस मैं उपयोग कर रहा हूँ है।

<style type=text/css>
ul {list-style-type: none}

#navbar>li {
 position: relative;
 float: left;
 padding-right: 20px;
 height: 2em;
 background-color: #002;
}

ul.dropdown {
 display: block;
 position: absolute;
 top: 2em;
 left: 0px;
 background-color: #00c;
}
</style>

और यहाँ एचटीएमएल ( display: none documentatoin प्रति है, जो इसे वहाँ डाल करने के लिए के बजाय एक स्टाइलशीट में अगर आप चाहते हैं लक्ष्य शुरू में छिपा हुआ कहा कि मैं शैली =) जोड़ा है।

<ul id=navbar>
  <li
    onmouseover=Effect.BlindDown('dropdownone', { duration: 0.8 })
    onmouseover=Effect.BlindUp('dropdownone', { duration: 0.8 })><a href=>Menu Link 1</a>
    <ul id=dropdownone class=dropdown style=display: none>
      <li>Drop Down Link 1</li>
      <li>Drop Down Link 2</li>
      <li>Drop Down Link 3</li>
    </ul>
  </li>
  <li><a href=>Menu Link 2</a>
    <ul id=dropdowntwo class=dropdown>
      <li>Drop Down Link 1</li>
      <li>Drop Down Link 2</li>
      <li>Drop Down Link 3</li>
      <li>Drop Down Link 4</li>
      <li>Drop Down Link 5</li>
    </ul>
  </li>
  <li><a href=>Menu Link 3</a>
    <ul id=dropdownthree class=dropdown>
      <li>Drop Down Link 1</li>
      <li>Drop Down Link 2</li>
    </ul>
  </li>
</ul>
16/11/2008 को 08:54
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


4 जवाब

वोट
2

इस आशय ठीक से काम करने लगता है 'onclick' की घटनाओं के साथ

लेकिन onmouseover साथ, मैंने पढ़ा है कि आप प्रभाव का उपयोग करने की जरूरत है कतार इसलिए अपने अंधे अप और एक दूसरे पर अंधा पद छोड़ने नहीं कर रहे हैं की तरह, इस स्क्रिप्ट में

एक कतार (वर्तमान संदर्भ प्रभाव में) घटनाओं की एक सूची है। इन घटनाओं के वर्तमान कार्यों के disturbence रोकने के उद्देश्य से अन्य (या समानांतर) के बाद एक घटित ले।

16/11/2008 को 10:35
का स्रोत उपयोगकर्ता

वोट
0

कतारों मदद करने के लिए नहीं है। एक घंटे से अधिक के लिए अलग अलग बातें की कोशिश कर के बाद, मैं देने के लिए जा रहा हूँ और सिर्फ सादा मंडराना मेनू के साथ चिपके रहते हैं। क्योंकि मैं मान लिया है इस बुनियादी यूआई वृद्धि प्रभाव की तरह इन पुस्तकालयों के लिए आसान बनाने के लिए चाहिए थे था यह हास्यास्पद है।

16/11/2008 को 17:39
का स्रोत उपयोगकर्ता

वोट
0

BlindDown इस तरह donw जा सकता है:

onmouseover = "अगर (। $ ( 'dropdownone') style.display == 'कोई नहीं') {Effect.BlindDown ( 'dropdownone', {अवधि: 0.8})}"

मैं "onmouseout" घटना के लिए BlindUp पर काम कर रहा हूँ, लेकिन यह काम पाने के लिए नहीं कर पा रहे। :(

20/02/2009 को 22:39
का स्रोत उपयोगकर्ता

वोट
0

: उपयोग Effect.toggle ( 'id_of_element', 'अंधा', {अवधि: 2.0});

headfirstproductions.ca/prototype-and-scriptaculous-drop-down-menu

20/05/2009 को 00:53
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more