1. 首页
  2. 分类
  3. 前端技术
【推荐】Magnific Popup：一款快速、轻量级且响应式的jQuery弹窗插件
System
2024-08-07
所有,jquery



// 引入jQuery库和Magnific Popup插件
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="path/to/jquery.magnific-popup.min.js"></script>
 
// 页面加载完成后初始化Magnific Popup
$(document).ready(function() {
    $('.image-link').magnificPopup({
        type: 'image',
        closeOnContentClick: true,
        closeBtnInside: false,
        fixedContentPos: true,
        mainClass: 'mfp-no-margins mfp-with-zoom', // 定义弹窗的类名
        image: {
            verticalFit: true
        },
        zoom: {
            enabled: true,
            duration: 300 // 缩放动画持续时间
        }
    });
});
 
// HTML中使用image-link类来触发弹窗效果
<a href="path/to/image.jpg" class="image-link">查看图片</a>

这段代码演示了如何使用Magnific Popup插件来创建一个简单的图片放大弹窗效果。首先，我们需要引入jQuery库和Magnific Popup插件。然后，在文档加载完成后，我们初始化了Magnific Popup，并设置了一些参数，如图片的居中和缩放效果。最后，我们在HTML中添加了一个链接，点击后会触发弹窗。

- 阅读更多 -
uniapp中延时执行任务的方法
System
2024-08-07
所有,jquery

在uniapp中，你可以使用JavaScript的setTimeout函数来实现延时执行任务。这是一个简单的示例，展示了如何在uniapp中延时3秒执行一个函数：




export default {
  methods: {
    delayedTask() {
      setTimeout(() => {
        // 这里是你想要延时执行的代码
        console.log('任务已延时3秒执行');
      }, 3000);
    }
  }
}

在这个例子中，当你调用delayedTask方法时，它会设置一个定时器，该定时器将在3000毫秒（3秒）后执行函数内的代码。这个函数会在控制台输出一条消息。你可以将需要延时执行的代码放在setTimeout函数的回调中。

- 阅读更多 -
jQuery实现layer.open中按钮倒计时读秒可用的协议阅读场景
System
2024-08-07
所有,jquery



// 使用jQuery和layer.open实现按钮倒计时
function countdownButton(duration, callback) {
    var timer = duration;
    var interval = setInterval(function() {
        if (timer <= 0) {
            clearInterval(interval);
            callback();
        } else {
            // 更新按钮上的显示文本
            $('.countdown-btn').attr('disabled', true).val(timer + '秒');
            timer--;
        }
    }, 1000);
}
 
// 使用示例
$(function() {
    $('.countdown-btn').click(function() {
        countdownButton(10, function() {
            $('.countdown-btn').val('已发送').attr('disabled', false);
        });
    });
});

这段代码定义了一个countdownButton函数，它接受一个时长duration和一个回调函数callback作为参数。函数内部使用setInterval设置一个倒计时，倒计时结束时执行回调函数。按钮上显示的文本会随着倒计时的进行而更新，并且在倒计时结束后按钮会变为可用状态。这个实现可以直接应用于需要实现按钮倒计时功能的场景中。

- 阅读更多 -
jQuery语法知识（DOM操作之CSS属性）
System
2024-08-07
所有,jquery

在jQuery中，可以使用.css()方法来获取或设置元素的CSS属性。

获取CSS属性：




$(selector).css(propertyName);

这里的propertyName是你想获取的CSS属性名称的字符串。

设置CSS属性：




$(selector).css(propertyName, value);
// 或者同时设置多个CSS属性
$(selector).css({propertyName1: value1, propertyName2: value2, ...});

value是你想设置的CSS属性值。

示例代码：




// 获取元素的背景颜色
var bgColor = $('#myElement').css('background-color');
 
// 设置元素的文字颜色为红色
$('#myElement').css('color', 'red');
 
// 同时设置多个CSS属性
$('#myElement').css({
  'background-color': 'blue',
  'font-size': '14px',
  'border': '1px solid black'
});
- 阅读更多 -
jqPagination - 简洁易用的jQuery分页插件
System
2024-08-07
所有,jquery



