प्रोटोटाइप / Scriptaculous: पैराग्राफ (<p>) के समूहों का चयन उन पर क्लिक करके

वोट
1

(पैराग्राफ की सूची <p>) दिया जाता है। जैसे ही उपयोगकर्ता पैरा पैरा एक परिवर्तन का एक वर्ग सक्रिय करने के लिए पर क्लिक करता है के रूप में। अब उपयोगकर्ता पैरा बी चयन करता है और ए और बी के बीच सभी पैराग्राफ बदल उनकी कक्षा में सक्रिय।

फिर बी पर क्लिक करके, केवल एक वर्ग सक्रिय के साथ रहता है।

एक वर्ग सक्रिय पर क्लिक करते हुए ए और बी (ए और बी सहित) के बीच सभी अनुच्छेदों पर हटा दिया जाता है।

यह ए और बी ए और बी के बीच चयन के बीच किसी भी अनुच्छेद निष्क्रिय करने के लिए हमेशा चयनित पैराग्राफ का एक निर्बाध सूची होना चाहिए संभव नहीं होना चाहिए।

किसी को भी मुझे कैसे प्रोटोटाइप / Scriptaculous के साथ इस साकार करने के लिए पर एक संकेत दे सकते हैं? आवेदन रेल में कार्यान्वित किया जाता है, तो आर.जे. में कोई संकेत भी अधिक की सराहना की होगी!

10/03/2009 को 09:16
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


4 जवाब

वोट
1

मान लिया जाये कि आपके पैराग्राफ 'जानकारी' नामक एक आवरण div में कर रहे हैं: (मैं इसे परीक्षण नहीं किया है, लेकिन यह कुछ इस तरह हो जाएगा)

$('info').select('P').each(function(element) {
    Event.observe(element,'click',function(event){
        flipIt(event)
    })
})

function flipIt(evt) {  
    var element = evt.element();
    if($(element).hasClassName('active')) {
        $(element).removeClassName('active')
    }
    else {
        $(element).addClassName('active')
    }
}
10/03/2009 को 16:15
का स्रोत उपयोगकर्ता

वोट
1

मैं नीचे दिए गए कोड परीक्षण किया है और यह आप क्या चाहते हैं करता है, हालांकि यह थोड़ा घुमावदार है। यह करने के लिए महत्वपूर्ण एक सरणी है, जो का उपयोग कर हासिल की है प्रोटोटाइप के दशक में पैराग्राफ रखा है $$ कार्य करते हैं।

<style type="text/css">
  .activated {
    background-color: yellow;
  }
</style>
.
.
.
<div id="container">
  <p>This is paragraph 1.</p>
  <p>This is paragraph 2.</p>
  <p>This is paragraph 3.</p>
  <p>This is paragraph 4.</p>
  <p>This is paragraph 5.</p>
  <p>This is paragraph 6.</p>
</div>
<script type="text/javascript">
  Event.observe(document, "dom:loaded", function() {
    var paragraphs = $$("#container p");
    paragraphs.each(function(paragraph, index) {
      paragraph.observe("click", function(event) {

        // A clicked; toggle activated class on A
        if (index == 0) {
          toggleStyle(paragraphs[0]);

          // A clicked; remove activated class from A + 1 through to B
          // if present
          for (var i = 1; i <= paragraphs.length; i++) {
            if (paragraphs[i] && paragraphs[i].hasClassName("activated")) {
              paragraphs[i].removeClassName("activated");
            }
          }
        }

        // A + 1 clicked; toggle activated class on A + 1
        if (index > 0 && paragraphs[0].hasClassName("activated")) {
          for (var i = 1; i <= index; i++) {
            toggleStyle(paragraphs[i]);
          }
        }
      });
    });
  });

  function toggleStyle(paragraph) {
    if (paragraph.hasClassName("activated")) {
      paragraph.removeClassName("activated");
    } else {
      paragraph.addClassName("activated");
    }
  }
</script>
11/03/2009 को 08:48
का स्रोत उपयोगकर्ता

वोट
1

इसे इस्तेमाल करे

<!DOCTYPE HTMP PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <%= javascript_include_tag :defaults %>
 </head>
 <body>

<style type="text/css">
  .active {
    background-color: maroon;
  }
</style>

