2011-12-21 2 views
1

코드에서 .show().reveal()으로 변경하려고하는데이 작업을 올바르게 수행 할 수없는 것 같습니다..show()에서 .reveal()으로 변경하는 방법은 무엇입니까?

다음
(function($) { 
    var isMobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())); 
    if (isMobile) { 
     $('.event_list').hide(); // setting display:none; on all .event_list <ul> elements 

     // attach click event to the <span class="day_listing"> elements 
     $('.day_listing_mobile').click(function() { 
      var $eventList = $(this).sibling('.event_list'); 

      $('.event_list').hide(); // again hide all possibly shown ones before opening the selected one 

      $eventList.show(); // setting display:block on sibling <ul> of clicked <span> 

      $('#myMobileModal').reveal(); 
     }); 
    } 

})(jQuery); 

내가 숨어를 공개 꿔 것입니다 :

오류 내가 여기 day_listing_mobile <span>

을 선택하면 아무것도 내 자바 스크립트 코드되는 일이없는 한, 생성되지되고있다

{cal_cell_content}<span class="day_listing_mobile">{day}</span><div id="myMobileModal" class="reveal-modal"><ul class="event_list">{content}</ul></div>{/cal_cell_content} 
      {cal_cell_content_today}<span class="day_listing_mobile" id="today_listing">{day}</span><div id="myMobileModal" class="reveal-modal"><ul class="event_list">{content}</ul></div>{/cal_cell_content_today} 

위 코드는인 CodeIgniter의 캘린더 클래스를 사용하여 <ul>을 생성합니다 0 휴대 전화에서 보내고, 나는 .show() 대신에 결국 .reveal()을 원합니다. 여기

.reveal() 작동 방법은 다음과 같습니다

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#myButton').click(function(e) { 
      e.preventDefault(); 
     $('#myModal').reveal(); 
    }); 
}); 
</script> 

(more information on Reveal by Zurb)

면책 조항 : 나는 웹 개발에 새로운 해요, 무엇이든 빨아 관련 자바 스크립트.

+0

당신이 시도 무슨 짓을했는지, 당신은 어떤 오류를 보았는가? – Mathletics

+0

마크 업을 게시 할 수 있습니까? reveal()으로 팝업하려고하는 것이 확실하지 않습니다 – jbabey

+0

더 명확하게하기 위해 질문이 업데이트되었습니다. – imlouisrussell

답변

1

HTML

{cal_cell_content} 
<span class="day_listing_mobile">{day}</span> 
<div id="myMobileModal" class="reveal-modal"> 
    <ul class="event_list">{content}</ul> 
</div> 
<a id="myButton" data-reveal-id="myModal" href="javascript://">myButton</a> 
{/cal_cell_content} 

JS

$(document).ready(function() { 
    $('.day_listing_mobile').click(function(e) { 
     var $eventList = $(this).siblings('.event_list'); 
     $('.event_list').hide(); 
     $eventList.show(); 
     $('#myMobileModal').reveal(); 
    }); 
}); 

CSS reveal.css에서

,691 (를 포함해야합니다) //

.reveal-modal { 
    visibility: hidden; 
    top: 100px; 
    left: 50%; 
    margin-left: -300px; 
    width: 520px; 
    background: #eee url(modal-gloss.png) no-repeat -200px -80px; 
    position: absolute; 
    z-index: 101; 
    padding: 30px 40px 34px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.4); 
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4); 
    box-shadow: 0 0 10px rgba(0,0,0,.4); 
    } 

바이올린

http://jsfiddle.net/c4urself/EUPYT/

관련 문제