본문 바로가기
jQuery/w2ui

[w2ui] TEXTBOX에 리스트 나타내기

사악미소 2016. 9. 12. 14:33
반응형


■ 텍스트박스(TEXTBOX)에 리스트 나타내기




01. 종래의 selectbox를 w2ui로 아래와 같이 나타낼 수 있다.

 w2ui_selectbox.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
<link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
<script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
<style>
.w2ui-field input {
    width:200px;
}
.w2ui-field > div > span {
    margin-left:20px;
}
</style>
</head>
<body>
<div class="w2ui-field w2ui-span3">
    <label>List :</label>
    <div><input type="list"></div>
</div>
<script type="text/javascript">
    var people = [
          "George Washington"
        , "John Adams"
        , "Thomas Jefferson"
        , "James Buchanan"
        , "James Madison"
        , "Abraham Lincoln"
        , "James Monroe"
        , "Andrew Johnson"
        , "John Adams"
        , "Ulysses Grant"
        , "Andrew Jackson"
        , "Rutherford Hayes"
        , "Martin VanBuren"
        , "James Garfield"
        , "William Harrison"
        , "Chester Arthur"
        , "John Tyler"
        , "Grover"
        , "Cleveland"
        , "James Polk"
        , "Benjamin Harrison"
        , "Zachary Taylor"
        , "Grover Cleveland"
        , "Millard Fillmore"
        , "William McKinley"
        , "Franklin Pierce"
        , "Theodore Roosevelt"
        , "John Kennedy"
        , "William Howard"
        , "Lyndon Johnson"
        , "Woodrow Wilson"
        , "Richard Nixon"
        , "Warren Harding"
        , "Gerald Ford"
        , "Calvin Coolidge"
        , "James Carter"
        , "Herbert Hoover"
        , "Ronald Reagan"
        , "Franklin Roosevelt"
        , "George Bush"
        , "Harry Truman"
        , "William Clinton"
        , "Dwight Eisenhower"
        , "George W. Bush"
        , "Barack Obama"
    ];

    jQuery("input[type=list]").w2field("list", {items:people});
</script>
</body>
</html>



02. 출력결과







■ TEXTBOX에 연관리스트 나타내기



01. textbox에 입력단어 연관 리스트를 나타내는건 아래와 같다.

 w2ui_textbox.php
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
<link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
<script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
<style>
.w2ui-field input {
    width:200px;
}
.w2ui-field > div > span {
    margin-left:20px;
}
</style>
</head>
<body>
<div style="height:20px"></div>
<div class="w2ui-field w2ui-span3">
    <label>Combo :</label>
    <div> <input type="combo"> <span class="legend">You can type any text</span> </div>
</div>
<script type="text/javascript">
    var people = [
          "George Washington"
        , "John Adams"
        , "Thomas Jefferson"
        , "James Buchanan"
        , "James Madison"
        , "Abraham Lincoln"
        , "James Monroe"
        , "Andrew Johnson"
        , "John Adams"
        , "Ulysses Grant"
        , "Andrew Jackson"
        , "Rutherford Hayes"
        , "Martin VanBuren"
        , "James Garfield"
        , "William Harrison"
        , "Chester Arthur"
        , "John Tyler"
        , "Grover"
        , "Cleveland"
        , "James Polk"
        , "Benjamin Harrison"
        , "Zachary Taylor"
        , "Grover Cleveland"
        , "Millard Fillmore"
        , "William McKinley"
        , "Franklin Pierce"
        , "Theodore Roosevelt"
        , "John Kennedy"
        , "William Howard"
        , "Lyndon Johnson"
        , "Woodrow Wilson"
        , "Richard Nixon"
        , "Warren Harding"
        , "Gerald Ford"
        , "Calvin Coolidge"
        , "James Carter"
        , "Herbert Hoover"
        , "Ronald Reagan"
        , "Franklin Roosevelt"
        , "George Bush"
        , "Harry Truman"
        , "William Clinton"
        , "Dwight Eisenhower"
        , "George W. Bush"
        , "Barack Obama"
    ];

    jQuery("input[type=combo]").w2field("combo", {items:people});   
</script>
</body>
</html>


02. 출력결과






반응형
저작자표시

'jQuery > w2ui' 카테고리의 다른 글

[w2ui] 팝업창에 기능에 따른 버튼 추가하기  (0) 2016.09.13
[w2ui] w2ui로 팝업창 오픈하기  (0) 2016.09.12
[w2ui] w2ui 텍스트 필드에서 시간 설정하기  (0) 2016.09.09
[w2ui] w2ui 캘린더 한글 달력으로 변환히기  (0) 2016.09.09
[w2ui] w2ui 설정하기  (2) 2016.09.09

'jQuery/w2ui' Related Articles

티스토리툴바