웹표준
Select폼에서의 링크 이동
<form action="어쩌구" method="get"> <fieldset> <legend>페이지 이동 폼</legend> <p> <label for="sel">페이지 선택</label> <select name="sel" id="sel" tabindex="1"> <optgroup label="링크들"> <option value="http://naver.com">네이버</option> <option value="http://empas.com">엠파스</option> <option value="http://daum.net">다음</option> </optgroup> </select> <input type="button" value="이동" onclick="document.location.href=sel.value" onkeypress="document.location.href=sel.value" tabindex="2" /> </p> </fieldset> </form>
http://nonull.com/?paged=2 이런 식의 페이징일 때
<form action="http://nonull.com/" id="pageform" method="get"> <fieldset> <legend>Page Jump</legend> <p> <label for="pagenav" accesskey="P"><ins>P</ins>age : </label> <select size="1" id="pagenav" name="paged" tabindex="1"> <option value="1"> 1 </option> <option value="2" selected="selected" class="current_page"> 2 </option> <option value="3"> 3 </option> </select> <input type="submit" value="Jump" tabindex="2" accesskey="J" /> </p> </fieldset> </form>
팝업 윈도우 예제
인라인 스크립트
href="주소"를 적어주어 javascript가 무시된 환경에서도 링크가 이용되도록 할 수 있음.
onclick과 onkeypress를 같이 쓰는 것이 더욱 접근성에 좋음. <a href="주소" onclick="window.open(this.href, 'target_name', 'windowproperties'); return false"></a>
windowproperties : width=얼마,height=얼마,scrollbars=yes or no,,,
함수로 만듦
인라인 스크립트의 예제를 함수로 만듦
javascript.js 파일 내용
//화면 정 가운데로 오도록 변수 삽입.
function popup(url, width, height) {
var width = width;
var height = height;
var left = (screen.width - width) / 2 ;
var top = (screen.height - height) / 2;
var windowproperties = "width="+ height +",height="+ height +",left="+ left +",top="+ top +",scrollbars=0";
window.open(url, "radio", windowproperties); return false;
}
html 내용
<head> 와 </head> 사이에 다음을 삽입.
주소는 javascipt.js가 위치한 주소. <script type="text/javascript" src="http://주소/javascipt.js"></script> 팝업 링크 는 다음처럼 만듦 <a href="주소" onclick="return popup(this.href, '300', '300');" onkeypress="return popup(this.href, '300', '300');">링크 text</a>
접근성을 무시하고 자바스크립트만을 이용한 함수로 만듦
일정한 패턴을 가진 url을 팝업으로 올리고 싶을 때 사용. (예) 게시판
javascript.js 파일 내용
function openwin(id) {
var left = (screen.width - 320) / 2 ;
var top = (screen.height - 370) / 2;
var windowproperties = "width=320,height=370,left="+ left +",top="+ top +",scrollbars=0";
var url = "http://주소"+id;
window.open(url, "radio", windowproperties);
}
html 내용
<head> 와 </head> 사이에 다음을 삽입.
주소는 javascipt.js 가 위치한 주소. <script type="text/javascript" src="http://주소/javascipt.js"></script> 팝업 링크 는 다음처럼 만듦 <a href="javascript:;" onclick="open(id에 해당하는 언어)" onkeypress="open(id에 해당하는 언어)">링크 text</a>
활용
위의 js 함수 예제와 함께 사용함.
워드프레스 핵 페이지에 펑션 삽입
function openradio() {
if(!is_feed()) // 피드로 내보낼 때는 효과 없으므로 쓰지 않음
echo " onclick=\"return radio(this.href);\" onkeypress=\"return radio(this.href);\" class=\"music\" title=\"listening music!\"";
}
글 쓸 때
<a href="팝업음악주소"<?php openradio() ?>>음악듣기</a>
Object 의 예
<object type="application/x-shockwave-flash" data="/fmp3/mp3player.swf" width="297" height="200"> <param name="movie" value="/fmp3/mp3player.swf" /> <param name="FlashVars" value="config=%2Ffmp3%2Fnaver_config.xml&file=%2Fwp-content%2Fplugins%2Fxspf_player%2Fdir_20110203%2Fplaylist.php?cat%3D2" /> <param name="allowScriptAccess" value="sameDomain" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <strong>FAIL</strong> (the browser should render flash mp3 player /not this).<br />Wordpress XSPF_Player Plugin v. 3.4, by Boriel :-)</object>