मैं विभिन्न पैनलों से बनी एक साइट बनाना चाह रहा हूँ। मान लें कि हमारे पास 4 पैनल हैं। प्रत्येक पैनल एक निश्चित समय पर पूरी स्क्रीन लेता है, और कुछ इसी तरह दिखता है

--------------------------------
|     home     ||     about    |
|    a menu    ||    a menu    |
|              ||              |
--------------------------------
--------------------------------
|    contact   ||     jobs     |
|    a menu    ||    a menu    |
|              ||              |
--------------------------------

मान लें कि मैं अब होम पेज के माध्यम से "जॉब्स" लिंक पर क्लिक करता हूं। मैं स्क्रीन को एक एनीमेशन के साथ लंबवत स्क्रॉल करना चाहता हूं, कंटेनर के निचले दाएं कोने में जिसमें सभी आइटम शामिल हैं।

यह इतनी बड़ी समस्या नहीं है, और मुझे पता है कि मैं इसे ScrollTo जैसे प्लगइन के साथ प्राप्त कर सकता हूं।

अब कल्पना करें कि सिर्फ 4 पृष्ठों के बजाय, मेरे पास 16 हैं। इस प्लगइन को आसानी से बढ़ाया जा सकता है, लेकिन चूंकि पृष्ठ पर बहुत सारे तत्व मौजूद हैं (प्रत्येक पैनल में चित्र, पाठ, मेनू, शीर्षक, आदि शामिल हैं ...), साइट धीमी हो जाती है काफी नीचे।

मैं इस समस्या को हल कर सकता हूं जब मैं पहले से ही किसी दिए गए पृष्ठ पर हूं, अन्य सभी पृष्ठों को छुपाकर - लेकिन एक पैनल से दूसरे पैनल में एनिमेट करते समय मैं सभी तत्वों को कैसे संभाल सकता हूं? कार्यान्वयन के लिए कोई विचार?

शुक्रिया!

5
Yuval Karmi 25 जुलाई 2011, 22:39

4 जवाब

सबसे बढ़िया उत्तर

2 सेंट:

  • डिफ़ॉल्ट रूप से सक्रिय को छोड़कर सभी पैनल छिपे हुए हैं और एक अतिरिक्त सीएसएस वर्ग है (जैसे "पैनल-सरलीकृत")
  • पैनल-सरलीकृत लेआउट को पूर्ण न्यूनतम तक कम कर देता है: कोई उन्नत css3 तकनीक नहीं, केवल चयनित सामग्री दिखाई जाती है, शायद डमी सामग्री भी
  • लक्ष्य पैनल पर क्लिक करने पर पूर्ण सौंदर्य प्राप्त होता है / पैनल-सरलीकृत खो जाता है
  • केवल आवश्यक पैनल, जो "पास किए गए" दिखाए गए हैं (न्यूनतम: 2 पैनल, अधिकतम: ~ 10 पैनल (0,0) -> (4/4))

जैसे राज्य (0,0) -> (2,2) से पहले। एक लेबल के बिना छिपे हुए पैनल।

----------------------------------------------------------------
|    (0,0)     ||     (1,0)    ||     (2,0)    ||     (3,0)    |
|    FULL      ||      SIMP    ||              ||              |
----------------------------------------------------------------
----------------------------------------------------------------
|    (0,1)     ||     (1,1)    ||     (2,1)    ||     (3,1)    |
|     SIMP     ||     SIMP     ||      SIMP    ||              |
----------------------------------------------------------------
----------------------------------------------------------------
|    (0,2)     ||     (1,2)    ||     (2,2)    ||     (3,2)    |
|              ||     SIMP     ||      FULL    ||              |
----------------------------------------------------------------
----------------------------------------------------------------
|    (0,3)     ||     (1,3)    ||     (2,3)    ||     (3,3)    |
|              ||              ||              ||              |
----------------------------------------------------------------
2
SunnyRed 1 अगस्त 2011, 04:16

सब कुछ डीओएम में लोड न करें, अजाक्स का उपयोग करें और आपको जो चाहिए उसे खींचें और जो आप नहीं करते हैं उसे हटा दें। मैंने एक साइट पर काम किया जो आप एक बार वर्णन करते हैं और मैं "डोम में सब कुछ छुपाएं" मार्ग पर गया, मुझे अंततः AJAX का उपयोग करने के लिए इसके कुछ हिस्सों को फिर से लिखना पड़ा क्योंकि पृष्ठ को लोड करने में बहुत लंबा समय लग रहा था।

8
sjobe 25 जुलाई 2011, 22:45

सुनिश्चित नहीं है कि आपका एचटीएमएल कोड कैसा है, लेकिन मैं sjobe सुझाव से सहमत हूं।

मुझे लगता है कि आपके पास ऐसा मेनू है:

<ul id='menu'>
    <li><a href='#home'>home</a></li>
    <li><a href='#about'>about</a></li>
    <li><a href='#contact'>contact</a></li>
    <li><a href='#jobs'>jobs</a></li>
</ul>

और कुछ divs जैसे:

<div id='container'>
    <div id='home'></div>
    <div id='about'></div>
    <div id='contact'></div>
    <div id='jobs'></div>
</div>

अब जावास्क्रिप्ट:

// when DOM's ready
$(document).ready(function() {
    // get the current hash or default to #home if none
    hash = window.location.hash ? window.location.hash : '#home';

    // construct the file name to load
    file = hash.replace('#', '/') + '.html';
    // load the file to the div
    $(hash).load(file);
    // and scroll to it
    $.scrollTo(hash, 800, {easing:'elasout'});

    // and create handler for menu click
    $('#menu a').click(function(event) {
        event.preventDefault();
        hash = this.hash;
        $.scrollTo(hash, 800, {easing:'elasout'});
        });
    });

// when page (incl scripts, styles, images, etc) ready
$(window).load(function() {
    // iterate through each menu
    $('#menu a').each(function() {
        // get its hash
        hash = this.hash;
        // construct the file name to load
        file = hash.replace('#', '/') + '.html';
        // preload the file to the div
        $(hash).load(file);
        });
    });
2
widyakumara 29 जुलाई 2011, 08:16

आपके तत्वों में सार्थक आईडी विशेषताएँ होनी चाहिए। आपके पास एक ऐसा शब्दकोश होना चाहिए जिसमें उन सभी आईडी के लिए स्थिति की जानकारी हो। और फिर आप उन स्थिति मानों द्वारा चाल की वांछित दिशा की गणना कर सकते हैं। पसंद

 move from (2,4) to (4,2) 
1
kommradHomer 30 जुलाई 2011, 13:06