<!DOCTYPE html>
<html>
<head>
    <title>jqPagination 分页插件示例</title>
    <link rel="stylesheet" href="path/to/jqPagination.css">
    <script src="path/to/jquery.min.js"></script>
    <script src="path/to/jqPagination.js"></script>
    <script>
        $(function() {
            $('#pagination').jqPagination({
                // 设置总页数
                max_page: 100,
                // 设置当前页
                current_page: 1,
                // 设置每页显示数目
                items_per_page: 10,
                // 设置连接点击事件
                link_string: '/page/{page_number}',
                // 设置是否显示首页和尾页
                first: 'First',
                last: 'Last',
                // 设置是否显示上一页和下一页
                prev: 'Prev',
                next: 'Next',
                // 设置是否显示页码
                page_numbers: true,
                // 设置回调函数
                onChange: function(page_number) {
                    // 页面跳转逻辑
                    alert('跳转到第 ' + page_number + ' 页');
                }
            });
        });
    </script>
</head>
<body>
    <div id="pagination"></div>
</body>
</html>

这个代码示例展示了如何使用jqPagination插件创建一个简洁的分页控件，并提供了基本的自定义选项。当用户点击分页控件的页码或导航按钮时，会触发一个弹窗，显示用户当前选择的页码。这个例子可以作为开发者学习和实践如何在自己的项目中应用分页插件的起点。

- 阅读更多 -
jquery 跑马灯效果
System
2024-08-07
所有,jquery

以下是一个使用jQuery实现的简单跑马灯效果的示例代码：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跑马灯效果</title>
<style>
  .marquee {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
  }
  .marquee-text {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 10s linear infinite;
  }
  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }
</style>
</head>
<body>
 
<div class="marquee">
  <span class="marquee-text">这是一个简单的跑马灯效果 - 欢迎访问！</span>
</div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  // jQuery 代码写在这里
</script>
 
</body>
</html>

这段代码中，我们使用了CSS3的@keyframes动画来实现文字的滚动效果，并通过jQuery来控制和扩展其功能（如果有必要的话）。这是一个简洁而高效的跑马灯实现方式。

- 阅读更多 -
jQuery Mobile 安装指南
System
2024-08-07
所有,jquery



<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile 安装指南</title>
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page" id="home">
    <div data-role="header">
        <h1>欢迎使用 jQuery Mobile</h1>
    </div>
    <div data-role="content">
        <p>这是一个基本的 jQuery Mobile 页面示例。</p>
    </div>
    <div data-role="footer">
        <h4>页脚信息</h4>
    </div>
</div>
 
</body>
</html>

这段代码展示了如何在HTML页面中引入jQuery Mobile。通过在<head>标签中包含jQuery Mobile的CSS和JavaScript文件，你可以为你的网站添加移动友好的界面。在<body>中，你可以看到一个简单的页面结构，包括页眉、内容区和页脚，这些都是jQuery Mobile页面的基本组成部分。

- 阅读更多 -
JavaScript+jQuery,交换式web前端开发
System
2024-08-07
所有,jquery

在JavaScript和jQuery中，交换两个元素的位置可以通过一些技巧来实现。以下是一些可能的解决方案：

解决方案1：使用jQuery的.before()或.after()方法




// 假设我们有两个id为div1和div2的元素
var $div1 = $('#div1');
var $div2 = $('#div2');
 
// 交换它们的位置
if ($div1.next().is($div2)) {
    $div1.next().insertAfter($div1);
} else {
    $div1.prev().insertBefore($div1);
}

解决方案2：使用jQuery的.detach()方法




// 假设我们有两个id为div1和div2的元素
var $div1 = $('#div1').detach();
var $div2 = $('#div2').detach();
 
// 将它们插入到它们原来位置的地方
$('#div2').after($div1);
$('#div1').after($div2);

解决方案3：使用原生JavaScript的insertBefore()或insertAfter()方法




// 假设我们有两个id为div1和div2的元素
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var parent = div1.parentNode;
 
// 交换它们的位置
parent.insertBefore(div2, div1);
parent.insertBefore(div1, div2);

