Web前端
laoyaotask
Vue,PHP,Python,Office
展开
-
Vue3 Flask 渐进式入门笔记
以下均在Windows 10环境下实现。原创 2023-06-19 13:46:22 · 1844 阅读 · 0 评论 -
将echarts 封装为vue组件 动态加载数据——以饼状图为例
基本原理:1、创建一个用于展示图形的vue组件,保留接收数据的接口,作为子组件使用。2、在父组件中引用上述子组件,同时传递数据给子组件。本文在main.js中全局引入echarts,代码为:import * as echarts from 'echarts';Vue.prototype.$echarts = echarts子组件echartscom.vue:<template> <div class="echartsCommon"> <div sty原创 2022-04-23 20:23:33 · 4123 阅读 · 1 评论 -
vue 动态加载调查问卷的内容
前端用到了bootstrap-vue框架<template> <!-- 提示窗 --> <b-alert :show="dismissCountDown" fade :variant="alertType" @dismiss-count-down="countDownChanged" style="width: 20rem;height:3.5rem;position: fixed;top:0rem;bottom:0rem;left:0rem;ri原创 2022-04-23 17:33:42 · 1938 阅读 · 0 评论 -
vue+php 上传附件并回显
前端(使用了bootstrap-vue框架): <div style="text-align: left;"> <b-button size="md" pill variant="outline-primary" class="mt-2" @click="openFileWindow()"><span class="fa fa-plus"></span> 上传附件</b-button> </di原创 2022-04-23 17:21:48 · 641 阅读 · 0 评论 -
Vue后台管理页面总体结构及主要功能设计
后台管理页面总体结构为:顶部左侧为系统标题,顶部右侧为用户图标及改密、退出菜单。中间左侧为功能菜单,中间右侧为操作区域,可以用el-row配合el-col来实现布局。其中导航菜单可以用el-menu配合el-menu-item来实现。用v-if控制一个变量值的变化,来控制在操作区域显示哪个组件。具体代码如下<template> <div> <el-container> <el-header> <el-row c原创 2022-04-23 17:07:11 · 2061 阅读 · 0 评论 -
Vue mint-ui 动态生成单选表单并绑定属性(含文件上传)
需求为保安人员研发一款巡逻记录小应用,巡逻的内容从服务器端获取,对应每个巡逻内容须提交巡逻结果和一张印证图片。思路从后台拉取数据动态生成单选组,并绑定数据属性,每一个单选组对应一个文件上传功能。具体为:根据后台拉取的单选组内容,在data()中动态创建一个json数据,包含单选项目本身的内容、存储用户选择值和对应的图片保存路径。代码html部分:<template> <div style="text-align: left;padding-bottom: 50px;">原创 2022-01-07 00:25:36 · 937 阅读 · 0 评论 -
一个Web布局实例
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script t原创 2015-07-26 20:39:37 · 834 阅读 · 0 评论 -
php+mysql+jquery 简易的检索自动补全提示
这段时间看了一些关于自动补全提示方面的内容,发现大部分实现过程都十分复杂。心想这应该是一个比较简单的功能啊,于是自己亲自动手来小试一下。思路很常规,需要说明的是没有为提示内容绑定键盘事件,仅可用鼠标操作。 html+jquery内容<html><head> <style type="text/css"> #autoBox { mar原创 2015-11-03 16:21:51 · 2160 阅读 · 0 评论 -
php mysql ajax 单表多字段多关键词查询
单表多字段查询在一些稍微复杂一点的查询中十分有用。本文主要利用MySQL数据库中的concat函数实现单表多字段多关键词查询。并且显示查询结果的表格可根据所选数据表动态生成。html代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src原创 2016-04-10 21:31:52 · 1680 阅读 · 2 评论 -
Javascript 最简单的动态显示当前时间的代码
setInterval("aa.innerHTML=new Date().toLocaleString();",1000);转载 2013-04-07 20:02:43 · 1175 阅读 · 0 评论 -
PHP Ajax 异步分页
在具体开发工作中,分页是一种非常常见功能模块。目前已经有不少基于jquery的分页插件,但是他们通常都是一次性获取所有记录加载到本地内存中,当数据量特别大时,显然效率较低。为了解决这个问题,实现了基于jquery ajax的异步分页。具体过程如下: 1、html<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="原创 2017-08-07 03:41:02 · 1280 阅读 · 0 评论 -
bootstrap-paginator服务器端分页的基本用法
HTML:<script src="../js/jquery-3.2.1.min.js"></script><script src="../js/bootstrap.min.js"></script><script src="../js/bootstrap-paginator.min.js">&l原创 2018-10-19 13:12:53 · 273 阅读 · 0 评论 -
bootstrap-table基本用法
HTML: <script src="../js/jquery-3.2.1.min.js"></script> <script src="../js/bootstrap.min.js"></script> <script src="../js/bootstrap-table.js">&a原创 2018-10-19 13:26:19 · 415 阅读 · 0 评论 -
bootstrap-fileinput 基于Boostrap的文件上传插件的用法
HTML: <script src="../js/jquery-3.2.1.min.js"></script> <script src="../js/fileinput.min.js"></script> <script src="../js/locales/zh.js"><原创 2018-10-19 13:35:05 · 574 阅读 · 0 评论 -
Bootstrap 4 Tabs选项卡
<ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href=&原创 2018-10-19 13:38:39 · 16032 阅读 · 0 评论 -
Vue.js 基本知识——基于script标签引入
1、使用Script标签引入vue的方法<script src="https://unpkg.com/vue/dist/vue.js"></script>也可以将vue.js文件下载至项目目录。调试环境建议用vue.js,生产环境建议用vue.min.js2、组件必须有一个顶级容器,Vue的功能必须要在这此容器内。 <div id="myApp">...原创 2019-07-01 01:27:58 · 42530 阅读 · 1 评论 -
CSS3中li元素自动横向排列、多栏div自动横向排列的简单方法
在传统的的css中,要想实现li元素横向排列,需要用到float属性,如果使用不熟练往往引起布局的错乱。css3中提供了一种非常好的实现机制。li元素的宽度、换行等都可自动完成,并根据窗口尺寸自动调整,呈现出一定程度的响应式布局。在Chrome,Edge,IE11中显示结果都一样。 而多栏div自动横向排列的方法与上面的相似。完整代码<!DOCTYPE html><html> <head原创 2015-07-26 16:18:41 · 22932 阅读 · 2 评论 -
HBuilder 配置Python、PHP开发环境
HBuilder是一个神器,不仅可以用于HTML页面的制作,通过安装各种扩展插件,还可实现多种语言编程。原创 2015-01-20 17:07:51 · 13667 阅读 · 0 评论 -
js jquery 子窗口获取父窗口元素值
父窗口有一个input,和一个button ,在button上利用window.open方法打开子窗口:子窗口获取父窗口指定元素值的代码:curproject=element = window.opener.document.getElementById("currentProjectIDForDetail").value;另外,在百度上搜到很多内容几乎一样的、介绍利用jqu原创 2014-12-29 00:01:49 · 2652 阅读 · 0 评论 -
最简单 纯css菜单
"http://www.w3.org/TR/html4/loose.dtd">无标题文档#nav ul{font-family:Arial;font-size:24px;list-style:none;margin:0px;padding:0px;}#nav ul li{float:left;display:inline;wi转载 2013-04-07 19:53:39 · 778 阅读 · 0 评论 -
Jquery中ajax的用法
利用Jquery的Ajax技术,可以非常方便地实现页面的局部刷新、后台参数传递等。其基本用法如下:无标题文档$(function(){ $("#clickMe").click(function(){ $.ajax({ url:"后台处理页面,这里可以是php/asp/.net/jsp/action/等页面或程序"原创 2013-04-07 20:35:11 · 851 阅读 · 0 评论 -
最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)(转载)
对的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加DOCTYPE声名. 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整转载 2013-04-07 19:54:54 · 706 阅读 · 0 评论 -
Javascript 返回上一页并刷新
Response.Write("alert('修改成功');history.go(-2);window.location.reload(true);");Javascript 返回上一页1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2);2. history.back().3. window.history.forw转载 2013-04-07 19:56:05 · 908 阅读 · 0 评论 -
css+div+js 选项卡效果 简洁
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档#grant {font-family: Arial, Helvetica, sans-serif;font-size: 13px;color: #3366CC;text-转载 2013-04-07 19:56:55 · 782 阅读 · 0 评论 -
js 复制文本框内容到剪贴板
请注意:系统不会自动保留聊天记录,如果需要请手动保存。 clipboardData.setData('Text',document.getElementById(‘txt').value);" />转载 2013-04-07 20:00:19 · 835 阅读 · 0 评论 -
div 水平居中 垂直居中
http://www.w3.org/TR/html4/strict.dtd">Test #window{ position:absolute; left:50%; top:50%; width:542px; height:338px; margin-left:-271px;转载 2013-04-07 20:10:26 · 743 阅读 · 0 评论 -
Jquery 动态生成表格 并为行绑定单击变色动作
$(function(){ /////////////////以下动态生成10行2列的表格for(i=1;i{$("#mytable").append(" "); }/////////////表格生成结束 /////////////为生成的行添加单击变色动作原创 2013-05-29 23:39:19 · 2228 阅读 · 0 评论 -
一个非常好用的Jquery表格分页插件——jPages
插件下载地址 :https://github.com/luis-almeida/jPages在网上找了很多分页插件,但用法都比较复杂,不利于新手的学习,而这一款,从下面的代码就可以看出使用起来比较方便简洁。此款插件的最大好处在于,不管表格是静态生成的,还是由程序动态生成的,它都可以给分页,用着十分爽。由于其工作原理是先将表格一次性全部加载到客户端, 然后再将完整的表格拆分成多页进行显示,所转载 2013-05-30 20:55:36 · 11330 阅读 · 2 评论 -
jQuery div滚动到顶部停止
经常逛淘宝、美团之类网站的朋友们应该都会留意到,在查看一个具体的商品页面时,当滚动条向下滚动时,“宝贝详情”“宝贝评价”所在那个导航元素,会停留在页面的顶部。今天有空,我就思考如何来实现这个功能。百度一下,发现有这样的简洁代码,但是实现的效果不是太流畅,于是稍做改动,最终完美实现。代码如下:$(function() { var elm = $('#banner'); v原创 2013-06-03 00:34:10 · 2168 阅读 · 0 评论 -
js 关闭当前窗口时弹出警告框
window.onbeforeunload = function(){ return "该页面无法保存当前状态,是否确认退出?";};转载 2014-03-06 16:14:07 · 1811 阅读 · 0 评论 -
jquery css 主菜单样式的跳转
想要实现的效果其实是挺常见的那种:网页的主菜单一开始有一种默认的样式(如A样式),当鼠标经过某一菜单项时,此菜单项会套用一种样式(如B样式),当鼠标点击某一菜单项时,当前菜单项会套用B样式,其余菜单项会去掉B样式而套用默认的A样式。经过尝试,写出了比较简单的代码,存下来,以备后用。html代码: Home Download原创 2014-10-21 21:20:40 · 1219 阅读 · 1 评论 -
简洁好用的jquery 焦点图插件:Basic jQuery Slider
简洁好用的jquery 焦点图插件:Basic jQuery Slider原创 2015-01-10 20:29:12 · 1716 阅读 · 0 评论 -
jquery 实现简单tab选项卡效果
常用简洁Tab<!--ul{ list-style:none;}.Tab1{width:100%;margin:0px;padding:0px;border:1px solid #666666;}.Menubox {width:100%;height:30px;line-height:28px;margin-bottom:5px;}.Menubox ul{mar原创 2015-01-16 19:27:45 · 1161 阅读 · 0 评论 -
jquery 在$(function(){})中调用外部函数
$(function () { jinggao('ccnu'); }) function jinggao(temp) { alert(temp); }原创 2014-12-29 00:35:56 · 5508 阅读 · 0 评论 -
jquery 获取用户复选框选定值的方法
jquery 获取用户选定值的方法 根据name属性以及checked状态来获取被用户选定的项原创 2014-12-29 00:12:17 · 1456 阅读 · 0 评论 -
JS焦点图,静态,非Jquery
需要pixviewer.swf文件,请自行下载。 var interval_time=5 //图片停顿时间,单位为秒,为0则停止自动切换 var focus_width=891//宽度 var focus_height=300 //高度 var text_height=0//标题高度转载 2013-04-07 17:14:19 · 747 阅读 · 0 评论