Magic lightweight JavaScript UI component graphic code detailed explanation-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Magic lightweight JavaScript UI component graphic code detailed explanation

黄舟

Mar 13, 2017 pm 05:13 PM

Magic lightweightJavaScript Detailed explanation of graphic code of UI components

Magic is a JavaScript-based UI component, Magic framework The amount of code is very small and the running efficiency is excellent. At the same time, Magic includes many commonly used web application components, including picture carousels, calendars, dialog boxes, paging, tabs and other UI components.

Characteristics of Magic

The underlying library is based on Baidu’s Tangram, which is a tool similar to jQuery JavaScript framework, the latest Magic can choose to use Tangram as the underlying library, and you can also choose jQuery as the underlying library, which is very flexible.
Magic is relatively lightweight, and the amount of code is very small for its excellent functions.
Source code download has customizable functions. You can only package the functions you need, which makes the framework smaller.
Provides complete Chinese documentation, which is relatively rare in JavaScript UI frameworks.

Commonly used components of MagicIntroduction

Although Magic is small, its components are very complete. The development components you need to use are basically We have it all, let’s take a look.

Magic image carousel component

Code:

<!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="/static/imghwm/default1.png"  data-src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/0.png"  class="lazy"  / alt="Magic lightweight JavaScript UI component graphic code detailed explanation" >&#39;},
            {content: &#39;<img  src="/static/imghwm/default1.png"  data-src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/1.png"  class="lazy"  / alt="Magic lightweight JavaScript UI component graphic code detailed explanation" >&#39;},
            {content: &#39;<img  src="/static/imghwm/default1.png"  data-src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/2.png"  class="lazy"  / alt="Magic lightweight JavaScript UI component graphic code detailed explanation" >&#39;},
            {content: &#39;<img  src="/static/imghwm/default1.png"  data-src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/3.png"  class="lazy"  / alt="Magic lightweight JavaScript UI component graphic code detailed explanation" >&#39;},
            {content: &#39;<img  src="/static/imghwm/default1.png"  data-src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/4.png"  class="lazy"  / alt="Magic lightweight JavaScript UI component graphic code detailed explanation" >&#39;},
            {content: &#39;<img  src="/static/imghwm/default1.png"  data-src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/5.png"  class="lazy"  / alt="Magic lightweight JavaScript UI component graphic code detailed explanation" >&#39;},
            {content: &#39;<img  src="/static/imghwm/default1.png"  data-src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/6.png"  class="lazy"  / alt="Magic lightweight JavaScript UI component graphic code detailed explanation" >&#39;}
        ]
    });
    c.render(&#39;one-carousel&#39;);
});
</script>
</body>
</html>

Magic Calendar Component

Code:

<!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 id="DatePicker-nbsp">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 Component

Code ：

<!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>

For more Magic components, you can visit its official website, and you can also refer to its detailed Chinese documentation.

The above is the detailed content of Magic lightweight JavaScript UI component graphic code detailed explanation. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Python and JavaScript: Understanding the Strengths of EachMay 06, 2025 am 12:15 AM

Python and JavaScript each have their own advantages, and the choice depends on project needs and personal preferences. 1. Python is easy to learn, with concise syntax, suitable for data science and back-end development, but has a slow execution speed. 2. JavaScript is everywhere in front-end development and has strong asynchronous programming capabilities. Node.js makes it suitable for full-stack development, but the syntax may be complex and error-prone.

JavaScript's Core: Is It Built on C or C ?May 05, 2025 am 12:07 AM

JavaScriptisnotbuiltonCorC ;it'saninterpretedlanguagethatrunsonenginesoftenwritteninC .1)JavaScriptwasdesignedasalightweight,interpretedlanguageforwebbrowsers.2)EnginesevolvedfromsimpleinterpreterstoJITcompilers,typicallyinC ,improvingperformance.

JavaScript Applications: From Front-End to Back-EndMay 04, 2025 am 12:12 AM

JavaScript can be used for front-end and back-end development. The front-end enhances the user experience through DOM operations, and the back-end handles server tasks through Node.js. 1. Front-end example: Change the content of the web page text. 2. Backend example: Create a Node.js server.

Python vs. JavaScript: Which Language Should You Learn?May 03, 2025 am 12:10 AM

Choosing Python or JavaScript should be based on career development, learning curve and ecosystem: 1) Career development: Python is suitable for data science and back-end development, while JavaScript is suitable for front-end and full-stack development. 2) Learning curve: Python syntax is concise and suitable for beginners; JavaScript syntax is flexible. 3) Ecosystem: Python has rich scientific computing libraries, and JavaScript has a powerful front-end framework.

JavaScript Frameworks: Powering Modern Web DevelopmentMay 02, 2025 am 12:04 AM

The power of the JavaScript framework lies in simplifying development, improving user experience and application performance. When choosing a framework, consider: 1. Project size and complexity, 2. Team experience, 3. Ecosystem and community support.

The Relationship Between JavaScript, C , and BrowsersMay 01, 2025 am 12:06 AM

Introduction I know you may find it strange, what exactly does JavaScript, C and browser have to do? They seem to be unrelated, but in fact, they play a very important role in modern web development. Today we will discuss the close connection between these three. Through this article, you will learn how JavaScript runs in the browser, the role of C in the browser engine, and how they work together to drive rendering and interaction of web pages. We all know the relationship between JavaScript and browser. JavaScript is the core language of front-end development. It runs directly in the browser, making web pages vivid and interesting. Have you ever wondered why JavaScr

Node.js Streams with TypeScriptApr 30, 2025 am 08:22 AM

Node.js excels at efficient I/O, largely thanks to streams. Streams process data incrementally, avoiding memory overload—ideal for large files, network tasks, and real-time applications. Combining streams with TypeScript's type safety creates a powe

Python vs. JavaScript: Performance and Efficiency ConsiderationsApr 30, 2025 am 12:08 AM

The differences in performance and efficiency between Python and JavaScript are mainly reflected in: 1) As an interpreted language, Python runs slowly but has high development efficiency and is suitable for rapid prototype development; 2) JavaScript is limited to single thread in the browser, but multi-threading and asynchronous I/O can be used to improve performance in Node.js, and both have advantages in actual projects.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055523 fails to install in Windows 11?

3 weeks agoByDDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks agoByDDD

Roblox: Dead Rails - How To Tame Wolves

1 months agoByDDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Roblox: Grow A Garden - Complete Mutation Guide

2 weeks agoByDDD

Hot Tools

Zend Studio 13.0.1

Powerful PHP integrated development environment

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.