解决方案4：使用原生JavaScript的appendChild()方法




// 假设我们有两个id为div1和div2的元素
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var parent = div1.parentNode;
 
// 交换它们的位置
parent.insertBefore(div2, div1);
parent.appendChild(div1);

这些都是交换两个元素位置的方法，你可以根据你的具体需求来选择最适合你的方法。

- 阅读更多 -
Vben框架动态生成可编辑Table
System
2024-08-07
所有,typescript

在Vben（Vue Ben）框架中，动态生成可编辑的Table可以通过使用a-table组件结合a-input、a-select等输入组件来实现。以下是一个简化的例子，展示了如何创建一个可编辑的表格：




<template>
  <div>
    <a-table :dataSource="data" :columns="columns" :pagination="false">
      <template v-slot:name="{ record, index }">
        <a-input v-model:value="record.name" @change="handleChange(index)" />
      </template>
      <template v-slot:age="{ record, index }">
        <a-input-number v-model:value="record.age" @change="handleChange(index)" />
      </template>
      <template v-slot:gender="{ record, index }">
        <a-select v-model:value="record.gender" @change="handleChange(index)">
          <a-select-option value="male">Male</a-select-option>
          <a-select-option value="female">Female</a-select-option>
        </a-select>
      </template>
    </a-table>
  </div>
</template>
 
<script>
import { defineComponent, reactive, toRefs } from 'vue';
 
export default defineComponent({
  setup() {
    const state = reactive({
      data: [
        {
          key: '1',
          name: 'John Doe',
          age: 32,
          gender: 'male',
        },
        // ... more data
      ],
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          slots: { customRender: 'name' },
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
          slots: { customRender: 'age' },
        },
        {
          title: 'Gender',
          dataIndex: 'gender',
          key: 'gender',
          slots: { customRender: 'gender' },
        },
        // ... more columns
      ],
    });
 
    function handleChange(index) {
      console.log('Row data changed: ', index);
    }
 
    return { ...toRefs(state), handleChange };
  },
});
</script>

在这个例子中，我们定义了一个包含name、age和gender字段的数据源，并为每个字段创建了对应的编辑组件（a-input用于文本输入，a-input-number用于数字输入，a-select用于选择）。每当输入字段的值发生变化时，handleChange 函数会被调用，并且可以执行任何需要的数据处理或者验证操作。

- 阅读更多 -
Rails3 jQuery Autocomplete
System
2024-08-07
所有,jquery

在Rails 3中使用jQuery Autocomplete，你需要首先确保你的项目中包含了jQuery和jQuery UI库。你可以通过gem来安装jQuery，例如使用jquery-rails gem。

  1. 在Gemfile中添加以下行：

    


gem 'jquery-rails'
  2. 运行bundle install来安装gem。

  3. 在application.js中包含jQuery和jQuery UI：

    


//
//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require autocomplete

  4. 在application.css中包含jQuery UI的样式：

    


*= require jquery.ui.all

  5. 创建一个新的Autocomplete控制器：

    


class AutocompleteController < ApplicationController
  def index
    @results = YourModel.where("column LIKE ?", "%#{params[:term]}%")
    render json: @results.map(&:column)
  end
end

  6. 在routes.rb中添加路由：

    


get 'autocomplete/index'

  7. 在视图中，使用Autocomplete：

    


<%= text_field_tag :autocomplete, '', 'data-autocomplete-source' => autocomplete_index_path %>

  8. 在application.js中添加Autocomplete初始化代码：

    


$(function() {
  $( "#autocomplete" ).autocomplete({
    source: function(request, response) {
      $.ajax({
        url: "<%= autocomplete_index_path %>",
        dataType: "json",
        data: {
          term: request.term
        },
        success: function(data) {
          response(data);
        }
      });
    },
    minLength: 2
  });
});

确保替换YourModel和column为你的模型和需要自动完成的字段。这样就设置了一个基本的Autocomplete功能，用户在文本框中输入至少两个字符时，会从数据库中查找相应的记录并提供自动完成的建议。

- 阅读更多 -
Copyright © 2026 Tech Blog
All Right Reserved | 京ICP备19053165号