Dojo 1.7 Dialog 와 ToolTip 튜 토리 얼

16626 단어 브 라 우 저functionClassdialogdojobutton
원문:http://dojotoolkit.org/documentation/tutorials/1.7/dialogs_tooltips/ 
데 이 비 드 월 시
Elaine Liu
Dojo 1.7  난이도 레벨: 초급
사용자 의 상호작용 은 부 클 라 이언 트 네트워크 응용 을 구축 하 는 첫 번 째 요소 이다.브 라 우 저 는 alert 와 대화 상 자 를 기본 적 인 사용자 상호작용 방식 으로 제공 하지만 이러한 기본 적 인 상호작용 은 매우 초라 하고 유연성 이 부족 합 니 다.따라서 Dijit, 이 Dojo 공구 꾸러미 가 제공 하 는 사용자 인터페이스 프레임 워 크 는 dijit / Tooltip, dijit / Dialog, 그리고 dijit / TooltipDialog 등 widget 을 포함 한 일련의 브 라 우 저 간 확장 가능 하고 맞 춤 형 테마 컨트롤 을 제공 하여 브 라 우 저의 기본 적 인 상호작용 기능 에 존재 하 는 부족 을 보완 합 니 다.본 튜 토리 얼 에 서 는 범례 와 관련 된 세부 사항 을 포함 하여 상기 컨트롤 을 배 울 것 입 니 다.
도구 팁 알 아 보기
원생 의 'Tooltip' 은 브 라 우 저 에서 title 속성 을 사용 하여 DoM 노드 를 만 드 는 것 입 니 다.이 Tooltip 들 은 보기 처럼 초라 합 니 다. 디 스 플레이 시간 을 제어 할 수 없고 부 텍스트 를 포함 할 수 없 으 며 브 라 우 저 간 의 표현 도 일치 하지 않 습 니 다.Dijit 의 dijit / Tooltip 류 는 상기 모든 문 제 를 해결 했다.
  • Tooltip 에 HTML 내용 포함 허용
  • Tooltip 이 표시 하 는 위치 와 시간 을 제어 하 는 방법
    • 을 제공 합 니 다.
  • 브 라 우 저 크기 가 변 할 때 Tootips 에 대한 위치 재 설정 과 크기 조정
  • 4 중 우아 하고 아름 다운 Tooltip 디 스 플레이 테마 제공
  • 신뢰 할 수 있 는 크로스 브 라 우 저 정책 을 실현 하여 Flash 요소 에 표시 할 수 있 도록 합 니 다
  • 게으름뱅이 생 성 모드 - Tooltip 이 표시 되 어야 할 때 만 Tooltip 노드 를 만 듭 니 다
    • dijit / Tooltip 을 사용 하 는 것 은 모든 Dijit 컨트롤 을 사용 하 는 절차 와 같 습 니 다. 페이지 에 필요 한 스타일 시트 를 추가 하고 body 노드 에 해당 하 는 css 클래스 를 추가 하 며 이 컨트롤 의 JavaScript 클래스 를 요청 합 니 다.
    <head>
<!-- use the "claro" theme -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<!-- load dojo and provide config via data attribute -->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad:true"></script>
<script>
    // Load the Tooltip widget class
    require(["dijit/Tooltip",  "dojo/parser", "dojo/domReady!"], function(Tooltip){
 
    });
</script>
</head>
<!-- add the "claro" CSS class to the body -->
<body class="claro">
 
</body>

    테마 와 컨트롤 클래스 를 불 러 온 후 다음 프로 그래 밍 방식 으로 Tooltip 을 만 들 수 있 습 니 다.
    // Create a new Tooltip
