使用Safe.js进行快速开发搜索引擎页面实践


声明:本文转载自https://my.oschina.net/u/3754126/blog/1812954,转载目的在于传递更多信息,仅供学习交流之用。如有侵权行为,请联系我,我会及时删除。

这篇文章将会讲解如何使用safe.js快速开发一个web应用程序。

前言:

在这篇文章里面,我就简单制作一个类似于搜索引擎的页面

【本文不会讲解safe.js每句代码的具体作用,如果想了解请点击此链接:https://gitee.com/skyogo/Safe/wikis/Safe.js

开始:

首先我们先建立一个Demo.html的文件,里面写上基本结构,并用script标签引入safe.js的文件:(Safe.js Gitee链接:https://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>

然后我们在<body>标签里面写上一个img标签,作为我们搜索引擎的logo图片,这里我先使用百度的logo图片,然后将图片的高度设置为120px,id设置为logo:

<img height="120px" id="logo" src="http://www.baidu.com/img/bd_logo1.png">

接着我们要设置body标签的text-align属性,设置为居中。

此时我们就可以使用safe.js了,请在<script>里面写上如下代码:

new safeInit({     el: "body",     css: {         textAlign: "center"     } })

这时我们打开浏览器,就可以看到样式已经出来了。

此时我们在img标签下面写上两个<br>(为了美观......)

然后再写上一个input标签,id为text,其它什么值都不用设置。

然后我们再在<script>里写一段safe.js代码:

new safeInit({     el: "#text",     attr: {         type: "text",         placeHolder: "请输入内容:"     },     css: {         height: "45px",         width: "580px",         border: "1px solid gray",         outline: "none",         fontSize: "18px",         padding: "10px",         boxSizing: "border-box"     } })

然后再在input后面写上一对button标签,id为btn,里面写上“搜索”

然后我们再在<script>里写一段safe.js代码:

new safeInit({     el: "#btn",     css: {         height: "45px",         width: "90px",         background: "#38f",         outline: "none",         border: "none",         color: "white",         fontSize: "18px",     } })

然后我们现在打开浏览器看下样式:

看,搜索框和按钮都出现在屏幕上了!

现在我们看一下总体的代码:

<!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">搜索</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: "580px",                     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>

然后现在我们在el属性为#btn的safeInit方法里面再加入一个属性:click

现在这个el属性为#btn的safeInit方法是这样的:

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);     } })

ok,现在我们来运行一下Demo.html文件:

当点击btn时,会发现我们已经成功了:

结尾:

是不是特别便捷?只用了短短50行代码,并且使用safe.js代码可读性会非常高!

最后放出全部代码和safe.js的下载地址:

<!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">搜索</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: "580px",                     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",                 },                 click: function(){                     alert("你输入的字符为:"+document.getElementById("text").value);                 }             })         </script>     </body> </html>

Safe.js下载地址:

https://gitee.com/skyogo/Safe

本文发表于2018年05月15日 20:00
(c)注:本文转载自https://my.oschina.net/u/3754126/blog/1812954,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除.

阅读 1965 讨论 0 喜欢 0

抢先体验

扫码体验
趣味小程序
文字表情生成器

闪念胶囊

你要过得好哇,这样我才能恨你啊,你要是过得不好,我都不知道该恨你还是拥抱你啊。

直抵黄龙府,与诸君痛饮尔。

那时陪伴我的人啊,你们如今在何方。

不出意外的话,我们再也不会见了,祝你前程似锦。

这世界真好,吃野东西也要留出这条命来看看

快捷链接
网站地图
提交友链
Copyright © 2016 - 2021 Cion.
All Rights Reserved.
京ICP备2021004668号-1