2012-05-25 18 views
6

मैंindex.html में JQuery mobile Phone gapiPhone JQuery: jQuery के मोबाइल + iPhone में फोन की खाई

नमूना कोड का उपयोग कर एक split view को लागू करने की कोशिश की थी का उपयोग कर आईपैड में एक विभाजन दृश्य लागू करने के लिए कैसे

<head> 
     <link rel="stylesheet" href="inc/jquery.mobile.structure-1.0.1.min.css" /> 
     <link rel="stylesheet" href="inc/jquery.mobile-1.0.1.min.css" /> 
     <link rel="stylesheet" href="inc/resources/css/jquery.toastmessage.css" /> 

     <script type="text/javascript" src="inc/jquery-1.7.1.min.js"></script> 
     <script type="text/javascript" src="inc/jquery.mobile-1.0.1.min.js"></script> 

     <script type="text/javascript" src="inc/phonegap-1.2.0.js"></script> 
    </head> 

    <body> 

     <div data-role="page" data-theme="c"> 
      <div data-role="header"> 
       Mpbile Split View 
      </div> 

      <div data-role="content"> 

       <!--- Left side view------> 
       <div class="left-content"> 
        <h3>lef hand content</h3> 
        <ul data-role="listview"> 
         <li>One</li> 
         <li>One</li> 
         <li>One</li> 
         <li>One</li> 
        </ul> 
       </div> 

       <!--- Right side view------> 
       <div class="right-content"> 
        <h3>Right hand content</h3> 
        <ul data-role="listview"> 
         <li>Two</li> 
         <li>Two</li> 
         <li>Two</li> 
         <li>Two</li> 
        </ul> 
       </div> 
      </div> 
     </div> 


    </body> 
</html> 

लेकिन जैसे bellow

enter image description here

से पता चला मैं बाईं ओर (root view में के रूप में split viewएक दो तालिकाओं की जरूरत है यह नीचे करने के लिए एक शीर्ष द्वारा एक ही पृष्ठ पर दोनों देखने से पता चलता) और दाएं तरफ (details view)

jQuery का उपयोग करके यह कैसे संभव है? अग्रिम धन्यवाद

+0

क्या अपने सीएसएस में लानत लागू करने के लिए आसान है? – Grumpy

उत्तर

1

आप http://jeromeetienne.github.com/jquery-mobile-960/ का उपयोग कर सकते हैं और इसे उस ग्रिड के साथ विभाजित कर सकते हैं।

यदि आप 960.gs या किसी अन्य सीएसएस ग्रिड ढांचे को जानते हैं तो यह आपके लिए बहुत आसान होगा। उल्लिखित साइट पर उपयोग का डेमो है।

+0

यह एक गिटहब परियोजना है जिसे 3 वर्षों में अपडेट नहीं किया गया है। प्रलेखन बहुत अच्छा प्रतीत होता है और मुख्य पृष्ठ यह कैसे काम करता है इसका एक उदाहरण के रूप में कार्य करता है। दूसरी तरफ, यदि आप चाहते हैं कि आइपॉड स्क्रीन को आधा में विभाजित करना है तो यह थोड़ा अधिक लगता है। आखिरकार, पांच महीने पुरानी टिप्पणी है, अभी भी अनुत्तरित है, यह पूछना कि क्या इसे jQuery के नवीनतम संस्करणों का समर्थन करने के लिए अपडेट किया जाएगा। मैं कहता हूं "नहीं!" – samwyse

1

मेरे multiview plugin का उपयोग करने का प्रयास करें।

यह Jquery मोबाइल में 1/2/3 पैनल साइड-बाय-साइड प्लस पॉपओवर पैनलों की अनुमति देता है। मैंने फोनगैप (बस जेक्यूएम 1.1 के लिए परिष्करण) के साथ यह कोशिश नहीं की है, इसलिए यदि आप इसे आज़माते हैं, तो कृपया मुझे बताएं कि यह काम करता है (मुझे अनुमान लगाना चाहिए)।

कृपया 1.1 संस्करण और जेक्यूएम 1.1.multiview का उपयोग करें, जिसे काम करने के लिए कुछ बदलावों की आवश्यकता है।

मैं वर्तमान में नया रीडमे और नमूना साइट कर रहा हूं। कुछ दिनों में होना चाहिए।

+0

कमाल - एक आकर्षण की तरह काम करता है। साझा करने के लिए धन्यवाद। – dirkk0

+0

यह एक गिटहब प्रोजेक्ट है जिसे 2 साल में अपडेट नहीं किया गया है, अभी भी एक रीडमे फ़ाइल नहीं है और न ही कोई अन्य दस्तावेज जो मैं देख सकता हूं, और अभी भी नमूना साइट पर कोई संकेत नहीं है। मैं कहता हूं "नहीं!" – samwyse

+0

यदि आप उपर्युक्त में से कोई भी प्रदान करने का समय बर्दाश्त कर सकते हैं, तो फोर्क, अपडेट और बनाए रखने के लिए स्वतंत्र महसूस करें, क्योंकि मैं वर्तमान में नहीं कर सकता ... – frequent