var tip = new Tooltip({
    // Label - the HTML or text to be placed within the Tooltip
    label: '<div class="myTipType">This is the content of my Tooltip!</div>',
    // Delay before showing the Tooltip (in milliseconds)
    showDelay: 250,
    // The nodes to attach the Tooltip to
    // Can be an array of strings or domNodes
    connectId: ["myElement1","myElement2"]
});

    중요 한 dijit / Tooltip 속성 은 다음 과 같 습 니 다.
  • ConnectId - 하나의 ID 또는 DOM 노드 배열 로 Tooltip 이 연결 할 대상 을 저장 합 니 다
  • label - Tooltip 내부 에 있 는 HTML 또는 텍스트 내용
  • showDelay - Tooltip 에 표 시 된 지연 시간
    • 자주 사용 하 는 dijit / Tooltip 방법 은 다음 과 같 습 니 다.
  • addTarget - 목표 에 연결 되 지 않 으 면 이 방법 으로 연결 목 표를 추가 할 수 있 습 니 다
  • close - Tooltip 인 스 턴 스 를 닫 고 보이 지 않 게 설정 합 니 다
  • open - Tooltip 인 스 턴 스 를 열 고 보 이 는 것 으로 설정 합 니 다
  • removeTarget - 특정한 노드 를 Tooltip 연결 대상 대기 열 에서 제거
  • set - 속성 값 을 변경 할 수 있 습 니 다. 대부분 Tooltip 의 내용 입 니 다. 예 를 들 어 (my Tip. set ("label", "New content!")
    • dijit / Tooltip 대상 에 설정 할 수 있 는 defaultPosition 대기 열 속성 이 있 습 니 다. Tooltip 인 스 턴 스 가 위 치 를 표시 하 는 순 서 를 제어 할 수 있 습 니 다.이 대기 열 은 개발 자의 필요 에 따라 변경 할 수 있 습 니 다.
    Tooltip.defaultPosition = ["above", "below", "after", "before"];메모: Tooltip. default Position 을 변경 하면 모든 Tooltip 인 스 턴 스 에 적 용 됩 니 다.
    dijit / Tooltip 사용 예시
    다음은 dijit / Tooltip 의 가장 일반적인 사용 예 입 니 다.
    설명 식 생 성 Tooltip
    <button id="TooltipButton" onmouseover="dijit.Tooltip.defaultPosition=['above', 'below']">Tooltip Above</button>
<div class="dijitHidden"><span data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'TooltipButton'">I am <strong>above</strong> the button</span></div>
 
<button id="TooltipButton2" onmouseover="dijit.Tooltip.defaultPosition=['below','above']">Tooltip Below</button>
<div class="dijitHidden"><span data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'TooltipButton2'">I am <strong>below</strong> the button</span></div>
 
<button id="TooltipButton3" onmouseover="dijit.Tooltip.defaultPosition=['after','before']">Tooltip After</button>
<div class="dijitHidden"><span data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'TooltipButton3'">I am <strong>after</strong> the button</span></div>
 
<button id="TooltipButton4" onmouseover="dijit.Tooltip.defaultPosition=['before','after']">Tooltip Before</button>
<div class="dijitHidden"><span data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'TooltipButton4'">I am <strong>before</strong> the button</span></div>

    예제 보기
    프로 그래 밍 생 성 Tooltip
    // Add Tooltip of his picture
new Tooltip({
    connectId: ["nameTip"],
    label: "<img src='rod-stewart.jpg' alt='Rod Stewart' width='300' height='404' />"
});
// Add Tooltip of North London
new Tooltip({
    connectId: ["londonTip"],
    label: "<img src='emirates-stadium.jpg' alt='The Emirates in London' width='400' height='267' />"
});
//Add Tooltip of record
new Tooltip({
    connectId: ["recordsTip"],
    label: "<img src='every-picture.jpg' alt='Every Picture Tells a Story' width='200' height='197' />"
});
// Add custom Tooltip
var myTip = new Tooltip({
    connectId: ["hoverLink"],
    label: "Don't I look funky?",
    "class": "customTip"
});

    예제 보기
    또 다른 예 - 작품 디 테 일
    <ul>
    <li><a href="http://www.imdb.com/title/tt0112573/" id="movieBraveheart">Braveheart</a></li>
    <li><a href="http://www.imdb.com/title/tt0237534/" id="movieBrotherhood">Brotherhood of the Wolf</a></li>
    <li><a href="http://www.imdb.com/title/tt0245844/" id="movieCristo">The Count of Monte Cristo</a></li>
</ul>
<div class="dijitHidden">
    <div data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'movieBraveheart'">
        <img style="width:100px; height:133px; display:block; float:left; margin-right:10px;" src="../images/braveheart.jpg" />
        <p style="width:400px;"><strong>Braveheart</strong><br />Braveheart is the partly historical, partly mythological, story of William Wallace, a Scottish common man who fights for his country's freedom from English rule around the end of the 13th century...</p>
        <br style="clear:both;">
    </div>
</div>
<div class="dijitHidden">
    <div data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'movieBrotherhood'">
        <img style="width:100px; height:133px; display:block; float:left; margin-right:10px;" src="../images/brotherhood.jpg" />
        <p style="width:400px;"><strong>Brotherhood of the Wolf</strong><br />In 1765 something was stalking the mountains of central France. A 'beast' that pounced on humans and animals with terrible ferocity...</p>
        <br style="clear:both;">
    </div>
</div>
<div class="dijitHidden">
    <div data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'movieCristo'">
        <img style="width:100px; height:133px; display:block; float:left; margin-right:10px;" src="../images/count.jpg" />
        <p style="width:400px;"><strong>The Count of Monte Cristo</strong><br />'The Count of Monte Cristo' is a remake of the Alexander Dumas tale by the same name. Dantes, a sailor who is falsely accused of treason by his best friend Fernand, who wants Dantes' girlfriend Mercedes for himself...</p>
        <br style="clear:both;">
    </div>
</div>

    기본 적 인 Tooltip 컨트롤 은 풍부 한 정보 표현 기능 을 제공 합 니 다. 그러나 하나의 컨트롤 이 더 많은 기능 을 제공 할 수 있다 면 Dijit 의 Dialog 컨트롤 은 완벽 한 선택 이 될 것 입 니 다!
    다이얼 로그 알 아 보기
    사용자 에 게 서 정 보 를 얻 거나 힌트 를 제공 해 야 할 때 브 라 우 저 는 원래 alert 와 confirm 방법 을 제공 하지만 너무 딱딱 하고 초라 합 니 다.다행히 Dojo Toolkit 은 dijit / Dialog 라 는 좋 은 선택 을 제공 했다.dijit / Tooltiip 처럼 dijit / Dialog 는 HTML 내용 을 포함 하고 테 마 를 맞 출 수 있 습 니 다.다음은 dijit / Dialog 의 용법 입 니 다.
    // Create a new instance of dijit/Dialog
var myDialog = new Dialog({
    // The dialog's title
    title: "The Dojo Toolkit",
    // The dialog's content
    content: "This is the dialog content.",
    // Hard-code the dialog width
    style: "width:200px;"
});

    dijit / Dialog 에 관 한 중요 한 요 소 는 Dialog 의 인 스 턴 스 가 하나의 '스 택' 위 에 누적 되 어 있 습 니 다. 그러면 여러 개의 Dialog 인 스 턴 스 를 겹 칠 수 있 습 니 다.
    displaying dialogs are also backed up by an iFrame so that they are ensured to always be "on top" of other elements. 여러 개의 Dialog 는 같은 dijit / Dialog Underlay 인 스 턴 스 를 공유 합 니 다.
    중요 한 dijit / Dialog 속성 은 다음 과 같 습 니 다.
  • content - Dialog 에 포 함 된 HTML 또는 텍스트 내용
  • draggable - 이 다이 어 로 그 를 끌 수 있 는 지 여부
  • href - Dialog 의 내용 이 Ajax 에서 호출 된다 면 href 는 콘 텐 츠 파일 의 경 로 를 가리킨다
  • loadingMessage - Ajax 내용 이 불 러 오고 있 을 때 Dialog 에 표 시 된 메시지 입 니 다.
  • open - true 를 되 돌려 줍 니 다. 이 Dialog 인 스 턴 스 가 열 려 있 는 상태 라면
  • title - Dialog 의 이름
    • 자주 사용 하 는 dijit / Dialog 방법
  • hide - dialog 와 underlay 숨 기기
  • refresh - 이 Dialog 가 Ajax 기반 이 라면 Dialog 내용 새로 고침
  • show - dialog 와 underlay 표시
    • dijit / Dialog 는 Dijit 컨트롤 이 가지 고 있 는 callback 방법 도 제공 합 니 다. 예 를 들 어 onShow, onHide, onLoad, onClick 등 입 니 다.
    dijit / Dialog 예제
    다음은 dijit / Dialog 에서 흔히 볼 수 있 는 예 입 니 다.
    예 - 사용 조례
    <script>
    // Require the Dialog class
    require(["dijit/registry", "dijit/Dialog"], function(registry) {
        // Show the dialog
        showDialog = function() {
            registry.byId("terms").show();
        }
        // Hide the dialog
        hideDialog = function() {
            registry.byId("terms").hide();
        }
    });
</script>
<button onclick="showDialog();">View Terms and Conditions</button>
 
<div class="dijitHidden">
    <div data-dojo-type="dijit.Dialog" style="width:600px;" data-dojo-props="title:'Terms and Conditions'" id="terms">
        <p><strong>Please agree to the following terms and conditions:</strong></p>
        <div style="height:160px;overflow-y:scroll;border:1px solid #769dc4;padding:0 10px;width:600px"><p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed suscipit massa. Aenean vel turpis tincidunt velit gravida venenatis. In iaculis urna non quam tincidunt elementum. Nunc pellentesque aliquam dui, ac facilisis massa sollicitudin et. Donec tincidunt vulputate ultrices. Duis eu risus ut ipsum auctor scelerisque non quis ante. Nam tempor lobortis justo, et rhoncus mauris cursus et. Mauris auctor congue lectus auctor ultrices. Aenean quis feugiat purus. Cras ornare vehicula tempus. Nunc placerat, lorem adipiscing condimentum sagittis, augue velit ornare odio, eget semper risus est et erat....
        </p></div>
     
        <button onclick="hideDialog();">I Agree</button>
        <button onclick="alert('You must agree!');">I Don't Agree</button>
    </div>
</div>

    예제 보기
    대화 상자 스 택
    <script>
    // Require the Dialog class
    require(["dijit/Dialog"], function(Dialog) {
        // Create counter
        var counter = 1;
        // Create a new Dialog
        createDialog = function(first) {
            // Create a new dialog
            var dialog = new Dialog({
                // Dialog title
                title: "New Dialog " + counter,
                // Create Dialog content
                content: (!first ? "I am a dialog on top of other dialogs" : "I am the bottom dialog") + "<br /><br /><button onclick='createDialog();'>Create another dialog.</button>"
            });
            dialog.show();
            counter++;
        }
    });
     
</script>
<button onclick="createDialog(true);">Create New Dialog</button>

    예제 보기
    Ajax 대화 상자 와 Black Underlay
    <style>
    /* colors the underlay black instead of white
     * We're using '.claro .dijitDialogUnderlay' as our selector,
     * to match the specificity in claro.css */
    .claro .dijitDialogUnderlay { background:#000; }
</style>
 
<script>
    // Require the Dialog class
    require(["dijit/registry", "dojo/parser", "dijit/Dialog"], function(registry) {
        // Show the dialog
        showDialog = function() {
            registry.byId("ajaxDialog").show();
        }
    });
</script>
     
<button onclick="showDialog();">Load Ajax Dialog</button>
 
<div class="dijitHidden">
    <!-- dialog that gets its content via ajax, uses loading message -->
    <div data-dojo-type="dijit.Dialog" style="width:600px;" data-dojo-props="title:'Ajax Dialog',href:'dialog-ajax.php',loadingMessage:'Loading dialog content...'" id="ajaxDialog"></div>
</div>

    예제 보기
    dijit / TooltipDialog 알 아 보기
    Dijit TooltipDialog 컨트롤 은 Tooltip 과 Dialog 의 장점 을 융합 시 켜 focus 를 얻 을 수 있 는 팝 업 콘 텐 츠 가 풍부 한 요 소 를 만 들 었 습 니 다.TooltipDialog 컨트롤 은 항상 아래 대화 상 자 를 당 기 는 형식 으로 다른 컨트롤 에서 열 립 니 다. 예 를 들 어 dijit / form / DropDownButton 에서 열 립 니 다.Tooltip 과 TooltipDialog 의 차 이 는 TooltipDialog 는 사용자 가 이 컨트롤 이외 의 요 소 를 클릭 할 때 까지 계속 열 려 있 는 상 태 를 유지 할 수 있다 는 것 이다.이렇게 하면 Tooltip 은 클릭 가능 한 링크, 폼 요소 등 을 포함 할 수 있다.
    dijit / TooltipDialog 는 Tooltip 과 Dialog 와 같은 속성 방법 과 사건 을 가지 고 있 습 니 다.
    dijit / TooltipDialog 예제
    드 롭 다운 버튼
    <script>
    // Require the Button, TooltipDialog, DropDownButton, and TextBox classes 
    require(["dijit/form/DropDownButton", "dijit/TooltipDialog", "dijit/form/TextBox", "dojo/parser"]);
     
</script>
<div data-dojo-type="dijit.form.DropDownButton">
    <span>Login</span><!-- Text for the button -->
    <!-- The dialog portion -->
    <div data-dojo-type="dijit.TooltipDialog" id="ttDialog">
        <strong><label for="email" style="display:inline-block;width:100px;">Email:</label></strong>
        <div data-dojo-type="dijit.form.TextBox" id="email"></div>
        <br />
        <strong><label for="pass" style="display:inline-block;width:100px;">Password:</label></strong>
        <div data-dojo-type="dijit.form.TextBox" id="pass"></div>
        <br />
        <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:doAlert" type="submit">Submit</button>
    </div>
</div>

    예제 보기
    대화 가능 한 팝 업 콘 텐 츠 가 필요 하고 완전한 Dialog 를 사용 하고 싶 지 않 을 때 TooltipDialog 는 가장 좋 은 선택 입 니 다.
    결론.
    Dojo 패 키 지 는 기본 적 인 상호작용 임 무 를 쉽게 수행 할 수 있 을 뿐만 아니 라 브 라 우 저 를 뛰 어 넘 는 일치 하고 유연 하 며 테마 맞 춤 형 컨트롤 도 제공 합 니 다.본 논문 에서 논의 한 컨트롤 은 브 라 우 저 자체 의 기본 기능 인 추가 선택 을 제공 합 니 다.dijit 의 Tooltip, Dialog 및 TooltipDialog 를 사용 하여 당신 의 사 이 트 를 풍부하게 하 는 것 을 환영 합 니 다!
    spring mvc 요청 controller 접근 방식
    6. spring 로 딩 과정의 refresh 과정 (5) spring 이벤트 트리거

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage