分类前端技术下的文章

2024-08-15




// 引入jQuery和jQuery.blockUI插件
// <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
// <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>
 
// 页面加载完成后执行
$(document).ready(function() {
    // 绑定按钮点击事件
    $('#button').click(function() {
        // 使用blockUI显示遮罩层
        $.blockUI({ 
            message: '<h1>正在处理...</h1>', 
            css: { 
                border: '1px solid #aaa', 
                padding: '10px', 
                backgroundColor: '#fff', 
                '-webkit-border-radius': '10px', 
                '-moz-border-radius': '10px', 
                opacity: .9, 
                color: '#000'
            }
        });
 
        // 模拟异步操作，例如Ajax请求
        setTimeout(function() {
            // 取消遮罩层
            $.unblockUI();
        }, 2000); // 假设异步操作耗时2秒
    });
});
 
// HTML结构
// <button id="button">执行异步操作</button>

这段代码演示了如何使用jQuery的blockUI插件来在执行异步操作时显示一个加载提示。当用户点击按钮时，会出现一个遮罩层显示“正在处理...”，并且在2秒后消失。这种方法提高了用户体验，特别是在执行耗时操作时。

- 阅读更多 -

「jQuery系列」jQuery 校验表单（Validate）

System

2024-08-15

所有,jquery




// 确保在文档完全加载后执行
$(document).ready(function() {
    // 验证表单
    $('#form-validate').validate({
        // 设置验证规则
        rules: {
            name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 5
            },
            password_confirmation: {
                required: true,
                equalTo: '#password'
            },
            terms: {
                required: true
            }
        },
        // 设置错误消息
        messages: {
            name: {
                required: "请输入您的姓名",
                minlength: "姓名至少需要两个字符"
            },
            email: "请输入一个有效的电子邮件地址",
            password: {
                required: "请输入一个密码",
                minlength: "密码至少需要5个字符"
            },
            password_confirmation: {
                required: "请确认您的密码",
                equalTo: "两次输入的密码不一致"
            },
            terms: "请接受服务条款"
        },
        // 设置错误提示的样式
        errorElement: 'span',
        errorPlacement: function(error, element) {
            error.addClass('invalid-feedback');
            element.closest('.form-group').append(error);
        },
        highlight: function(element, errorClass, validClass) {
            $(element).addClass('is-invalid');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).removeClass('is-invalid');
        }
    });
});

这段代码使用jQuery插件jQuery Validate来验证一个表单。它设置了各表单字段的验证规则和错误消息，并定义了错误提示的样式。当文档加载完成后，它会自动应用验证规则，如果用户试图提交含有无效数据的表单，它会显示错误消息并为字段添加相应的样式。

- 阅读更多 -

1.electron之纯原生js/jquery的桌面应用程序（基础篇）

System

2024-08-15

所有,jquery

创建一个简单的Electron应用，使用纯原生的JavaScript或者jQuery来构建用户界面。

首先，确保你已经安装了Node.js和npm。

创建一个新的项目文件夹，并在命令行中运行以下命令来初始化一个新的npm项目：




mkdir electron-quick-start
cd electron-quick-start
npm init -y

安装Electron作为开发依赖项：




npm install electron --save-dev

在项目根目录下创建一个名为main.js的文件，它将作为主进程的入口点：




const { app, BrowserWindow } = require('electron');
 
function createWindow () {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  win.loadFile('index.html');
}
 
app.whenReady().then(createWindow);

在项目根目录下创建一个名为index.html的文件，它将作为你的应用程序的界面：




<!DOCTYPE html>
<html>
  <head>
    <title>Electron App</title>
  </head>
  <body>
    <h1>Hello Electron!</h1>
    <!-- 这里可以添加纯JavaScript或jQuery代码 -->
  </body>
</html>

在package.json中添加一个启动脚本：




"scripts": {
  "start": "electron ."
}

最后，在命令行中运行你的应用：




npm start

这个简单的应用程序将启动一个Electron窗口，加载index.html文件。你可以在index.html文件的<body>标签中添加更多的JavaScript或jQuery代码来增强应用程序的功能。

- 阅读更多 -

轻量级富文本编辑 Trumbowyg —— 基于 jQuery 插件配置

System

2024-08-15

所有,jquery




// 引入Trumbowyg的CSS文件
import 'trumbowyg/dist/ui/trumbowyg.css';
// 引入Trumbowyg的jQuery插件
import $ from 'jquery';
import 'trumbowyg';
 
// 初始化Trumbowyg富文本编辑器
$(function() {
    $('#editor').trumbowyg({
        // 在这里配置你的富文本编辑器选项
        btns: [
            ['formatting'],
            ['strong', 'em'],
            ['link'],
            ['insertImage'],
            ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
            ['unorderedList', 'orderedList'],
            ['removeformat'],
            ['fullscreen']
        ],
        // 其他配置...
    });
});

这段代码演示了如何在一个Web项目中引入和配置Trumbowyg富文本编辑器。首先，我们通过import语句引入了必要的CSS和jQuery插件。然后，在DOM准备就绪后，我们初始化了编辑器，并配置了一些基本的按钮和选项。这是一个简洁且有效的配置示例。

- 阅读更多 -

jQuery i18n - 实现网站国际化

System

2024-08-15

所有,jquery




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery i18n 实现网站国际化</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="path/to/jquery.i18n.properties.min.js"></script>
    <script>
        // 加载国际化资源文件
        $.i18n.properties({
            name: 'Messages', // 资源文件名称
            path: 'locales/', // 资源文件所在目录路径
            mode: 'map', // 加载方式
            callback: function() { // 加载完成后的回调函数
                // 使用国际化文本
                $('#welcomeMessage').text($.i18n.prop('welcome.message'));
            }
        });
    </script>
</head>
<body>
    <div id="welcomeMessage"></div>
</body>
</html>

这个代码示例展示了如何使用jQuery i18n插件加载国际化资源文件，并将其应用到网页元素中。在实际应用中，你需要将path/to/jquery.i18n.properties.min.js替换为实际的jQuery i18n插件路径，并确保locales/目录下存在相应的国际化资源文件，例如Messages_en.properties和Messages_zh.properties等。

System

2024-08-15

所有,html




import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;
 
import com.alibaba.excel.EasyExcel;
 
import java.io.File;
import java.util.ArrayList;
import java.util.List;
 
public class WebCrawler {
 
    public static void main(String[] args) {
        String url = "http://example.com"; // 替换为目标网页地址
        Document doc = null;
        try {
            doc = Jsoup.connect(url).get();
        } catch (Exception e) {
            e.printStackTrace();
        }
 
        // 使用Jsoup解析网页
        Elements elements = doc.select("div.item"); // 根据实际HTML结构选择合适的CSS选择器
        List<Item> itemList = new ArrayList<>();
        for (Element element : elements) {
            Item item = new Item();
            item.setName(element.select("h3").text());
            item.setDescription(element.select("p").text());
            // 根据实际HTML结构选择合适的CSS选择器填充数据
            itemList.add(item);
        }
 
        // 使用EasyExcel将数据写入Excel文件
        String fileName = "output.xlsx";
        try {
            EasyExcel.write(fileName, Item.class).sheet("Sheet1").doWrite(itemList);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
 
    static class Item {
        private String name;
        private String description;
 
        // 省略getter和setter方法
 
        public void setName(String name) {
            this.name = name;
        }
 
        public void setDescription(String description) {
            this.description = description;
        }
    }
}

这段代码展示了如何使用Jsoup库来爬取一个网页的内容，并使用EasyExcel库将爬取的数据导出为Excel文件的基本步骤。在实际应用中，你需要替换url变量的值为你要爬取的目标网页，并根据目标网页的HTML结构调整doc.select()方法中的CSS选择器。同时，Item类应包含对应于你想要抓取的数据的字段和相应的getter和setter方法。

- 阅读更多 -

h5前端开发，web前端CSS全局样式全局css

System

2024-08-15

所有,css

在H5前端开发中，我们通常需要定义一些全局的CSS样式，这样可以保证整个网站或应用的一致性。以下是一些常见的全局CSS样式的定义方法：

在单独的CSS文件中定义全局样式，然后在HTML文件中引入这个CSS文件。




<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>




/* styles.css */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f8f8f8;
    color: #333;
}
 
a {
    text-decoration: none;
    color: #0366d6;
}
 
/* 更多全局样式 */

使用HTML的<style>标签直接在头部定义全局样式。




<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f8f8f8;
            color: #333;
        }
 
        a {
            text-decoration: none;
            color: #0366d6;
        }
 
        /* 更多全局样式 */
    </style>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

使用CSS预处理器（如Sass、Less）定义全局样式，然后编译成CSS文件。




// variables.scss
$font-family: 'Arial', sans-serif;
$background-color: #f8f8f8;
$text-color: #333;
$link-color: #0366d6;
 
