집 > 기사 > 웹 프론트엔드 > 마법의 경량 JavaScript UI 구성 요소 그래픽 코드 자세한 설명

마법의 경량 JavaScript UI 구성 요소 그래픽 코드 자세한 설명

黄舟원래의: 2017-03-13 17:13:142318검색

Magic 경량 JavaScript UI 컴포넌트의 그래픽 코드에 대한 자세한 설명

Magic은 JavaScript 기반의 UI 컴포넌트인 Magic 프레임워크입니다. 코드의 양이 매우 적고 실행 효율성이 뛰어납니다. 동시에 Magic에는 그림 회전판, 달력, 대화 상자, 페이징, 탭 및 기타 UI 구성 요소를 포함하여 일반적으로 사용되는 많은 웹 응용 프로그램 구성 요소가 포함되어 있습니다.

Magic의 특징

기본 라이브러리는 jQuery JavaScript 프레임워크인 최신 Magic에서는 Tangram을 기본 라이브러리로 사용하도록 선택할 수 있으며 jQuery를 기본 라이브러리로 선택할 수도 있는데 이는 매우 유연합니다.
Magic은 뛰어난 기능에 비해 코드의 양이 이미 매우 적습니다.
소스 코드 다운로드에는 필요한 기능만 패키징할 수 있으므로 프레임워크가 더 작아집니다.
은 JavaScript UI 프레임워크에서는 비교적 드물게 완전한 중국어 문서를 제공합니다.

Magic의 일반적으로 사용되는 구성 요소

소개

Magic은 작지만 필요한 구성 요소는 이미 매우 완벽합니다. 기본적으로 우리는 모든 것을 갖추고 있습니다. 살펴보겠습니다.

매직 이미지 캐러셀 구성요소

코드:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Carousel 组件 quickStart">
<title>图片轮播组件 quickStart</title>
<script type="text/javascript" src="http://fe.bdimg.com/tangram/2.0.1.2.js"></script>
<link rel="stylesheet" type="text/css" href="http://tangram.baidu.com/bcs/magic-586/resources/default/common/common.css">
<link rel=&#39;stylesheet&#39; type=&#39;text/css&#39; href=&#39;http://tangram.baidu.com/bcs/magic-586/resources/default/magic.control.Carousel/magic.control.Carousel.css&#39;>
<script type=&#39;text/javascript&#39; src=&#39;http://tangram.baidu.com/imports.php?f=magic.Carousel.$button&#39;></script>
<style type=&#39;text/css&#39;>
.tang-carousel {
    width: 644px;
    height: 140px;
}
.tang-carousel .tang-carousel-container ul,
.tang-carousel .tang-carousel-container ul li,
.tang-carousel .tang-carousel-container ul li img {margin: 0px; padding: 0px;}
</style>
</head>
<body>
<p id=&#39;one-carousel&#39;></p>
<script type=&#39;text/javascript&#39;>
baidu(function(){
    var c = new magic.Carousel({
        viewSize: 4,
        originalIndex: 0,
        items: [
            {content: &#39;<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/0.png"/>&#39;},
            {content: &#39;<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/1.png"/>&#39;},
            {content: &#39;<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/2.png"/>&#39;},
            {content: &#39;<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/3.png"/>&#39;},
            {content: &#39;<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/4.png"/>&#39;},
            {content: &#39;<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/5.png"/>&#39;},
            {content: &#39;<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/6.png"/>&#39;}
        ]
    });
    c.render(&#39;one-carousel&#39;);
});
</script>
</body>
</html>

Magic Calendar 구성 요소

코드:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="description" content="DatePicker 组件quickStart">
        <title>日历组件quickStart</title>
        <link rel="stylesheet" type="text/css" href="http://tangram.baidu.com/bcs/magic-586/resources/default/common/common.css">
        <script type="text/javascript" src="http://fe.bdimg.com/tangram/2.0.1.2.js"></script>
        <script type="text/javascript" src="http://tangram.baidu.com/bcs/magic-586/demos/common/demo.js"></script>
        <link rel="stylesheet" type="text/css" href="http://tangram.baidu.com/bcs/magic-586/resources/default/magic.Calendar/magic.Calendar.css">
        <script type="text/javascript" src=&#39;http://tangram.baidu.com/imports.php?f=magic.setup.datePicker,magic.control.DatePicker.$title&#39;></script>
    </head>
    <body>
        <p class=&#39;demo&#39;>
            <h1>DatePicker </h1>
            <form autocomplete="off">
                <p>选择日期：<input type="text" id="J_input" /></p>
            </form>
        </p>
        <script type="text/javascript">
            var datepicker = new magic.setup.datePicker(&#39;J_input&#39;, {
                    &#39;title&#39;: {
                        enable: false
                    }
                }
            );
        </script>
    </body>
</html>

Magic Dialog 구성 요소

코드 ：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="description" content="Dialog 组件quickStart">
        <script type="text/javascript" src="http://fe.bdimg.com/tangram/2.0.1.2.js"></script>
        <link rel="stylesheet" type="text/css" href="http://tangram.baidu.com/bcs/magic-586/resources/default/common/common.css">
        <link rel="stylesheet" type="text/css" 
        href="http://tangram.baidu.com/bcs/magic-586/resources/default/magic.control.Dialog/magic.control.Dialog.css">
        <script type="text/javascript" src="http://tangram.baidu.com/imports.php?f=magic.Dialog"></script>
        <title>对话框组件quickStart</title>
    </head>
    <body>
        <p id="one-dialog">
        </p>
        <script type="text/javascript">
            var dialog = new magic.Dialog({
                draggable: true,
                titleText: "对话框标题",
                content: "对话框内容",
                left: 80,
                top: 40,
                width: 400,
                height: 300
            });
            dialog.render("one-dialog");
        </script>
    </body>
</html>

더 많은 Magic 구성 요소를 보려면 해당 공식 웹사이트를 방문하고 자세한 중국어 설명서를 참조할 수도 있습니다.

위 내용은 마법의 경량 JavaScript UI 구성 요소 그래픽 코드 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：JavaScript의 getter/setter 구현을 위한 샘플 코드 공유다음 기사：JavaScript의 getter/setter 구현을 위한 샘플 코드 공유