2013-12-12 3 views
11

मुझे क्या चाहिए: एक jQuery UI फ्रेमवर्क बटन जैसा कि यहां पाया जा सकता है: http://jqueryui.com/themeroller/ (फ्रेमवर्क आइकन देखें) jQuery एग्रीजन हेडर में ।jQuery यूआई आइकन बटन के साथ jQuery एकॉर्डन हेडर (छुपाएं/दिखाएं + होवर/क्लिक करें)

लाइव नमूना: http://www.nikollr3.three.axc.nl/

(से मैं क्या समझ में आ; एक बटन भी सही jQuery यूआई श्रेणी के साथ एक आकोर टैग द्वारा मजाक उड़ाया जा सकता है।)

आवश्यकताएँ: मैं बटन नहीं करना चाहती/जब शीर्षलेख वर्तमान में चयनित नहीं होता है तो आइकन दिखाया जाना चाहिए। दूसरी तरफ, यदि हेडर चुना गया है, और इस प्रकार यह भी DIV दिखाया गया है, तो मैं आइकन/बटन प्रदर्शित करना चाहता हूं। बाईं ओर से पहली छवि को देखें, उस स्थिति में मैं नहीं चाहता कि "+" बटन दिखाया जाए। अन्य सभी छवियों में (जहां यह केंद्रित/चयनित है) मैं इसे दिखाना चाहता हूं। वर्तमान में यह लागू नहीं किया गया है; यह कैसे करना है?

-> यदि बटन क्लिक किया गया है, तो मैं statProp प्रदर्शित करना चाहता हूं, मेरे पास एक फ़ंक्शन शोस्टैटप्रॉप() है।

मुद्दे मैं वर्तमान में चल रहा है: के रूप में शीर्ष लेख के लिए है क्योंकि वर्तमान में जब हैडर चयन किया जाता है, एक ही सीएसएस किसी भी तरह बटन के लिए लागू किया जाता है, 'बटन' पर कुछ भी नहीं कर रहा है होवर (क्रॉस पर देखने के बटन का रंग: गहरा भूरा काला) (कोई अलग होवर नहीं है)।

यह कैसे प्राप्त करें? मैं वर्तमान में अटक गया हूं क्योंकि इस विशिष्ट चीज़ के बारे में इंटरनेट पर सीमित दस्तावेज/जानकारी उपलब्ध है जो मैं कोशिश कर रहा हूं।

function showStatProp() 
      { 
       if(document.getElementById("statProp").style.display == "none") 
       { 
        document.getElementById("statProp").style.display = 'block'; 
       } 
       else 
       { 
        document.getElementById("statProp").style.display = 'none'; 
       } 
      } 

HTML:

<body onkeydown="controlCheck(event)" onkeyup="clearPress()" > 
     <div id="application" style="position:absolute"> 
      <div id="accordion"> 
       <h3 id="clickStat">Stations 
       <span style="float:right;" class="ui-state-default ui-corner-all"> 
       <a class="ui-icon ui-icon-plusthick btpad" href="/getPunten.php">Edit</a> 
       </span></h3> 
       <div id="stations"> 
        <input type="text" id="stations_ac" onclick="this.value='';" /> 
        <div id="selectedStationDiv"> 
        </div> 
        <hr> 
         <div id="statProp" style="display:none;"> 
        <p>Name: <input type="text" style="float:right; clear:right" size="19" id="statNam" onclick="this.value='';" /></p> 
        <p style="margin-top:15px"> 
        Type: 
        <select id ="statTyp" style ="float:right" onchange=""> 
        <option></option> 
        <option title="Test">T</option> 
        </select> 
        </p>  
        <p style="margin-top:15px"> 
        Admtyp: 
        <select id ="admtyp" style ="float:right" onchange="FilterByToestanden()"> 
        <option></option> 
        <option title="Alarm">A</option> 
        <option title="Alarm">D</option> 
        <option title="Urgent alarm">U</option> 
        </select> 
        </p> 
        <p>Image: <input type="text" id="statBildnam" size="12" style ="float:right;text-transform: uppercase"></p> 

        <p id="devText">Text: 
        <input type="text" style="float:right; clear:right" id="texts_ac" onclick="this.value='';" /></p> 
        <p> 
        <p id ="respLine">Responsible: <select id="statResp" style="margin-bottom:10px;margin-top:6px;"><option>WERKHUIS-EMG-WEVELGEM</option></select></p> 
        <button id="btnCrtStat" onClick="createStation()" type="button" style="margin-left:26px;margin-top:-3px">Create</button> 
         </div> 

       </div>           

       <h3 id="clickImages" onclick="listImages()">Images</h3> 
       <div id="imagesList" style="overflow:auto"> 

        <ul id='imagesUL'></ul> 
       <button onClick="addImage()" type="button" style="margin-left:26px;margin-top:-3px">Add image</button> 
       </div> 

enter image description here

+0

एक लाइव उदाहरण पूरी तरह से उपयोगी –

+0

@ZachSaucier कोई युक्ति जो भी – Faarbhurtz

+0

सराहना की होगी मैं काफी समझ नहीं पा रहा हूँ होगा अपने आपकी मदद करने के लिए प्रश्न (और दूसरों को भी मानें)। क्या आप इस बात का विस्तार कर सकते हैं कि "हेडर वर्तमान में चयनित नहीं होने पर बटन/आइकन दिखाना नहीं चाहता"। आपके वांछित अंत समाधान के वायरफ्रेम को चित्रित करने का कोई मौका? – Hady