// global.scss
body {
    font-family: $font-family;
    background-color: $background-color;
    color: $text-color;
}
 
a {
    text-decoration: none;
    color: $link-color;
}
 
// 更多全局样式

在实际开发中，你可以根据项目的需求和规模来选择合适的方式来定义全局样式。通常，我们推荐使用第一种方法，即将全局样式定义在一个单独的CSS文件中，并在HTML中通过<link>标签引入，这样可以保持代码的整洁和可维护性。

- 阅读更多 -

tab切换（用jQuery实现）?

System

2024-08-15

所有,jquery

使用jQuery实现Tab切换功能是一个常见的任务。以下是一个简单的实现方式：

HTML结构：




<div class="tabs">
  <div class="tab" data-target="#tab1">Tab 1</div>
  <div class="tab" data-target="#tab2">Tab 2</div>
  <div class="tab" data-target="#tab3">Tab 3</div>
</div>
<div class="tab-content" id="tab1">
  Content for tab 1
</div>
<div class="tab-content" id="tab2" style="display:none;">
  Content for tab 2
</div>
<div class="tab-content" id="tab3" style="display:none;">
  Content for tab 3
</div>

CSS样式：




.tab-content {
  display: none;
}
.active-tab {
  background-color: #f0f0f0;
}

jQuery代码：




$(document).ready(function() {
  $('.tab').click(function() {
    // 移除所有tab的激活状态
    $('.tab').removeClass('active-tab');
    // 显示对应内容区域，隐藏其他区域
    $('.tab-content').hide();
    var target = $(this).data('target');
    $(target).show();
    // 添加当前点击的tab的激活状态
    $(this).addClass('active-tab');
  });
});

确保在你的HTML文件中引入了jQuery库。

这段代码实现了基本的Tab切换功能，点击.tab元素时，会显示对应的.tab-content，同时添加.active-tab类来突出当前激活的Tab。其他未激活的Tab不会显示，并且移除.active-tab类。

- 阅读更多 -

nodejs+vue+ElementUi慈善公益捐献捐款捐赠系统

System

2024-08-15

所有,elementui

以下是一个简化的Vue项目结构，用于创建一个基于Node.js、Vue和Element UI的慈善公益捐献系统。

安装Node.js环境。
使用Vue CLI创建项目：
```
vue create charity-system
```
进入项目目录：
```
cd charity-system
```
添加Element UI：
```
vue add element
```
创建后端服务器，比如使用Express：
```
npm install express
```
创建 server.js 并设置基本路由。

在Vue项目中创建一个CharityComponent.vue组件，用于施展公益活动：




<template>
  <div>
    <el-input v-model="donationAmount" placeholder="请输入捐赠金额"></el-input>
    <el-button @click="donate">捐赠</el-button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      donationAmount: ''
    };
  },
  methods: {
    donate() {
      // 这里添加代码以处理捐赠逻辑，例如向后端发送请求
    }
  }
};
</script>

设置后端API路由，处理捐赠请求。
启动前端和后端服务：
```
npm run serve
```
和
```
node server.js
```

以上是一个简化的教学示例，实际系统中还需要加入数据库、支付系统等复杂功能。

- 阅读更多 -

【ElementUI】el-table中复选框禁用处理

System

2024-08-15

所有,elementui

在ElementUI的el-table组件中，如果你想要禁用某些行的复选框，可以通过disabled属性来控制。你需要确保你的el-table使用了:row-class-name属性来为你想要禁用复选框的行添加一个特定的类名。

以下是一个简单的例子，展示如何禁用第二行的复选框：




<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      type="selection"
      width="55">
      <template slot-scope="scope">
        <el-checkbox
          :disabled="isRowDisabled(scope.row)"
          v-model="scope.row.checked">
        </el-checkbox>
      </template>
    </el-table-column>
    <!-- 其他列的定义 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, label: '行1', checked: false },
        { id: 2, label: '行2', checked: false, _disabled: true },
        { id: 3, label: '行3', checked: false }
      ]
    };
  },
  methods: {
    isRowDisabled(row) {
      return row._disabled === true;
    },
    handleSelectionChange(selection) {
      // 你的处理逻辑
    }
  }
};
</script>

在这个例子中，我们定义了一个isRowDisabled方法，它检查行数据中是否有一个_disabled属性，如果有，并且其值为true，则该复选框将被禁用。你可以通过在你的数据模型中添加_disabled属性来控制哪些行的复选框应该被禁用。

- 阅读更多 -