Ajax+LayUI

12. jQuery中Ajax处理

1）简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

2） jQuery 发送Ajax请求

$.get(
    url ,   // 所请求服务器端网址
    [data , ]  // 上传数据，可以组织成js对象形式，也可以是name=value&name=value&...形式
    function(responseData){ // 请求成功回调函数，responseData是服务器端回传的数据
        // 请求成功后逻辑处理
    }
);
// get 请求方式，一般将额外上传的数据，绑定在url上：url?name=value&...
$.post(
    url ,   // 所请求服务器端网址
    [data , ]  // 上传数据
    function(responseData){ // 请求成功回调函数，responseData是服务器端回传的数据
        // 请求成功后逻辑处理
    }
);
// 文件上传必须使用该方法
$.ajax({
    type : 'get|post' ,
    url : 'url' ,
    data : 上传数据 ,
    dataType : 预期服务器返回的数据格式，比如'json' ,
    contentType : '如果文件上传设置该属性' ,
    async : '文件上传设置该属性，并且为false' ,
    success : function(responseData){
    
    } ,
    error :  function(){
    
    }     
})

12. html5的数据存储

1）html5增加的客户端数据存储

客户端存储数据的两个对象为：

  • localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

  • sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

tip : 只能存储String格式数据，可以通过JSON.stringfy()存储更多数据

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();

 

0409——LayUI（2.5.7）

1. 简介

-- 封装HTML/CSS/JavaScript的前端库，面向全层次的前后端开发者，易上手开箱即用的 Web UI 组件库

-- 快速搭建页面

-- 全局CSS样式，基本都以 "layui-"

-- 交互，依赖js，基本都以"layer-"

-- 有些页面元素的实现，依赖于模块，需要加载模块

layui.use(['modelName' , 'modelName'] , function(){

var 变量名 = layui.模块名;

....

});

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用layui</title>
<!-- 修改路径 -->
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>

<!-- 你的HTML代码 -->

<!-- 修改路径 -->
<script src="../layui/layui.js"></script>
<!-- 加载所需要的模块 -->
<script>
//一般直接写在一个js文件中
layui.use([..], function(){
...
});
</script>
</body>
</html>

2. 布局

div

1）固定宽度 class="layui-container"

2）不固定宽度class="layui-fluid"

3. 栅格

具备响应式能力的栅格系统。将容器进行了 12 列。

tip : 栅格需要放入布局容器才能使用

div

1.采用 layui-row 来定义行，如：<div class="layui-row"></div>
2. 采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：变量md 代表的是不同屏幕下的标记（可选值见下文）变量* 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。
3. 列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。
4. 可对列追加 layui-col-md-offset * 这样的预设类来定义列偏移。
5. 可对行追加 layui-col-layui-col-space* 这样的预设类来定义列间距。 支持列之间为 1px-30px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔

【注意】设置列间距，列内容放置在一个独立div上才可以发挥作用

<div class="layui-row layui-col-space10">
<div class="layui-col-md4">
<div class="layui-bg-gray">
1/3
</div>
</div>
<div class="layui-col-md4">
<div class="layui-bg-green">
1/3
</div>
</div>
<div class="layui-col-md4">
<div class="layui-bg-gray">
1/3
</div>
</div>
</div>

<h3>移动设备、平板、桌面端的不同表现</h3>
<div class="layui-row">
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
移动：6/12 | 平板：6/12 | 桌面：4/12
</div>
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
移动：6/12 | 平板：6/12 | 桌面：4/12
</div>
<div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
移动：4/12 | 平板：12/12 | 桌面：4/12
</div>
<div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
移动：4/12 | 平板：7/12 | 桌面：8/12
</div>
<div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
移动：4/12 | 平板：5/12 | 桌面：4/12
</div>
</div>

4. 后台布局

5. 颜色

layui 内置了七种背景色，以便你用于各种元素中，如：徽章、分割线、导航等等

  • 赤色：class="layui-bg-red"

  • 橙色：class="layui-bg-orange"

  • 墨绿：class="layui-bg-green"

  • 藏青：class="layui-bg-cyan"

  • 蓝色：class="layui-bg-blue"

  • 雅黑：class="layui-bg-black"

  • 银灰：class="layui-bg-gray"

6. 字体图标

从 layui 2.3.0 开始，支持 font-class 的形式定义图标：
<i class="layui-icon layui-icon-?"></i>

也可以设置它的颜色或者大小，如：
<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>

7. 徽章

徽章具有三种不同的风格类型：小圆点、椭圆体、边框体

可以搭配七种颜色

小圆点 layui-badge-dot

椭圆体 layui-badge

边框体 layui-badge-rim

8. 引用 blockquote修饰

<blockquote class="layui-elem-quote">引用区域的文字</blockquote>
<blockquote class="layui-elem-quote layui-quote-nm">引用区域的文字</blockquote>

 

<div class="layui-field-box">

9 . fieldset 字段区域

两种风格

默认风格 <fieldset class="layui-elem-field">

标题线风格 <fieldset class="layui-elem-field layui-field-title">

正文的内容使用如下样式

    <div class="layui-field-box">
        内容区域
    </div>

10. 水平线

<hr class="layui-bg-?" />  <!-- v2.5.7 -->
<hr class="layui-border-?" />  <!-- v2.6.4 -->

 

0412

1. 表单

tip : 依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）

【注意】

-- 添加form模块依赖

-- 单选框与复选框页面显示信息文本，通过title属性来完成设置

-- 开关风格的复选框使用 lay-text="开文本|关文本"

普通表单
-- layui-form  layui-form-pane
    -- layui-form-item   [layui-form-text]
        -- layui-form-label
        -- layui-form-block|layui-form-inline
            -- 单行、密码 layui-input
            -- 复选框   title=""               pane
                        lay-skin="switch"  lay-text="on|off"        pane
            -- 单选框  title=""        pane
            -- select
            -- textarea    layui-textarea
            -- 其他辅助信息  layui-form-mid   
                           layui-word-aux
行内表单
    一行内的所有元素放入一个  layui-form-item
        -- layui-inline
            -- layui-form-label
            -- layui-form-inline    可以额外设置 style来修改宽度
                ....
layui.use(['form'] , function(){
    var form = layui.form ;
});

2. 导航

tip: 依赖模块 element

-- 容器 ul，二级菜单  dl + dd
-- layui-nav  layui-nav-tree  layui-nav-side
    -- layui-nav-item
    -- 二级菜单  dl   layui-nav-child
    -- 内部图片   layui-nav-img
    -- 选中项   layui-this

3. 面包屑导航

-- 容器 span
-- layui-breadcrumb
-- lay-seperator='间隔符'

4. 选择卡

tip : 依赖element模块

    <!--<div class="layui-tab">-->
    <!--<div class="layui-tab layui-card">-->
    <!--<div class="layui-tab layui-tab-brief">-->
    <div class="layui-tab" lay-allowClose="true">
        <ul class="layui-tab-title">
            <li class="layui-this"> .... </li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">...</div>
        </div>
    </div>

 

 

posted @ 2021-04-09 20:15  YangYuJia  阅读(141)  评论(0)    收藏  举报