jQuery मोबाइल पैनल चौड़ाई

Question

नए jQuery मोबाइल में एक नया पैनल विकल्प है। मैंने इसे कार्यान्वित किया है और यह काम करता है, लेकिन मैं पैनल की चौड़ाई को अनुकूलित करना चाहता हूं। मानक चौड़ाई 272 पीएक्स है, जो मेरे उपयोग के लिए थोड़ा सा है। मैंने

.ui-panel{width:150px;} 

सीएसएस चयनकर्ता का उपयोग करने का प्रयास किया है, लेकिन यह बस पैनल की सामग्री का आकार बदलता है। पैनल स्वयं ही दिखाई देता है और एक ही चौड़ाई बना रहता है। फ़ायरफ़ॉक्स और क्रोम में इंस्पेक्टरों का उपयोग करके मैं इस पैनल के लिए जिम्मेदार सही div को खोजने में सक्षम नहीं हूं। क्या कोई मुझे सही ढंग से पैनल का आकार बदलने का तरीका ढूंढने में मदद कर सकता है?

Answer 1

मैं यह पता लगा! यह वास्तव में जटिल नहीं है। मैं सिर्फ struct.css का उपयोग कर रहा हूं लेकिन यदि आप अन्य सीएसएस फाइलों का उपयोग कर रहे हैं तो अनुकूलित करने के लिए और भी कुछ हो सकता है। वैसे भी ...

अपने पसंदीदा संपादक का उपयोग करके, & "17em" के लिए प्रतिस्थापित करें और उस मूल्य को प्रतिस्थापित करें जिसे आप वास्तव में चाहते हैं। दाएं पैनलों के लिए बाएं पैनलों और स्टाइल के लिए स्टाइल है। मैं इस पूरी प्रक्रिया के माध्यम से नहीं भागूंगा क्योंकि यहां या वहां एक असंबंधित "17em" हो सकता है। यह सिर्फ एक मिनट ...

लेता है यह एक सरल जवाब है, लेकिन मैं अपने आप को साथ खुश हूँ: पी

Answer 2

मुझे लगता है कि आपने एक टाइपो बनाया है।

.ui-panel { width: 150px; } 

प्रयास करें या यदि आप कि इनलाइन,

<panel style="width: 150px;"> 

बेशक

जारी करने कर रहे हैं शायद, नई के रूप में मैं jQuery के लिए कर रहा हूँ, मैं गलत हो सकता है।

Answer 3

वे इस डेमो में पैनल चौड़ाई परिवर्तित करने का तरीका बताते हैं: http://jquerymobile.com/demos/1.3.0/docs/examples/panels/panel-styling.html

Answer 4

मैं अपने आप को एक ही मुद्दा था और tylerl की सलाह का पालन चौड़ाई मैं जरूरत के साथ 17em को बदलने के लिए। जिसने इस तथ्य को छोड़कर, सीएसएस लोड करने के लिए Google सीडीएन का उपयोग कर रहा था, इस तथ्य को छोड़कर, इसलिए मैं इसे सीधे नहीं बदल सका और सामान्य रूप से मैं लाइब्रेरी कोड बदलने का बड़ा प्रशंसक नहीं हूं।

तो यह के साथ प्रयोग करना एक छोटे से मैं डिफ़ॉल्ट jQuery मोबाइल के सीएसएस अलग छोड़ दिया और सही साइडबार के लिए चौड़ाई https://gist.github.com/geekdevs/5433246

आप कॉन्फ़िगर कर सकते हैं फिर से परिभाषित करने के लिए इस कोड के साथ आया था। यह कम कोड है, लेकिन बस आपको बायीं तरफ @ बाएं-साइडबार-चौड़ाई और @ दाएं-साइडबार-चौड़ाई को बदलकर आपको सादे सीएसएस के लिए भी काम करेगा।

Answer 5

आप संपादित आकार विश्व स्तर पर नहीं करना चाहते हैं, अपने वांछित चौड़ाई के अपने कस्टम सीएसएस जोड़ने आईडी जहां आवश्यक करने के लिए इस जोड़ने के लिए, 23em बदल रहा:

नोट: यह बाईं के लिए ही है पक्ष।

.ui-panel { 
    width: 23em; 
} 
.ui-panel-position-left { 
    left: -23em; 
} 
/* positioning: content wrap, fixed toolbars and dismiss */ 
/* panel left open */ 
.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open, 
.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open, 
.ui-panel-dismiss-position-left.ui-panel-dismiss-open { 
    left: 23em; 
    right: -23em; 
} 
/* animated: panel left open (for reveal and push) */ 
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, 
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, 
.ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, 
.ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push { 
    -webkit-transform: translate3d(23em,0,0); 
    -moz-transform: translate3d(23em,0,0); 
    transform: translate3d(23em,0,0); 
} 

Answer 6

मैं पुस्तकालय सीएसएस फ़ाइल के लिए संशोधन करने के लिए करना चाहता था नहीं था तो मैं पैच से ऊपर की कोशिश की लेकिन उनमें से कोई jQuery मोबाइल 1.4.1

मैं करने के लिए कुछ और स्टाइल को जोड़ने के लिए किया था पर काम किया इसे काम करने के लिए मिलता है।

यहां मेरा संशोधित सीएसएस है।(क्रमशः अपने बाएँ और दाएँ आकार के साथ 10em की जगह और 15 उन्हें)

.ui-panel { 
    width: 10em; 
} 

.ui-panel.ui-panel-position-right { 
    width: 15em; 
} 

.ui-panel.ui-panel-closed { 
    width: 0; 
} 

.ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-left.ui-panel-display-push { 
    -webkit-transform: translate3d(-10em, 0, 0); 
    -moz-transform: translate3d(-10em, 0, 0); 
    transform: translate3d(-10em, 0, 0) 
} 

.ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-right.ui-panel-display-push { 
    -webkit-transform: translate3d(15em, 0, 0); 
    -moz-transform: translate3d(15em, 0, 0); 
    transform: translate3d(15em, 0, 0) 
} 

.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push { 
    -webkit-transform: translate3d(10em, 0, 0); 
    -moz-transform: translate3d(10em, 0, 0); 
    transform: translate3d(10em, 0, 0) 
} 

.ui-panel-animate.ui-panel-page-content-position-left{ 
    -webkit-transform: translate3d(10em, 0, 0); 
    -moz-transform: translate3d(10em, 0, 0); 
    transform: translate3d(10em, 0, 0); 
} 

.ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push { 
    -webkit-transform: translate3d(-15em, 0, 0); 
    -moz-transform: translate3d(-15em, 0, 0); 
    transform: translate3d(-15em, 0, 0) 
}