<div id="info">
<p>
1 ald fhasdfd sfhjfh afhd fhasjfhjsdah fadfhasd<br/>
fasdhfhsdf ajhajkfh dfhdasjf fhdasf asdf<br/>
asdfh hsdjkhf dhfasdfh asdjfkdhfjkasd<br/>
fsdhf jksdhf sdfjkh asfsdf asdfasdfasdh<br/>
</p>
<p>
2 ald fhasdfd sfhjfh afhd fhasjfhjsdah fadfhasd<br>
fasdhfhsdf ajhajkfh dfhdasjf fhdasf asdf<br/>
asdfh hsdjkhf dhfasdfh asdjfkdhfjkasd<br/>
fsdhf jksdhf sdfjkh asfsdf asdfasdfasdh<br/>
</p>
<p>
3 ald fhasdfd sfhjfh afhd fhasjfhjsdah fadfhasd<br>
fasdhfhsdf ajhajkfh dfhdasjf fhdasf asdf<br/>
asdfh hsdjkhf dhfasdfh asdjfkdhfjkasd<br/>
fsdhf jksdhf sdfjkh asfsdf asdfasdfasdh<br/>
</p>
<p>
4 ald fhasdfd sfhjfh afhd fhasjfhjsdah fadfhasd<br>
fasdhfhsdf ajhajkfh dfhdasjf fhdasf asdf<br/>
asdfh hsdjkhf dhfasdfh asdjfkdhfjkasd<br/>
fsdhf jksdhf sdfjkh asfsdf asdfasdfasdh<br/>
</p>
</div>
<%javascript_tag :defer => 'defer' do -%>
  $('info').select('P').each(function(element) {
    Event.observe(element,'click',function(event){
        flipIt(event)
    })
})

function flipIt(evt) {

    var element = evt.element();
    var all = $('info').select('P');
    var first = -1;
    var last = -1;
    var clicked = 0;
    for ( i=0;i<all.size();i++ ) {
         if( all[i].hasClassName('active') && first == -1   )
           first = i;
         if( all[i].hasClassName('active') && first != i  )
           last = i;
         if ( all[i] == element){
              clicked = i;
          }
    }
   if ( first == clicked && last == -1 ){
        all[clicked].removeClassName('active');
       return;

}
   if ( first  == -1 && last == -1 ) {
        all[clicked].addClassName('active');
        return;
}
   if ( last < clicked  && first != -1 ){
      for (i=first;i<=clicked;i++)
        all[i].addClassName('active');
      return;
   }
   if (last == clicked && first != -1 ) {
      for (i=first+1;i<=clicked;i++)
        all[i].removeClassName('active');
    return; }
}

<%end%>
 </body>
</html>
11/03/2009 को 09:23
का स्रोत उपयोगकर्ता

वोट
0

ठीक है, इस बीच में और एक सहकर्मी की मदद से मैं इस समस्या का एक स्वयं के जवाब के साथ आया था:

<script type="text/javascript">
    // holds paragraph A (first selected paragraph)
    var a_selected = null;
    // holds paragraph B (second selected paragraph)
    var b_selected = null;
    // holds all 'active' paragraphs
    var selected_paras = [];

    function class_flipper_init() {
        // reset paragraphs A and B
        a_selected = null;
        b_selected = null;
        var paragraphs = $$("#foobar p");
        paragraphs.each(function(paragraph, index) {
            // if user clicks on a paragraph
            paragraph.observe("click", function(event) {
                // if A and B are 'active': reset everything.
                if(b_selected != null) {
                    selected_paras.each(function(i) {
                        toggleStyle(i);
                    })
                    a_selected = null
                    b_selected = null
                    return
                }
                // if A is 'active'
                if(a_selected != null) {
                    // if A is 'active' and selected B is below A:
                    // select all paragraphs between A and B
                    if(a_selected < index) {
                        b_selected = index;
                        for (var i = a_selected + 1; i <= index; i++ ) {
                            toggleStyle(paragraphs[i])
                        }
                    }
                    // if A is 'active' and selected B is above A: 
                    // select all paragraphs between A and B
                    else if(a_selected > index) {
                        b_selected = index;
                        for (var i = a_selected - 1; i >= index; i-- ) {
                            toggleStyle(paragraphs[i])
                        }
                    }
                    // if A == B
                    else {
                        toggleStyle(paragraph)
                        a_selected = null
                    }
                }
                // if A is selected
                else {
                    a_selected = index;
                    toggleStyle(paragraph)
                }
            });
        });
    }

    function toggleStyle(paragraph) {
        // remove active class
        if (paragraph.hasClassName("active")) {
            paragraph.removeClassName("active");
            selected_paras = selected_paras.without(paragraph)
        } 
        // set active class
        else {
            paragraph.addClassName("active");
            selected_paras.push(paragraph)
        }
    }
</script>

class_flipper_init() हर पृष्ठ कहा जाता है (या मेरे मामले में एक निश्चित आंशिक) भरी हुई है।

कृपया एक समाधान "शुद्ध" आर.जे. या अधिक सुरुचिपूर्ण कुछ में लिखा प्रस्तुत करने के लिए संकोच नहीं करते। :-)

11/03/2009 को 15:00
का स्रोत उपयोगकर्ता

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