Word2000 MU 웹 사이트의 PHPBB3 포럼에 병합되었습니다. 웹 사이트에는 SimpleModal OSX 스타일 모달 대화 상자을 사용하는 웹 사이트 사용자 데이터를 쿼리하는 페이지가 있습니다. 나는 또한 Cimy User Extra Fields이라고하는 각 사용자의 맞춤 메타 정보를 생성 할 수있는 플러그인을 사용하고 있습니다. 내가 문제의 세부 사항을 설명하기 전에 분명히 내가 내 설명과 함께 철저히하고 있는지 확인하고 싶다. 문제 상에, Foreach 루프의 기괴한 SimpleMODAL OSX 동작
..........문제는 사실에있다 그 SimpleModal OSX 스타일 모달 대화 JQuery와 기능을 이용하여 페이지. 이 페이지에서는 웹 사이트 사용자 데이터를 쿼리하고 PHP에서 Foreach sequence를 수행합니다. div 열 내의 페이지에 데이터를 표시합니다. SimpleModal OSX 스타일 모달 대화 상자을 사용하는 코드 부분은 열에 나열된 각 사용자 옆에 단추로 표시됩니다.
모달 창을 활성화하는 버튼을 클릭하면; 그 모달 창 안쪽에는 해당 사용자의 메타 데이터가 있습니다. 각 모달 창에 저장된 데이터는 각 사용자와 일치해야합니다. 대신 페이지의 모든 모달 창에서 시스템에서 찾은 첫 번째 사용자의 데이터 만 표시합니다.
원래 foreach 루프를 통해 함수를 실행했으며 MODAL 창에 저장된 결과 데이터가 데이터베이스에서 함수가 쿼리하는 각 사용자에게 고유하지 않고 동일한 데이터입니다.
예제는 웹 사이트에 10 명의 사용자가 있기 때문에 foreach 루프는이 페이지에서 열 내에 나열된 4 명의 사용자를 반환합니다. 시각적 표현 here을 볼 수 있습니다.
페이지를 보면 네 명의 사용자가 표시됩니다. 각 사용자에 대해 아바타 이미지, 표시 이름, 순위, 탄약을 볼 수있는 버튼, 챌린지 버튼 및 이메일 링크가 표시됩니다. Toons 버튼은 문제가있는 곳입니다.
위에서 말했듯이 원래는 각 사용자에게 고유 한 데이터가 아닌 각 버튼에 대해 동일한 데이터를 모달 창에 반복해서 표시했습니다. baba 의 도움으로 그는 이마에 순간을 때리는 내용을 대본에 잘못 표시했습니다. 불행히도, 나는 그것을 작동시키지 못했습니다. 죄송합니다, 바바는 내가 뭘 잘못하고 있는지 확실히 모릅니다. 나는 초심자 정신을위한 더 쉬운 해결책일지도 모른 것 같이 "느꼈다"다른 접근으로 갔다.
Baba가 언급 한 것처럼 Javascript는 모달 창을 만드는 스크립트를 호출하기 위해 특정 ID를 찾고 있습니다. 이것은 foreach 루프이므로, 현재 나의 경우 Toons 버튼 4x를 반복합니다. 따라서 푸시 버튼을 누르면 모달 창에 메타 데이터가 저장된 모달 창이 팝업되는 4 개의 버튼이 있습니다. 이 4 개의 버튼을 클릭하면 4 개의 데이터 모두에서 동일한 데이터가 표시됩니다. 그래서, 그 해결책 은요? 어떻게 든 각 버튼의 ID를 랜덤 화하고 jquery 함수가 각 버튼에서 활성화해야한다는 것을 인식 할 수 있어야합니다.
나는 바바의 아이디어를 활용하려고 몇 시간을 보냈지 만 제대로 작동하지 못했습니다. 그래서 그물에 더 깊숙이 주위에 파고이 질문/스택 오버 플로우에 대한 답변을 가로 질러왔다 당신은 그것을 here 볼 수 있습니다. 나는 똑같은 문제를 겪었고 그 답은 SimpleModal의 개발자에 의해 제공되었다.유일한 문제는
내가이 필요 ....... 대답이 아이디 이미 존재 자동 루프 내에서 생성 될 수없는 ID 년대의 .....내 솔루션을 기반으로 한 것이 었습니다 방법은 숫자와 문자의 임의의 문자열을 생성합니다. 이 해결책은 here입니다. 나는 내 코드로 구현하는 방법 : 나는 코드에서 작업이 임의의 문자열 생성, 나는 숫자의 라돔 문자열이 ID의의를 인식 할 수 있도록 JQuery와 함수에 대한 방법이 필요했다 이제
<?php
$n = rand(10e16, 10e20);
$x = base_convert($n, 10, 36);
?>
및 편지. 와일드 카드가 필요했습니다 ..... 이것은 내가 사용했던 것입니다 :
$("[id^=osx-modal-content]").modal({
이걸로 나는 확실히 작동 할 것이라고 생각했습니다! 그것은 내가 아니라 서면으로 설명 할 수 있으며 내가 시도로는 생산 무엇에 시각적으로 보면 훨씬 더 나은 것 잘 모르겠어요 정말 이상한 짓을 했어, 이상하게도 ......
을하지 않았다 그것을 설명하십시오. here 페이지를 볼 수 있습니다.
그래서이 작은 빨간색 x 문자는 각보기 버튼 아래에 나타납니다. 이 작은 빨간색 x 문자는 코드의 다음 부분을 나타냅니다.
<div id="osx-modal-content<?php echo $x;?>">
Ah! 이들은 각 모달 창에서 메타 데이터를 포함하는 div입니다. 빨간색 x가 나타나는 이유는 단서가 없습니다. 더 이상한 것은 4 개의보기 단추 중 하나를 클릭하는 것입니다. 모달 창은 완전히 확장되지 않을뿐만 아니라 차고 문과 같이 소유되어 있습니다. 그것은 조금 내려오고 곧 다시 올라갑니다. 아래로 미끄러지는 과정에서 메타 데이터도 볼 수 없습니다. 이것은 모달 창이 완전히 확장되지 않는다는 사실 때문일 수 있습니다. 당신이보기 툰 버튼을 클릭 한 후
그러면 또 다른 문제가 발생합니다. 각각의 Toon 버튼 아래에 나타나는 작은 빨간색 x가 첫 번째 View toon 버튼 바로 아래에 위치합니다. 이제 위에 나열된 osx-modal-content (임의 문자열)에 대한 DIV.ID. 해당 div 4 개 모두가 첫 번째보기 Toon 버튼 아래에 있습니다. WTH ??? 나는 사람에 어딘지
는 그입니다. 나는이 코드로 올바른 길을 가기를 바랍니다. 유감스럽게도 바바는 해결책을 찾지 못했고 이것이 내가하는 일을 이해하는 데 도움이되는 다른 사람들에게 충분한 정보가되기를 바랍니다.
============================================== ==================================== 업데이트 : 뾰족한 내가에 ID를 사용하고 있음을 언급 한 바와 같이 이 클래스해야 루프, 나는 스타일 시트에 고개 코드 줄주의 :
#osx-modal-content, #osx-modal-data {display:none;}
나는 #의 OSX 모달 컨텐츠의 끝에서 임의의 영숫자 문자열을 추가하고 이후입니다. 그것은 표시 스타일을 등록하지 않았습니다 : 없음. 코드에 다음을 추가했습니다.
<div id="osx-modal-content<?php echo $x;?>" style="display:none">
이렇게하면 성가신 작은 빨간색 x가 사라집니다. 그 뾰족한 주셔서 고마워! 나는 현재 DIV의 적절한 ID/클래스를 루프 내에서 변경하려고 시도하고 있습니다. 차이가 있는지 확인하기 위해.업데이트 2
는 :
$("[id^=osx]").click(function (e) { 이
은 미친 발생 중지 차고 문이 효과를 소유 : 이것에$("osx").click(function (e) {
:이이었다 originall의 JQuery와 기능에 라인 (18)을 변경 . 이제는 슬라이드 아웃되어 각 사용자의 메타 정보가 표시됩니다. 그러나 View toon 버튼을 클릭하면 선택된 "사용자"가 아닌 상자 안에 모든 사용자 메타 정보가 표시됩니다. 또한 각 버튼을 클릭하면 해당 사용자 ID 번호를 기반으로 ASC 순서로 사용자가 나열됩니다.
업데이트 3 : 와일드 카드 I 설정 때문에 모달 창이 모든 사용자 정보를 표시하는 이유는 거의 긍정적입니다. osx-modal-content로 시작하는 모든 div를 기반으로 열리 며 각 사용자 메타 정보가 표시됩니다. jquery 함수에 대한 다른 솔루션이 필요합니다.
당신을 기꺼이 여기에서보고 도와주세요.
<?php
function roster()
{
$members = get_users('blog_id=15&exclude=array(1)');
foreach ($members as $user)
{
$item['login'] = $user->display_name;
$item['email'] = $user->user_email;
$item['picture'] = get_cimyFieldValue($user->ID, 'picture');
$item['rank'] = get_cimyFieldValue($user->ID, 'guild_rank');
$item['game'] = get_cimyFieldValue($user->ID, 'game');
$item['avatar'] = get_cimyFieldValue($user->ID, 'avatar');
$item['toon_name'] = get_cimyFieldValue($user->ID, 'character_name');
$item['faction'] = get_cimyFieldValue($user->ID, 'faction');
$item['class'] = get_cimyFieldValue($user->ID, 'class');
$item['role'] = get_cimyFieldValue($user->ID, 'role');
}
unset($members);
return $ret;
}
?>
기능에서 호출 각 사용자에 대한 루프 :
<?php
$ret = roster();
if (! empty($ret))
{
foreach($ret as $v)
{ ?>
<div id = "roster_container">
<div id="left_col">
<div id="first_left_col">
<h4>Avatar</h4>
<?php echo '<li><img src="' . $v['picture'] . '" alt="" /></li>';?>
</div>
<div id="second_left_col">
<h4>Username</h4>
<?php echo '<li>' . $v['login'] . '</li>';?>
</div>
<div id="third_left_col">
<h4>Rank</h4>
<?php echo '<li>' . $v['rank'] . '</li>';?>
</div>
</div>
<div id="right_col">
<div id="first_right_col">
<h4>Toons</h4>
<li>
<div id='osx-modal'>
<?php
$n = rand(10e16, 10e20);
$x = base_convert($n, 10, 36);
?>
<input type="button" name="osx<?php echo $x;?>" value="View" class="osx<?php echo $x;?>" id="osx<?php echo $x;?>"/>
</div>
<div id="osx-modal-content<?php echo $x;?>" style="display:none;">
<div class="close"><a href="#" class="simplemodal-close">x</a></div>
<div id="osx-modal-data">
<div id="toon_title">Game Characters</div>
<div id="toon_game">
<?php echo '<h3>' . $v['game'] . '</h3>';?>
</div>
<div id="toon_box">
<div id="toon_name"><?php echo $v['toon_name'];?></div>
<div id="toon_avatar"><?php echo '<img src="' . $v['avatar'] . '" alt="" />';?></div>
<div id="toon_faction"><?php echo $v['faction'];?></div>
<div id="toon_class"><?php echo $v['class'];?></div>
<div id="toon_role"><?php echo $v['role'];?></div>
</div>
<p><button class="simplemodal-close">Close</button></p>
</div>
</div>
</li>
</div>
<div id="second_right_col">
<h4>Challenge</h4>
<?php echo '<li><a href="#" class="CHALLENGE">Challenge</a></li>';?>
</div>
<div id="third_right_col">
<h4>Email</h4>
<?php echo '<li><a href="mailto:' . $v['email'] . '"><img src="http://conspirators.websitedesignbyneo.com/wp-content/themes/conspirators/css/dark-red/img/email-icon.gif" style="height:15px;width:20px;margin-top:5px;margin-left:7px;"></a></li>';?>
</div>
</div>
</div>
<?php
}
}
?>
사용자 정의 기능은 웹 사이트 사용자 메타 데이터를 쿼리 : 이하 나는 전체 코드, 쿼리 기능과 JQuery와 기능을 나열했습니다
그리고 마지막으로 SimpleModal OSX 스타일 모달 대화 jQuery를 :
/*
* SimpleModal OSX Style Modal Dialog
* http://www.ericmmartin.com/projects/simplemodal/
* http://code.google.com/p/simplemodal/
*
* Copyright (c) 2010 Eric Martin - http://ericmmartin.com
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Revision: $Id: osx.js 238 2010-03-11 05:56:57Z emartin24 $
*/
jQuery(function ($) {
var OSX = {
container: null,
init: function() {
$("[id^=osx]").click(function (e) {
e.preventDefault();
$("[id^=osx-modal-content]").modal({
overlayId: 'osx-overlay',
containerId: 'osx-container',
closeHTML: null,
minHeight: 80,
opacity: 65,
position: ['0',],
overlayClose: true,
onOpen: OSX.open,
onClose: OSX.close
});
});
},
open: function (d) {
var self = this;
self.container = d.container[0];
d.overlay.fadeIn('slow', function() {
$("[id^=osx-modal-content]", self.container).show();
var title = $("#osx-modal-title", self.container);
title.show();
d.container.slideDown('slow', function() {
setTimeout(function() {
var h = $("#osx-modal-data", self.container).height()
+ title.height()
+ 20; // padding
d.container.animate(
{height: h},
200,
function() {
$("div.close", self.container).show();
$("#osx-modal-data", self.container).show();
}
);
}, 300);
});
})
},
close: function (d) {
var self = this; // this = SimpleModal object
d.container.animate(
{top:"-" + (d.container.height() + 20)},
500,
function() {
self.close(); // or $.modal.close();
}
);
}
};
OSX.init();
});
한 문제 : 특정 "ID가"문자열에만 사용되어야한다 ** 번 ** 페이지에. 즉, 각 요소의 "id"속성은 ** unique **이어야합니다. 루프에서 HTML을 만들고 동일한 "id"값을 반복해서 사용합니다. – Pointy
질문을 약간 다듬을 수도 있습니다. 확실히 세부 사항은 훌륭하지만, 여기에 게시 한 내용 중 많은 부분이 서술이며, 특히 현재 당면한 문제와 관련이 없습니다. 세 번째, 네 번째 및 다섯 번째 단락은 대부분 불필요하며 두 번째 단락은 다소 모호합니다. –
@Pointy : "가리키는"것에 감사드립니다 : P. 내가 CSS 부분을 보았을 때 콘텐츠가 기본값을 나타내지 않음을 알았습니다. 이후 div id osx-modal-content에 무작위 문자열을 추가하여 표시를 제거합니다. none 기본값은 빨간색 x가 나타나는 원인입니다. 스타일을 인라인으로 추가하면 X가 삭제되었습니다. –