简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  文章  >  web前端  >  Magic 輕量級JavaScript UI元件圖文程式碼詳解

Magic 輕量級JavaScript UI元件圖文程式碼詳解

黄舟
黄舟原創
2017-03-13 17:13:142249瀏覽

Magic 輕量級JavaScript UI元件圖文程式碼詳解

#Magic是一款基於JavaScript的UI元件，Magic框架的程式碼量很少，運作效率非常出色。同時Magic包含了許多常用的網頁應用程式元件，包括圖片輪播、行事曆、對話方塊、分頁、選項卡Tab等UI元件。

Magic的特點

  • 底層函式庫基於百度的Tangram，Tangram是一款類似jQuery

    • #的JavaScript框架，最新的Magic可以選擇使用Tangram作為底層函式庫，同時也可以選擇jQuery作為底層函式庫，非常靈活。

    • Magic比較輕巧，對於其出色的功能來講，程式碼量已經非常少了。

    • 原始碼下載可自訂功能，你可以只打包你需要的功能，這樣一來框架更小了。

    • 提供完整的中文文檔，這在JavaScript UI框架中是比較少見的。

Magic的常用元件

介紹

別看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日曆元件

程式碼：

<!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對話方塊元件

##程式碼：

<!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元件可以存取其官方網站，同時你也可以參考其詳細的中文文件。





####

以上是Magic 輕量級JavaScript UI元件圖文程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：JavaScript中getter/setter實作的範例程式碼分享下一篇：JavaScript中getter/setter實作的範例程式碼分享

相關文章

看更多