This article will show you how to quickly develop a Web application using safe.js.
Preface:
In this article, I will simply create a page similar to a search engine
This article will not explain how each sentence of safe.js code works. If you want to know more, please click here: gitee.com/skyogo/Safe…
Start:
First we will create a demo.html file with the basic structure in it and import the safe.js file with script tags: (safe.js Gitee link: gitee.com/skyogo/Safe)
<! DOCTYPE html> <html> <head> <title>Safe.js Demo</title> <meta charset="UTF-8"> </head> <body> <script src="js/Safe.js"></script> <script> </script> </body> </html>Copy the codeThen we write an IMG tag inside the <body> tag as the logo image of our search engine. Here I first use baidu’s logo image, and then set the height of the image to 120px and the ID to logo:
<img height="120px" id="logo" src="http://www.baidu.com/img/bd_logo1.png">Copy the codeNext we’ll set the text-align property of the body tag to center.
At this point we can use safe.js, please write the following code in <script> :
new safeInit({
el: "body",
css: {
textAlign: "center"
}
})Copy the codeWhen we open the browser, we can see that the style is already there.
At this point we write two <br> under the img tag (for aesthetics……)
And then an input tag with the ID text and nothing else.
Then we will write safe.js code in <script> :
New safeInit({el: "#text", attr: {type: "text", placeHolder: "placeHolder"), CSS: {height: "45px", width: "580px", border: "1px solid gray", outline: "none", fontSize: "18px", padding: "10px", boxSizing: "border-box" } })Copy the codeAnd then I’m going to put a pair of button tags behind the input, id BTN, inside which I’m going to say “search”
Then we will write safe.js code in <script> :
new safeInit({
el: "#btn",
css: {
height: "45px",
width: "90px",
background: "#38f",
outline: "none",
border: "none",
color: "white",
fontSize: "18px",
}
})Copy the codeNow let’s open the browser and look at the styles:
Look, the search box and the button appear on the screen!
Now let’s look at the overall code:
<! DOCTYPE html> <html> <head> <title>Safe.js Demo</title> <meta charset="UTF-8"> </head> <body> <img height="120px" Id = "logo" SRC = "http://www.baidu.com/img/bd_logo1.png" > < br > < br > < input id = "text" > < button id = "BTN" > search < / button > < script src="js/Safe.js"></script> <script> new safeInit({ el: "body", css: { textAlign: "center" } }) new safeInit({ el: "#text", attr: {type: "text", placeHolder: "}, CSS: {height: "45px", width: "40px ", border: "1px solid gray", outline: "none", fontSize: "18px", padding: "10px", boxSizing: "border-box" } }) new safeInit({ el: "#btn", css: { height: "45px", width: "90px", background: "#38f", outline: "none", border: "none", color: "white", fontSize: "18px", } }) </script> </body> </html>Copy the codeAnd now we add another attribute: click to the safeInit method whose el attribute is # BTN
Now the safeInit method with the el attribute # BTN looks like this:
new safeInit({ el: "#btn", css: { height: "45px", width: "90px", background: "#38f", outline: "none", border: "none", color: "white", fontSize: "18px", }, click: Function (){alert(" + document.getelementById ("text").value); }})Copy the codeOk, now let’s run the demo.html file:
When you click on BTN, you will see that we have succeeded:
The end:
Is it particularly convenient? It’s only 50 lines of code, and the code with safe.js is very readable!
Finally, release the entire code and safe.js download address:
<! DOCTYPE html> <html> <head> <title>Safe.js Demo</title> <meta charset="UTF-8"> </head> <body> <img height="120px" Id = "logo" SRC = "http://www.baidu.com/img/bd_logo1.png" > < br > < br > < input id = "text" > < button id = "BTN" > search < / button > < script src="js/Safe.js"></script> <script> new safeInit({ el: "body", css: { textAlign: "center" } }) new safeInit({ el: "#text", attr: {type: "text", placeHolder: "}, CSS: {height: "45px", width: "40px ", border: "1px solid gray", outline: "none", fontSize: "18px", padding: "10px", boxSizing: "border-box" } }) new safeInit({ el: "#btn", css: { height: "45px", width: "90px", background: "#38f", outline: "none", border: "none", color: }, click: function(){alert(" + document.getelementById ("text").value); } }) </script> </body> </html>Copy the codeSafe.js download address:
gitee.com/skyogo/Safe