关于前端的一些基本操作还是需要记录和掌握(不要用完就忘)
前言
每每修改前端页面,浑身上下似乎都在抗议,主要表现为:
- 稍稍改动就要切换浏览器刷新页面,手指头难受
- 每次DOM操作都要百度,改完就忘,很是崩溃
- 写js不能按照php的写法,写完之后自己都无法直视
- 如果遇到又原生、又丑、又乱的页面,简直就疯了
- 前段页面写的页面垃圾,后端就该哭了
- 对JS掌握前,很多时候底层报错完全不知道怎么回事
今天主要是对原生的html、css、js做了修改,主要集中在两个方面
- 表单改为bootstrap
- 使用了select2插件
Bootstrap 的使用
官网:http://www.bootcss.com/
使用 CDN加速引入Bootstrap 资源
使用bootstrap的css和js几种途径,官网都有介绍,比如直接下载、Npm 、Bower、Composer等等这些很强大很方便,但是对于我们PHP工程师操作不同环境的项目来说,我会直接推荐使用CDN。
<!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件(一般不用引入) --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
提示框
这是使用bootstrap最常用的东西
<div class="alert alert-danger" role="alert"> <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> <span class="sr-only">Error:</span> Enter a valid email address </div>
图标
bootstrap的所有图标,也会经常用到
https://v3.bootcss.com/components/
select2 替代原生选择框
和bootstrap一样,select2的安装方式也有好几种,不过我还是推荐使用CDN方式直接引入
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
使用方法非常简单
// 单选带搜索,html 部分,不要复制注释
<select class="js-example-basic-single" name="state"> <option value="AL">Alabama</option> ... <option value="WY">Wyoming</option> </select>
<script type='text/javascript'> // js部分 $(document).ready(function() { $('.js-example-basic-single').select2(); }); </script>
jquery的验证 (Validate)
菜鸟教程 :http://www.runoob.com/jquery/jquery-plugin-validate.html
<form id='addMessageForm'> <input type='title' required>标题 .... </form> // 这是js代码 $("#addMessageForm").validate();
可以看到使用起来非常的方便,在input控件上加入required就可以限制不能为空,其他的详细规则看菜鸟教程还是非常的详细的。