किसी भी प्रकार का एचटीएमएल/डोम पार्सिंग आपको दीवार पर ले जाने जा रहा है, मुझे लगता है, और इसका मतलब है कि आप प्रभावी रूप से अपना खुद का एचटीएमएल लेआउट इंजन विकसित करना शुरू कर रहे हैं।
CSS3 कॉलम फ़ंक्शंस का उपयोग करना बेहतर विचार है। असल में, अपनी सामग्री को एक निश्चित चौड़ाई और ऊंचाई कॉलम के भीतर प्रस्तुत करने के लिए प्राप्त करें। यह आपका पृष्ठ बन जाता है। फिर पृष्ठों के बीच स्थानांतरित करने के लिए अपनी सामग्री स्थिति को बाएं स्थानांतरित करें, और इसे एक कंटेनर में लपेटें जो अतिप्रवाह तत्वों को छुपाएगा।
हमारे एचटीएमएल मूल रूप से हो जाएगा:
<body>
<div id="container">
<div id="content">
CONTENT GOES HERE
<span id="endMarker"></span>
</div>
</div>
<div>
<button id="previous">Previous</button>
<span id="page">Page N of M</span>
<button id="next">Next</button>
</div>
</body>
हमारी बुनियादी सीएसएस है:
#container {
width: 240px;
overflow: hidden;
background-color: yellow;
}
#content {
position: relative;
height: 30em;
-moz-column-width: 240px;
-webkit-column-width: 240px;
column-width: 240px;
-moz-column-gap: 10px;
-webkit-column-gap: 10px;
column-gap: 10px;
}
अब हम के गुणकों में पृष्ठों के बीच स्विच करने के लिए, #content के लिए left सीएसएस गुण सेट होगा - 250px।
हमें केवल यह पता लगाना है कि हमारी सामग्री कितनी कॉलम लेती है, और हमें पेजिंग मिल गई है। How to get css3 multi-column count in Javascript एक संकेत देता है: हम इसे #endMarker की बाईं ओर से ढूंढने जा रहे हैं।
मोबी डिक के पहले अध्याय के साथ, एक कामकाजी उदाहरण http://lateral.co.za/pages.html है। यह क्रोम और एंड्रॉइड पर काम करता है, लेकिन फ़ायरफ़ॉक्स में नहीं - मुझे लगता है कि सीएसएस कॉलम कार्यान्वयन में मतभेदों के कारण। चूंकि हम यहां एंड्रॉइड में दिलचस्पी रखते हैं, इसलिए कोड अच्छा है।
महत्वपूर्ण हिस्से हैं:
- सीएसएस सेटिंग्स के रूप में ऊपर।
- सामग्री (लेकिन
#content div के अंदर) के बाद एक <span id="endMarker"></span> के अलावा
- एक
#previous और #next बटन के अलावा, और एक #page अवधि, #container बाहर सब।
यह जावास्क्रिप्ट jQuery लोड के बाद:
var _column = 0;
var _columnCount = 0;
var _columnWidth = 240;
var _columnGap = 10;
$(function() {
_columnCount = Math.floor($('#endMarker').position().left/(_columnWidth + _columnGap));
setColumn = function(i) {
_column = i;
document.getElementById('content').style.left = -1 * _column * (_columnWidth + _columnGap);
$('#page').html('Page ' + (_column+1) + ' of ' + (_columnCount+1));
}
$('#next').click(function() {
if (_column==_columnCount) return;
setColumn(_column+1);
});
$('#previous').click(function() {
if (0==_column) return;
setColumn(_column-1);
});
setColumn(0);
});
यह है कि।
काम के लिए जगह है। कोई भी कॉलम गणना की उस संख्या के बारे में सोचना चाह सकता है, मैंने इसे संदर्भित एसओ पोस्ट से चूसा है, लेकिन वास्तव में इसे नहीं सोचा है ... कंटेनर की चौड़ाई सामग्री की कॉलम चौड़ाई को प्रभावित करती है, जो कि पूरी तरह से मुझे समझ में नहीं आता है।
लेकिन कम से कम सबकुछ कम से कम क्रोम और एंड्रॉइड में कोई HTML पार्सिंग और अपना लेआउट करने के बिना काम कर रहा है।
क्या आप साझा कर सकते हैं कि आपने इसे कैसे हल किया? धन्यवाद। – Ravi