2013-12-12 38 views
11

Điều tôi cần: nút khung UI UI giống như nút có thể tìm thấy ở đây: http://jqueryui.com/themeroller/ (xem Biểu tượng khung) trong tiêu đề jQuery accordion .Tiêu đề jQuery Accordion với nút biểu tượng jQuery UI (ẩn/hiển thị + di chuột/click)

Sống mẫu: http://www.nikollr3.three.axc.nl/

(Từ những gì tôi hiểu, một nút cũng có thể được bắt chước bởi một thẻ với lớp jQuery UI đúng Achor.)

Yêu cầu: Tôi không muốn nút/biểu tượng được hiển thị khi tiêu đề KHÔNG được chọn. Mặt khác, nếu tiêu đề được chọn, và do đó nó cũng được hiển thị, tôi muốn biểu tượng/nút được hiển thị. Nhìn vào hình ảnh đầu tiên từ bên trái, trong trạng thái đó tôi không muốn nút "+" được hiển thị. Trong tất cả các hình ảnh khác (nơi tập trung/được chọn), tôi muốn nó được hiển thị. Điều này hiện KHÔNG được thực hiện; làm như thế nào?

-> Nếu nút được nhấp, tôi muốn statProp được hiển thị, tôi có hàm showStatProp() cho điều này.

vấn đề tôi hiện đang có: Hover trên 'nút' không được làm bất cứ điều gì, bởi vì hiện nay khi các tiêu đề được chọn, css tương tự được bằng cách nào đó áp dụng cho các nút như là tiêu đề (nhìn vào cây thập tự màu sắc của nút: tối màu xám sang màu đen) (không có di chuột riêng biệt).

Cách thực hiện việc này? Tôi hiện đang bị mắc kẹt vì có tài liệu giới hạn/thông tin được tìm thấy trên internet về điều cụ thể này tôi đang cố gắng.

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

Một ví dụ sống sẽ là hoàn toàn hữu ích –

+0

@ZachSaucier Bất cứ lời khuyên nào sẽ được đánh giá – Faarbhurtz

+0

Tôi không hoàn toàn có thể hiểu bạn câu hỏi để giúp bạn (và giả định người khác). Bạn có thể mở rộng những gì bạn muốn nói "Tôi không muốn nút/biểu tượng được hiển thị khi tiêu đề KHÔNG được chọn". Bất kỳ cơ hội vẽ một wireframe của giải pháp cuối cùng mong muốn của bạn? – Hady

Trả lời

8

Tôi đoán bạn muốn một cái gì đó như thế này:

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

Tôi đã thêm một lớp CSS 'hành động nút' nút.Để ẩn nút trong sử dụng nhà nước sụp đổ CSS này:

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

Để thêm hiệu ứng hover:

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

Để thực hiện các nút bấm, sử dụng một cái gì đó như thế này:

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

Chỉnh sửa:

Để khắc phục trạng thái mặc định và di chuột của nút, sử dụng CSS này: 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

Hey người đàn ông, đây là tìm kiếm tuyệt vời !, một nhận xét mặc dù dấu cộng là màu đen khi không tập trung, và không phải màu xám (hoặc darkgrey) (mạch lạc với một tiêu đề accordion không tập trung) Nó chỉ nên màu đen khi tập trung, là dễ dàng sửa chữa? – Faarbhurtz

+0

@Faarbhurtz Kiểm tra cập nhật tại đây: http://jsfiddle.net/DAaRw/10/ – mali303

+0

Tôi đánh giá cao công việc bạn đã làm về điều này, đây là đỉnh cao! Tuy nhiên bằng cách nào đó trang web của tôi từ chối cung cấp cho nhà nước .ui-state-hover đến nút hành động, trong khi nó chỉ làm nó cho tiêu đề H3 .. tôi không hiểu điều này! – Faarbhurtz

2

Điều quan trọng khi một cái gì đó liên quan javascript không hoạt động để kiểm tra giao diện điều khiển cho các lỗi đầu tiên là.

Khi kiểm tra giao diện điều khiển trên bản demo liên kết của bạn, tôi quan sát thấy một lỗi:

Uncaught SyntaxError: Unexpected token ILLEGAL

Nó chỉ vào dòng mã này (dòng 1000 qua sự kiểm tra)

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 /> 
"]; 

Hàm ý là bạn có một số loại ký tự unicode ở đó đang gây ra vấn đề. Có lẽ nó đang gây ra một ngắt dòng. Dù bằng cách nào, kết quả là một chuỗi mở kết thúc và một lỗi mà vô hiệu hóa mã đang được kiểm tra sau dòng này. Đoạn mã sau không thực thi là phần lớn kịch bản cho trang.

Tôi khuyên bạn nên nhập thủ công dòng này để đảm bảo mã unicode biến mất hoặc bạn luôn có thể thử chạy qua jsbeautifier.org/. Hãy ghi nhớ, lỗi giao diện điều khiển luôn là một nơi tốt để bắt đầu.

+0

Xin chào, tôi đã xóa một số mã php của mình vì tôi không thể chia sẻ đoạn mã đó, tôi đã quên mất một tham chiếu tới biến số php. Điều này chắc chắn không gây ra vấn đề gì cho tôi. Tôi sẽ loại bỏ các tài liệu tham khảo tối nay. Cảm ơn – Faarbhurtz

2

Bạn có thể thực hiện giải pháp dựa trên CSS.

Nếu bạn kiểm tra mã HTML mà được tạo ra từ các thư viện bạn đang sử dụng, bạn sẽ thấy rằng khi một nút là:

  • bay lượn, lớp ui-state-hover được sử dụng
  • chọn, lớp ui-state-active là sử dụng
  • Chưa chọn, không ai trong số hai lớp trên được sử dụng

sử dụng sự hiểu biết ở trên, bạn có thể ẩn các trạm chỉnh sửa nhưng tấn (biểu tượng dấu cộng) theo mặc định, và chỉ làm cho nó có thể nhìn thấy trên di chuột hoặc khi được chọn:

#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; 
} 
Các vấn đề liên quan