कॉलम में सूची लपेटना

I'm using ColdFusion to populate a template that includes HTML lists (

    's).

    इनमें से अधिकतर लंबे समय तक नहीं हैं, लेकिन कुछ में हास्यास्पद रूप से लंबी लंबाई होती है और वास्तव में 2-3 कॉलम में रह सकती है।

    क्या कोई आसानी से ऐसा करने के लिए कोई HTML , ColdFusion या शायद जावास्क्रिप्ट (मेरे पास jQuery` उपलब्ध है) है? कुछ स्क्रॉलिंग को बचाने के लिए कुछ जटिल जटिल वजन समाधान के लायक नहीं है।

0
ro fr bn
क्या यह आपके लिए किसी भी उपयोग की jQuery प्लगइन है? givainc.com/labs/mcdropdown_jquery_plugin.htm
जोड़ा लेखक Quog, स्रोत
कॉलमनाइज़र jQuery प्लगइन देखें।
जोड़ा लेखक phatmann, स्रोत

10 उत्तर

There is no pure CSS/HTML way to achieve this, as far as I know. Your best bet would be to do it in pre-processing (if list length > 150, split into 3 columns, else if > 70, split into 2 columns, else 1).

जावास्क्रिप्ट का उपयोग करते हुए दूसरा विकल्प (मैं jQuery लाइब्रेरी विशेष रूप से परिचित नहीं हूं) सूचियों के माध्यम से पुनरावृत्त होगा, शायद उन पर आधारित एक निश्चित वर्ग होने के नाते, बच्चों की संख्या की गणना करें, और यदि यह पर्याप्त संख्या है, तो पहले के बाद गतिशील रूप से एक नई सूची बनाएं, सूची सूची की कुछ संख्या नई सूची में स्थानांतरित करें। जहां तक ​​कॉलम लागू करने के लिए, आप शायद उन्हें बाईं ओर फ़्लोट कर सकते हैं, उसके बाद उस तत्व के बाद clear: left या clear: दोनों हो।

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.column {
  float: left;
  width: 50%;
}
.clear {
  clear: both;
}
  • Item 1
  • Item 2
  • <!-- ... -->
  • Item 49
  • Item 50
  • Item 51
  • Item 52
  • <!-- ... -->
  • Item 99
  • Item 100
<div class="clear">
</div> </div>

0
जोड़ा

इसलिए मैंने इस आलेख को एक सूची के अलावा खोला सीएसएस स्वैग: मल्टी-कॉलम सूचियां । मैं पहले समाधान का उपयोग कर समाप्त हुआ, यह सबसे अच्छा नहीं है, लेकिन दूसरों को या तो जटिल HTML का उपयोग करने की आवश्यकता है जिसे गतिशील रूप से उत्पन्न नहीं किया जा सकता है, या बहुत से कस्टम वर्गों का निर्माण नहीं किया जा सकता है, लेकिन इनलाइन स्टाइल के लोड की आवश्यकता होगी और संभवतः एक विशाल पृष्ठ।

हालांकि अन्य समाधान अभी भी स्वागत है।

0
जोड़ा
यह दुख की बात है कि दो साल बाद ऐसा करने के लिए अभी भी कोई साफ तरीका नहीं है। धन्यवाद आईई।
जोड़ा लेखक Keyo, स्रोत
+1 मुझे विधि 6 सबसे साफ दृष्टिकोण मिलती है - इसे मार्कअप और बहुत कम सीएसएस का उपयोग करने के लिए समायोजित किया जा सकता है।
जोड़ा लेखक entonio, स्रोत
बहुत उपयोगी। धन्यवाद
जोड़ा लेखक mr.soroush, स्रोत

अगर सफारी और फ़ायरफ़ॉक्स का समर्थन आपके लिए पर्याप्त है, तो एक सीएसएस समाधान है:

ul {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;
}

मैं ओपेरा के बारे में निश्चित नहीं हूँ।

0
जोड़ा
मैं इस समाधान पर भी हूं, लेकिन मैं सूची बुलेट खो रहा हूं ... उन्हें रीसेट करना या छवि की कोशिश करना भी काम नहीं करता है। कोई?
जोड़ा लेखक Stefano, स्रोत
97.8% ब्राउज़र समर्थन अब। सीएसएस में कॉलम विकल्प के बारे में और अधिक जांचें यहां
जोड़ा लेखक Nesha Zoric, स्रोत

फ्लेक्सबॉक्स का उपयोग पंक्ति और कॉलम दिशाओं दोनों में वस्तुओं को लपेटने के लिए किया जा सकता है।

मुख्य विचार कंटेनर पर flex या कॉलम पर flex-direction सेट करना है।

एनबी: आजकल ब्राउज़र समर्थन बहुत अच्छा है।

फ़ील्ड

( इस पुराने 'सूची को अलग' लेख से लिया गया नमूना मार्कअप

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

ol {
  display: flex;
  flex-flow: column wrap; /* flex-direction: column */
  height: 100px; /* need to specify height :-( */
}
ol ~ ol {
  flex-flow: row wrap; /* flex-direction: row */
  max-height: auto; /* override max-height of the column direction */
}
li {
  width: 150px;
}
a {
  display: inline-block;
  padding-right: 35px;
}

items in column direction

  1. Aloe
  2. Bergamot
  3. Calendula
  4. Damiana
  5. Elderflower
  6. Feverfew
  7. Ginger
  8. Hops
  9. Iris
  10. Juniper
  11. Kava kava
  12. Lavender
  13. Marjoram
  14. Nutmeg
  15. Oregano
  16. Pennyroyal

items in row direction

  1. Aloe
  2. Bergamot
  3. Calendula
  4. Damiana
  5. Elderflower
  6. Feverfew
  7. Ginger
  8. Hops
  9. Iris
  10. Juniper
  11. Kava kava
  12. Lavender
  13. Marjoram
  14. Nutmeg
  15. Oregano
  16. Pennyroyal
</div> </div>

0
जोड़ा

चूंकि मुझे एक ही समस्या थी और कुछ भी "साफ" नहीं मिला, मैंने सोचा कि मैं अपना समाधान पोस्ट करूंगा। इस उदाहरण में मैं एक उलटा जबकि लूप का उपयोग करता हूं, इसलिए मैं splice के बजाय splice का उपयोग कर सकता हूं। लाभ अब splice() केवल एक सूचकांक और एक रेंज की जरूरत है जहां टुकड़ा() एक सूचकांक और कुल की जरूरत है। लूपिंग के दौरान उत्तरार्द्ध मुश्किल हो जाता है।

नुकसान होने पर मुझे ढेर को पीछे हटाना होगा।

उदाहरण:

कोल्स = 4; liCount = 35

टुकड़ा के साथ लूप के लिए = [0, 9]; [9, 18]; [18, 27]; [27, 35]

splice = [27, 8] के साथ उलट दिया; [18, 9]; [9, 9]; [0, 9]

कोड:

// @param (list): a jQuery ul object
// @param (cols): amount of requested columns
function multiColumn (list, cols) {
    var children = list.children(),
        target = list.parent(),
        liCount = children.length,
        newUl = $("
    ").addClass(list.prop("class")), newItems, avg = Math.floor(liCount / cols), rest = liCount % cols, take, stack = []; while (cols--) { take = rest > cols ? (avg + 1) : avg; liCount -= take; newItems = children.splice(liCount, take); stack.push(newUl.clone().append(newItems)); } target.append(stack.reverse()); list.remove(); }
0
जोड़ा

सूची को कई समूहबद्ध टैग में आउटपुट करने के लिए आप इस फैशन में लूप कर सकते हैं।






  
  • #listGetAt(list,i)#
0
जोड़ा

आप कोल्स में कनवर्ट करने के लिए इसे आजमा सकते हैं।

सीएसएस:

ul.col {
    width:50%;
    float:left;
}

div.clr {
    clear:both;
}

एचटीएमएल भाग:

  • Number 1
  • Number 2
  • Number 19
  • Number 20
  • Number 21
  • Number 22
  • Number 39
  • Number 40

0
जोड़ा

मैंने इसे jQuery के साथ किया है - यह क्रॉस-प्लेटफॉर्म और न्यूनतम कोड है।

यूएल का चयन करें, इसे क्लोन करें, और पिछले यूएल के बाद इसे डालें। कुछ इस तरह:

$("ul#listname").clone().attr("id","listname2").after()

यह पिछले एक के बाद आपकी सूची की एक प्रति डाल देगा। यदि मूल सूची एक फ्लोट के साथ स्टाइल की जाती है: बाएं, उन्हें तरफ से दिखाई देना चाहिए।

फिर आप बाएं हाथ की सूची और दाएं हाथ सूची से विषम वस्तुओं को भी हटा सकते हैं।

$("ul#listname li:even").remove();
$("ul#listname2 li:odd").remove();

अब आपके पास दो कॉलम सूची में बाएं हैं।

अधिक कॉलम करने के लिए आप .slice (प्रारंभ, अंत) और / या : nth-child selector का उपयोग करना चाहेंगे। यानी, 21 ली के लिए आप अपने मूल यूएल के बाद एक नया यूएल डालने के लिए .slice (8,14) कर सकते हैं, फिर मूल यूएल का चयन करें और ul: gt ( 8)

JQuery पर Bibeault / Katz पुस्तक आज़माएं यह एक महान संसाधन है।

0
जोड़ा

Using a modulo operation, you can quickly split your list into multiple lists by inserting a

    during your loop.

    
    
    
    • #i#

    round() के बजाय roundiling() का उपयोग यह सुनिश्चित करने के लिए करें कि आपके पास सूची के अंत में अतिरिक्त मान नहीं हैं और अंतिम कॉलम सबसे छोटा है।

0
जोड़ा

यहां एक और समाधान है जो निम्न शैली में कॉलम सूचियों की अनुमति देता है:

1.      4.      7.       10.
2.      5.      8.       11.
3.      6.      9.       12.

(लेकिन यह शुद्ध जावास्क्रिप्ट है, और बिना किसी फॉलबैक के jQuery की आवश्यकता है)

निम्नलिखित में कुछ कोड शामिल हैं जो 'चंक' नामक एक नया फ़ंक्शन देने के लिए ऐरे प्रोटोटाइप को संशोधित करता है जो किसी भी दिए गए ऐरे को दिए गए आकार के हिस्सों में तोड़ देता है। अगला 'buildColumns' नामक एक फ़ंक्शन है जो एक यूएल चयनकर्ता स्ट्रिंग लेता है और यह निर्दिष्ट करने के लिए उपयोग किया जाता है कि आपके कॉलम में कितनी पंक्तियां हो सकती हैं। ( यहां एक काम कर रहे JSFiddle है)

$(document).ready(function(){
    Array.prototype.chunk = function(chunk_size){
        var array = this,
            new_array = [],
            chunk_size = chunk_size,
            i,
            length;

        for(i = 0, length = array.length; i < length; i += chunk_size){
            new_array.push(array.slice(i, i + chunk_size));
        }
        return new_array;
    }

    function buildColumns(list, row_limit) {
        var list_items = $(list).find('li').map(function(){return this;}).get(),
        row_limit = row_limit,
        columnized_list_items = list_items.chunk(row_limit);

        $(columnized_list_items).each(function(i){
            if (i != 0){
                var item_width = $(this).outerWidth(),
                    item_height = $(this).outerHeight(),
                    top_margin = -((item_height * row_limit) + (parseInt($(this).css('margin-top')) * row_limit)),
                    left_margin = (item_width * i) + (parseInt($(this).css('margin-left')) * (i + 1));

                $(this[0]).css('margin-top', top_margin);
                $(this).css('margin-left', left_margin);
            }
        });
    }

    buildColumns('ul#some_list', 5);
});
0
जोड़ा