हाइड एंड प्रोटोटाइप और scriptaculous साथ div तत्व को दिखाने

वोट
3

मैं scriptaculous छिपाने के लिए और एक div तत्व प्रदर्शित करने के लिए प्रोटोटाइप उपयोग करने के लिए कोशिश कर रहा हूँ और लेकिन समारोह (नीचे) प्रोटोटाइप setStyle संपत्ति का लाभ लेने के लिए काम नहीं कर रहा है और मुझे यकीन है कि समस्या क्या है नहीं कर रहा हूँ।

<script type=text/javascript language=javascript>
    function bodyOnload() {
            $('content1').setStyle({ display: 'none' });
            $('content2').setStyle({ display: 'none' });
    }
</script>    



<script type=text/javascript language=javascript>

    var currentId = null;

    Effect.Accordion = function (contentId) {
        var slideDown = 0.5;
        var slideUp = 0.5;

        contentId = $(contentId);

        if (currentId != contentId) {
            if (currentId == null) {
                new Effect.SlideDown(contentId, {duration: slideDown});
                } else {
                new Effect.SlideUp(currentId, {duration: slideUp});
                new Effect.SlideDown(contentId, {duration: slideDown});
            }
            currentId = contentId; 
        } else {
            new Effect.SlideUp(currentId, {duration: slideUp});
            currentId = null;
        }
    };
    </script>

पूर्ववर्ती समारोह जैसे कहा जाता है:

<div id=accordion>
    <div id=part1>
        <div id=nav1 onclick=new Effect.Accordion('content1');>
            Post a comment 1
        </div>
        <div id=content1>
            <form id=form name=form action=post.php method=post>
            <textarea name=commentbody cols=20 rows=10></textarea>
            <button type=submit>Post Comment</button>
            <input type=hidden name=blogID value=1 />
            <input type=hidden name=userID value=3 />
            <input type=hidden name=parentID value=7 />
            <div class=spacer></div></form>
        </div>
    </div>
        <div id=part2>
        <div id=nav2 onclick=new Effect.Accordion('content2');>
            Post a comment 2
        </div>
        <div id=content2>
            <form id=form name=form action=post.php method=post>
            <textarea name=commentbody cols=20 rows=10></textarea>
            <button type=submit>Post Comment</button>
            <input type=hidden name=blogID value=1 />
            <input type=hidden name=userID value=3 />
            <input type=hidden name=parentID value=7 />
            <div class=spacer></div></form>
        </div>
    </div>
</div>

यहां बताया गया है कोड के साथ होता है।

  • दोनों IE और Firefox में यह कुछ नहीं करता है, लेकिन आप उस लिंक पर effect.accordion विधि विधि की उम्मीद के रूप में काम कॉल पर क्लिक करते हैं। समस्या प्रोटोटाइप समारोह जो तत्वों को छिपा नहीं करता है के साथ है। किसी भी मदद की बहुत सराहना की है।
14/12/2008 को 07:58
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


4 जवाब

वोट
1

आप शुरू में तत्वों को छिपाने के लिए चाहते हैं, तो इसके लिए पर्याप्त नहीं "समारोह bodyOnload" लिखने के लिए। इस समारोह ऐसा ही कुछ का उपयोग करके पृष्ठ लोड पर बुलाया जाना चाहिए:

window.onload = bodyOnload;

और, बेशक, मैं तुम्हें jQuery आजमाइए करने की सलाह :)

14/12/2008 को 09:17
का स्रोत उपयोगकर्ता

वोट
10

maxnk पहले से ही मुख्य मुद्दा को कवर किया।

लेकिन, प्रोटोटाइप उपयोग करने की सलाह dom:loadedके बजाय घटना window.onload:

document.observe("dom:loaded", bodyOnload);

इसके अलावा, आप प्रोटोटाइप की कोशिश कर सकते हैं Element#toggleया Element#hideके बजाय Element#setStyle(जब तक कि प्रत्येक पृष्ठ पर चेतावनी अपने सीएसएस करने के लिए लागू होता है)।

function bodyOnload() {
    $('content1').hide();
    $('content2').hide();
}
14/12/2008 को 09:31
का स्रोत उपयोगकर्ता

वोट
0

महान! यह अब काम करता है। तुम्हें पता है कि यह एक उदाहरण एक किताब में मैं से जानने की कोशिश कर रहा था। लेखक सिर्फ इस बहुत ही महत्वपूर्ण हिस्सा उपेक्षित के रूप में वह गुमराह कहा scriptaculous में प्रभाव पुस्तकालय संदर्भ के लिए सबसे अच्छा तरीका की तरह है कि:

<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/scriptaculous.js?load=effects"></script>

तरह के बजाय:

<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/effects.js"></script>

पुस्तक अमेज़न पर महान समीक्षा है, लेकिन मुझे नहीं लगता कि समीक्षकों के किसी भी पुस्तक का उपयोग करने की कोशिश की है है। वे अपनी मात्रा के लिए सभी की समीक्षा करने और नहीं पुस्तक के पदार्थ। उदाहरण मैं किताब में उपयोग करने के लिए कोशिश की है में से कोई भी काम किया है। मैं खुद के लिए यह पता लगाने की थी। मैं आप कह सकते हैं मैं किताब एक निश्चित उदाहरण समझने के लिए के अन्य भागों को पढ़ने के लिए है कि लगता है, लेकिन एक किताब है कि बड़ा के लिए, एक वास्तव में ऐसा कर सकते हैं? मैं कुछ लेखक पहले उल्लेख किया है पता करने के लिए है, तो मैं कम से कम एक किताब इतना बड़ा एक संदर्भ पुस्तक के तथ्य वस्तु के रूप में है कि के मामले में, इसके बारे में याद दिलाया नहीं किया जाना चाहिए? यदि आप सोच रहे हैं: अजाक्स: यह निश्चित गाइड, एंथनी टी Holdener तृतीय द्वारा

अपडेट: लेखक Scriptaculous और प्रोटोटाइप पुस्तकालयों है यही कारण है कि वहाँ एक गलतफहमी थी के एक पुराने संस्करण का इस्तेमाल किया। आप मिलता है इस पुस्तक ध्यान में रखना करने के लिए प्रयास करें। मैं वास्तव में अब अगर केवल अपने कतरनी मात्रा के लिए, पुस्तक के प्रति गहरा सम्मान है।

14/12/2008 को 10:32
का स्रोत उपयोगकर्ता

वोट
0

SlideUp और SlideDown के इन आवेदन के लिए धन्यवाद।

एक महत्वपूर्ण टिप्पणी: यह IE7 और IE8 के तहत काम नहीं करता है आप div आप दिखाना या छिपाना चाहते हैं के लिए एक चौड़ाई सेट नहीं है।

विंसेंट

24/09/2009 को 17:27
का स्रोत उपयोगकर्ता

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