उत्तर

8

मुझे लगता है कि आप कुछ इस तरह हैं:

http://jsfiddle.net/mali303/gxemn34h/

मैं बटन के लिए एक CSS वर्ग 'एक्शन बटन' को शामिल किया है।इस सीएसएस संक्षिप्त रूप में उपयोग में बटन छिपाने के लिए:

#accordion .action-button { 
    float: right; 
    display: none; 
} 
#accordion .ui-state-active .action-button { 
    display: inline; 
} 

मंडराना प्रभाव जोड़ने के लिए:

$('#accordion .action-button').hover(
    function() { 
     $(this).addClass('ui-state-hover'); 
    }, 
    function() { 
     $(this).removeClass('ui-state-hover'); 
    } 
); 

बटन क्लिक करने योग्य बनाने के लिए, कुछ इस तरह का उपयोग करें:

$('#accordion .action-button a').click(function() { 
    self.location.href = $(this).attr("href"); 
}); 

संपादित करें:

डिफ़ॉल्ट और होवर राज्यों को ठीक करने के लिए http://jsfiddle.net/mali303/vf4q0eox/1/

#accordion .action-button .ui-icon { 
    background-image: url(http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_888888_256x240.png); 
} 
#accordion .action-button.ui-state-hover .ui-icon { 
    background-image: url(http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_454545_256x240.png); 
} 
+0

अरे आदमी, यह बहुत अच्छा लग रहा है !, एक टिप्पणी हालांकि प्लस साइन फोकस नहीं है, जबकि भूरे रंग (या अंधेरे) (एक फोकस किए गए एग्रीजन हेडर के साथ सुसंगत) यह ध्यान केंद्रित करते समय केवल काला होना चाहिए, क्या यह आसान है ठीक करने के लिए? – Faarbhurtz

+0

@Farbhurtz यहां अपडेट किए गए एक को जांचें: http://jsfiddle.net/DAaRw/10/ – mali303

+0

मैं इस पर किए गए काम की सराहना करता हूं, यह शीर्ष पायदान है! हालांकि किसी भी तरह से मेरी वेबसाइट राज्य को देने के लिए मना कर रही है .ई-स्टेट-एक्शन बटन पर होवर, जबकि यह केवल एच 3 हेडर के लिए कर रहा है .. मुझे यह समझ में नहीं आता! – Faarbhurtz

2

यह महत्वपूर्ण है जब कुछ जावास्क्रिप्ट संबंधित पहले त्रुटियों के लिए कंसोल का निरीक्षण करने के काम नहीं कर रहा है।

जब अपने लिंक किए गए प्रदर्शन पर सांत्वना निरीक्षण, मैं एक त्रुटि मनाया:

Uncaught SyntaxError: Unexpected token ILLEGAL

यह कोड (लाइन 1000 निरीक्षण द्वारा) की इस पंक्ति की ओर इशारा किया

var jDescriptions= ["<br /> 
<b>Warning</b>: implode() [<a href='function.implode'>function.implode</a>]: Invalid arguments passed in <b>/home/nikollr3/domains/nikollr3.three.axc.nl/public_html/index.php</b> on line <b>1007</b><br /> 
"]; 

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

मैं सुझाव है कि आप या तो स्वयं बाहर इस लाइन आदेश यूनिकोड सुनिश्चित करने के लिए में टाइप चला गया है, या आप हमेशा के माध्यम से jsbeautifier.org/ इसे चलाने के लिए कोशिश कर सकते हैं। ध्यान रखें, कंसोल त्रुटियां हमेशा शुरू करने के लिए एक अच्छी जगह होती हैं।

+0

अरे, मैंने अपने कुछ PHP कोड को हटा दिया क्योंकि मैं कोड के उस हिस्से को साझा नहीं कर सकता, मैं एक php चर के संदर्भ को हटाने के लिए भूल गया था। यह निश्चित रूप से मेरे लिए कोई समस्या नहीं पैदा कर रहा है। मैं आज रात संदर्भ हटा दूंगा। धन्यवाद – Faarbhurtz

2

आप केवल आधारित समाधान एक सीएसएस कर सकते हैं: बटन, इस सीएसएस का उपयोग करें।

आप HTML पुस्तकालय आप उपयोग कर रहे से उत्पन्न हो जाता है कि निरीक्षण करते हैं, तो आप देखेंगे कि एक बटन है जब:

  • hovered, वर्ग ui-state-hover
  • चयनित प्रयोग किया जाता है, वर्ग ui-state-active है
  • चयनित नहीं करते थे, इसके बाद के संस्करण दो वर्गों में से कोई भी उपयोग किया जाता है

ऊपर समझ का उपयोग करके आप स्टेशन संपादित छिपा कर सकते हैं लेकिन टन (धन आइकन) डिफ़ॉल्ट रूप से, और केवल यह मंडराना पर दिखाई दे या जब चयनित करें:

#clickStat span.ui-state-default { 
    display: none; 
} 

#clickStat.ui-state-hover span.ui-state-default, 
#clickStat.ui-state-active span.ui-state-default { 
    display: block; 
} 
संबंधित मुद्दे