wangking717
- 浏览: 264627 次
- 性别:
- 来自: 成都
-
文章分类
最新评论
-
wangking717：
4jcms已转为私人项目了，供以后自己用~ 如果有人感兴趣的， ...
企业网站CMS开发萌芽阶段，正在策划中... -
wangking717：
CommonAccount 写道怎么我写了没反应你需要把jqu ...
Jquery文字连接移动效果，鼠标放上去，横向移动特效 -
程序员是怎么炼成的：
你好，需要用到的jar包有哪些，如果用httclient4来开 ...
HttpClient4 Post XML数据 -
CommonAccount：
怎么我写了没反应
Jquery文字连接移动效果，鼠标放上去，横向移动特效 -
wangking717：
shankesgk2 写道这个还在开发吗?是的，在开发阶段~
企业网站CMS开发萌芽阶段，正在策划中...
wangking 写道
下拉框特点：
1.可自定义下拉框的高度和宽度。
2.无需用户写多余代码，就和用原生态的SELECT一样的原理，使用简单。
3.功能强大，在下拉框中增加了extraData DIV层，供用户自定义特殊需求，当然用户也可以不选择使用extraData DIV层，用普通的SELECT即可。
1.可自定义下拉框的高度和宽度。
2.无需用户写多余代码，就和用原生态的SELECT一样的原理，使用简单。
3.功能强大，在下拉框中增加了extraData DIV层，供用户自定义特殊需求，当然用户也可以不选择使用extraData DIV层，用普通的SELECT即可。
下拉框截图：
具体代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉框测试</title>
<script type="text/javascript" src="__JS__/jquery.min.js"></script>
<style type="text/css">
<!--
body {padding:10px;}
* {margin:0; padding:0; font-size:12px;}
ul,li {list-style-type:none;}
.select {width:150px; height:25px; border:1px solid #ccc; padding-left:10px;}
.defaultItem{background:url(__IMAGE__/select_arrow.gif) no-repeat right center white;}
.select span {cursor:pointer; display:block; width:100%; height:100%;overflow:hidden;}
.select table {height:100%;}
.select td {vertical-align:middle;}
.select ul{width:181px;}
.select ul li {cursor:pointer;}
.select .items {overflow-y: scroll; overflow-x: hidden;max-height:148px; height:148px;width:180px; position:absolute;border:1px dashed #ccc; background:#fff;z-index:999;display:none;}
.select .items li {display:block; line-height:25px; padding-left:10px;}
.select .hover,.onhover {background:#ccc;}
.select .extraData{position:absolute;line-height:20px;padding-left:10px; padding-top:5px; padding-bottom:5px;border:1px dashed #ccc;background:white;display:none;}
-->
</style>
<script type="text/javascript">
var isItemHover = 0; // ITEM是否正在HOVER使用，供清楚ONHOVER状态
var delayTime4Select = null; //延迟消失下拉框
var selectUsingObj = ""; //正在使用哪个SELECT，供MOUSE OVER AND OUT时使用
var selectCloseUsing = 0; //是否在执行关闭操作
var isClickSelectTextObj = 0; //是否点击了SELECT控件里的输入框
$(document).ready(function(){
$(".select :text").click(function(){ //当鼠标点击了.select里面的任何一个输入框，则取消掉[鼠标移出焦点后，自动消失事件]
isClickSelectTextObj = 1;
});
$('.defaultItem').click(function(event){ //鼠标点击[请选择]，弹出下拉框
if(selectCloseUsing == 1){
return;
}
var parentObj = $(this).parent();
if(selectUsingObj != "" && selectUsingObj != parentObj.attr("idtag")){
$("[idtag='"+selectUsingObj+"']").find('ul.items').hide();
$("[idtag='"+selectUsingObj+"']").find('.extraData').hide();
}
if(selectUsingObj != ""){ //点击事件[执行关闭SELECT]操作
clearTimeout(delayTime4Select);
selectCloseUsing = 1;
var itemsOBJ = parentObj.find('ul.items');;
itemsOBJ.hide();
var extraOBJ = $("[idtag='"+selectUsingObj+"']").find(".extraData");
extraOBJ.hide();
selectUsingObj = "";
delayTime4Select = setTimeout(function(){
selectCloseUsing = 0;
isClickSelectTextObj = 0;
},200);
}else{ //点击事件[执行打开SELECT]操作
selectUsingObj = parentObj.attr("idtag");
clearTimeout(delayTime4Select);
var selectWidth = parentObj.width(); //动态设置ul.items宽度
var selectHeight = parentObj.height(); //动态设置ul.items的TOP偏移量
var id = parentObj.attr("idtag");
var hiddenVal = ""; //隐藏域的值，用来显示选中ITEM项
var element=$("#"+id);
if(element.length > 0){
hiddenVal = $("#"+id).val();
}
var itemsOBJ = parentObj.find('ul.items');
itemsOBJ.css("width",selectWidth+11);
itemsOBJ.css({top:parentObj.offset().top+selectHeight,left:parentObj.offset().left});
itemsOBJ.show(); //找到ul.items显示
var extraOBJ = parentObj.find(".extraData");
if(extraOBJ.length > 0){ //SELECT额外数据DIV存在
extraOBJ.css("width",selectWidth+1);
extraOBJ.css({top:parentObj.offset().top+selectHeight+itemsOBJ.height(),left:parentObj.offset().left});
extraOBJ.show();
}
parentObj.find('li').hover(function(){
isItemHover = 1;
$(this).addClass('hover');
$(this).parent().find('li').removeClass('onhover');
}, function(){
$(this).removeClass('hover');
});//li的hover效果
if(isItemHover == 0){
itemsOBJ.find("li").each(function(){
if(hiddenVal == $(this).attr("value")){
$(this).addClass('onhover');
}
});
}
}
});
$('.select,.extraData').mouseover(function(event){
selectCloseUsing = 0;
});
$('.select,.extraData').mouseout(function(event){
selectCloseUsing = 1;
var toElement = null;
if ($.browser.mozilla){ //火狐下不支持toElement
toElement = event.relatedTarget;
}else{
toElement = event.toElement;
}
if($(this)[0].contains(toElement)){ //如果是内部元素，则不执行以下代码
return;
}
var itemsOBJ = null;
if($(this).attr("class") == "select"){
itemsOBJ = $(this).find('ul.items');
}else{
itemsOBJ = $(this).parents("div").find('ul.items');
}
delayTime4Select = setTimeout(function(){
if(selectCloseUsing == 1 && isClickSelectTextObj == 0){
itemsOBJ.hide();
var extraOBJ = $("[idtag='"+selectUsingObj+"']").find(".extraData");
if (extraOBJ.length > 0) {
extraOBJ.hide();
}
isItemHover = 0;
selectUsingObj = "";
}
},3000);
});
$('ul.items li').live("click",function(){
selectCloseUsing = 1;
var parentDiv = $(this).parents("div");
parentDiv.find('td').html($(this).html());
var id = parentDiv.attr("idtag");
var element=$("#"+id);
if(element.length > 0){
$("#"+id).val($(this).attr("value"));
}else{
parentDiv.after('<input type="hidden" id="'+id+'" name="'+id+'" value="'+$(this).attr("value")+'"/>');
}
parentDiv.find('ul').hide();
var extraOBJ = $("[idtag='"+selectUsingObj+"']").find(".extraData");
if (extraOBJ.length > 0) {
extraOBJ.hide();
}
selectUsingObj = "";
isItemHover = 0;
delayTime4Select = setTimeout(function(){
selectCloseUsing = 0;
isClickSelectTextObj = 0;
},200);
});
});
//给firefox定义contains()方法，ie下不起作用
if(typeof(HTMLElement)!="undefined"){
HTMLElement.prototype.contains=function(obj){
while(obj!=null&&typeof(obj.tagName)!="undefind"){ //通过循环对比来判断是不是obj的父元素
if(obj==this) return true;
obj=obj.parentNode;
}
return false;
};
}
function closeSelect(obj){
selectCloseUsing = 1;
var itemsOBJ = $(obj).parents("div").find('ul.items');;
itemsOBJ.hide();
var extraOBJ = $("[idtag='"+selectUsingObj+"']").find(".extraData");
extraOBJ.hide();
selectUsingObj = "";
delayTime4Select = setTimeout(function(){
selectCloseUsing = 0;
isClickSelectTextObj = 0;
},200);
}
</script>
</head>
<body>
<div idtag="name" class="select" style="width:521px;height:50px;">
<span class="defaultItem"><table><tr><td>请选择...</td></tr></table></span>
<ul class="items">
<li value="1111">选项一</li>
<li value="2222">选项二</li>
<li value="3333">选项三</li>
<li value="4444">选项四</li>
<li value="5555">选项五</li>
<li value="6666">选项六</li>
<li value="7777">选项七</li>
<li value="8888">选项八</li>
<li value="9999">选项九</li>
<li value="0000">选项十</li>
</ul>
<div class="extraData">
<input type="text" id="aaa" value="Close"/>
这个DIV层属于扩展层，用户可根据自己需求确定是否需要这个。<input type="button" id="aaa" value="Close" onclick="closeSelect(this)"/></div>
</div>
<br/><br/><br/>
<!-- SELECT.......[开始] -->
<div idtag="users" class="select">
<span class="defaultItem"><table><tr><td>请选择...</td></tr></table></span>
<ul class="items">
<li value="1">wangking</li>
<li value="2">jiaojiao</li>
</ul>
</div>
<!-- SELECT.......[结束] --><br/><br/><br/>
<input type="text" id="testinput" /><br/><br/><br/>
<input type="text" id="haha" />
</body>
</html>
怎么使用？如下：
INCLUDE CSS AND JS。。。。 THEN。。。
这个是原生态的SELECT：
<select name="users" id="users">
<option value="1">wangking</option>
<option value="2">jiaojiao</option>
</select>
则对应改为：
<div idtag="users" class="select">
<span class="defaultItem"><table><tr><td>请选择...</td></tr></table></span>
<ul class="items">
<li value="1">wangking</li>
<li value="2">jiaojiao</li>
</ul>
</div>
PS: 欢迎共同讨论交流。
- 大小: 28.6 KB
分享到：
发表评论
-
uni-app 云打包iOS微信SDK需要配置通用链接（Universal Links）
2020-08-18 22:15 0从HBuilderX 2.3.4（alpha）版本开始， ... -
极速免费云服务器活动，享用终身永久免费
2019-12-26 10:03 5一直在用三丰云的免费云服务器，很实用，流畅性稳定性都很好，可 ... -
jQuery动画效果学习
2016-05-09 16:36 6971、元素的显示和隐藏 display:none; ... -
大型网站系统架构的演化
2015-12-25 11:57 528前言 一个成熟的大型网站（如淘宝、京东等）的系统 ... -
Zend Studio代码无法自动提示以及代码跟踪函数和变量问题的解决方法
2014-10-22 22:31 670今天在工作中，发现我的Zend Studio8.0.1无法进 ... -
Zend Studio上安装Aptana，打造完美编辑器。
2014-09-16 11:30 3116Zend Studio在PHP上的开发是比较不错的， ... -
jquery bxslider幻灯片样式改造
2013-11-15 18:08 1843找了很多jquery的幻灯片，都觉得不是很好，最后发现bx ... -
Jquery文字连接移动效果，鼠标放上去，横向移动特效
2013-09-30 03:58 1873这种jQuery文字横向滚动效果，可以应用到文章列表页标题栏 ... -
企业网站CMS开发萌芽阶段，正在策划中...
2013-09-23 00:20 1031做多了企业级别的网站，顿时觉得很多重复性的工作，所以打算策 ... -
在WINDOWS中设置计划任务执行PHP文件
2013-03-17 22:05 1145在网上找了些WINDOWS执行PHP的计划任务的方法，有一个 ... -
jQuery图片延迟加载插件
2013-03-13 17:17 1097有时候网页比较大且图片有比较多，会导致页面打开的速度 ... -
EMAIL群发营销设计规范
2013-03-05 13:48 1257一般做邮件群发，很容易进入垃圾邮箱，或者提示一下： 这不是 ... -
去除多余无用的CSS代码，dust-me-selectors堪称利器！
2012-12-06 00:19 3427用于清理页面中多余的css的工具：dust-me-select ... -
JS DIV拖动交换位置DEMO
2012-11-07 15:16 2622该DEMO来自网上，其中优化了部分的BUG。并且DRAGSOR ... -
解决IE6下FIXED BUG。轻松定位。
2012-10-20 11:26 1259代码非常简单。自己在本地测试一下。。 /* 兼容 ... -
jquery 获取各种有用的高度定位
2012-09-20 14:13 980获取浏览器显示区域的高度 ： $(window). ... -
[转]IE6下js的onmouseover和onmouseout事件连续触发闪烁解决方法
2012-09-17 11:26 1958解决HTML内部元素的Mouse事件干扰 话说有一个DIV元素 ... -
网页速度很慢优化方案：如何提高网页加载速度，提升网站加载速度
2012-04-08 07:15 3688网站加载速度的快慢， ... -
保证数据正确性，乐观锁的控制！
2011-03-13 17:44 1488wangking 写道 为了保证数据的完整性以及正确性 ... -
CSS的一些应用技巧
2011-02-26 03:28 10711. 怎么控制一行拥有几条LI。 .rep { ...
相关推荐
该代码使用scikit-learn的乳腺癌数据集，完成分类模型训练与评估全流程。主要功能包括：数据标准化、三类模型（逻辑回归、随机森林、SVM）的训练、模型性能评估（分类报告、混淆矩阵、ROC曲线）、随机森林特征重要性分析及学习曲线可视化。通过`train_test_split`划分数据集，`StandardScaler`标准化特征，循环遍历模型进行统一训练和评估。关键实现细节包含：利用`classification_report`输出精确度/召回率等指标，绘制混淆矩阵和ROC曲线量化模型效果，随机森林的特征重要性通过柱状图展示，学习曲线分析模型随训练样本变化的拟合趋势。最终将原始数据和预测结果保存为CSV文件，便于后续分析，并通过matplotlib进行多维度可视化比较。代码结构清晰，实现了数据处理、模型训练、评估与可视化的整合，适用于乳腺癌分类任务的多模型对比分析。
内容概要：本文作为PyTorch的入门指南，首先介绍了PyTorch相较于TensorFlow的优势——动态计算图、自动微分和丰富API。接着讲解了环境搭建、PyTorch核心组件如张量（Tensor）、autograd模块以及神经网络的定义方式（如nn.Module），并且给出了详细的神经网络训练流程，包括前向传播、计算损失值、进行反向传播以计算梯度，最终调整权重参数。此外还简要提及了一些拓展资源以便进一步探索这个深度学习工具。 适用人群：初次接触深度学习技术的新学者和技术爱好者，有一定程序基础并希望通过PyTorch深入理解机器学习算法实现的人。 使用场景及目标：该文档有助于建立使用者对于深度学习及其具体实践有更加直观的理解，在完成本教程之后，读者应当能够在个人设备上正确部署Python环境，并依据指示独立创建自己的简易深度学习项目。 其他说明：文中所提及的所有示例均可被完整重现，同时官方提供的资料链接也可以方便有兴趣的人士对感兴趣之处继续挖掘，这不仅加深了对PyTorch本身的熟悉程度，也为未来的研究或者工程项目打下了良好的理论基础和实践经验。
此高校心理教育辅导系统功能分析主要分为管理员功能模块、教师功能模块和学生功能模块三大模块，下面详细介绍这三大模块的主要功能： （1）管理员：管理员登陆后可对系统进行全面管理，管理员主要功能模块包括个人中心、学生管理、教师管理、辅导预约管理、学生信息管理、测评结果分析管理、心理健康学习管理、试题管理、留言板管理、试卷管理、系统管理以及考试管理，管理员实现了对系统信息的查看、添加、修改和删除的功能。管理员用例图如图3-1所示。（2）学生：学生进入本高校心理教育辅导系统前台可查看系统信息，包括首页、心理健康信息、试卷列表、公告通知以及留言反馈等，注册登录后主要功能模块包括个人中心、辅导预约管理以及考试管理。（3）教师：教师学生登录后主要实现的功能模块包括个人中心、辅导预约管理、学生信息管理、测试结果分析管理、心理健康学习管理、试卷管理、试题管理、留言板管理、考试管理。Spring Boot是一个简化程序设置的拥有开箱即用的框架，它主要的优点是根据程序员不同的设置而生成不同的代码配置文件，这样开发人员就不用每个项目都配置相同的文件，从而减低了开发人员对于传统配置文件的时间，提高了开发效率。它内
网络文化互动中的虚拟现实技术应用
自驾游中如何预防迷路情况
实现多人聊天的客户端小程序
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
漫画中的文化元素挖掘
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
,,Qt源程序～界面设计例程（XML文件读取+滚动区域放置控件+保存多sheetExcel文件） IDE版本： Qt creator 4.8.0 Qt 5.12.0 代码特点： 1.能读取xml格式文件，并通过其配置界面； 2.能在滚动区域内放置多种控件，界面大小不够会出现滚动条来扩展界面； 3.能通过xml配置文件初始化联动的单选框，输入框和表格； 4.通过程序动态新建单选框，输入框和表格； 5.将表格保存为Excel文件，每个表格就是一个sheet。 视频不够清晰，请上B站看： 【Qt例程：界面设计项目（XML文件读取+滚动区域放置控件+保存Excel文件）- ,Qt源程序; XML文件读取; 滚动区域放置控件; 保存多sheet Excel文件; Qt Creator 4.8.0; Qt 5.12.0; 动态创建控件; 界面设计例程。,Qt程序进阶：XML文件读取与处理，滚动区域控件布局，多sheet Excel文件保存功能
,,FPGA 以太网 UPD IP 协议实现 fpga 千兆以FPGA 以太网 UPD IP 协议实现 fpga 千兆以FPGA 以太网 UPD IP 协议实现， fpga 千兆以太网接口控制器，FPGA UDP IP协议实现 在FPGA上实现UDP通信，Verilog HDL描述语言实现，数据链路层，网络层，传输层有纯逻辑实现。 接口为GMII接口，与外部phy对接。 实验器件为s6，因此编译环境用的是ISE14.7。 vivado轻松无压力，随意移植。 ,FPGA; 以太网; UPD; IP协议; 千兆以太网接口控制器; Verilog HDL描述语言; 数据链路层; 网络层; 传输层; 接口为GMII接口; 编译环境为ISE14.7。,基于FPGA的千兆以太网UDP IP协议实现与优化
eclipse-inst-jre-win64.rar
内容概要：本文档详细介绍了一个基于Transformer和BiLSTM双向长短期记忆神经网络结合贝叶斯优化（BO）进行时间序列预测的项目。该项目主要解决传统方法在处理复杂非线性关系、多变量依赖和大规模数据时存在的局限性，提升预测精度和计算效率。项目通过MATLAB实现完整的程序、GUI设计和详细的代码说明，涵盖数据预处理、模型设计与训练、超参数调优、评估与应用等各个环节。同时探讨了项目的挑战和未来改进方向，为深度学习技术在时间序列预测中的应用提供了实用价值。 适合人群：对时间序列预测感兴趣的研究人员和技术人员，尤其是具有一定深度学习基础并且希望深入了解和实践Transformer、BiLSTM及相关优化技术的专业人士。 使用场景及目标：①为金融、能源、气象等多个领域的实际问题提供时间序列预测解决方案，包括股市预测、电力负载预估等；②提高预测模型的泛化能力和准确性；③优化模型的超参数选取，从而提高训练速度和效率。 其他说明：文中特别强调了数据处理的重要性，如去除噪声、特征选择等问题，并介绍了贝叶斯优化技术的应用，使得模型能够在较少尝试下找到最优配置。同时展示了如何通过图形化界面展示训练过程和评估结果，确保用户体验友好。此外，文档还包括了防止过拟合、提高模型性能的各种技巧，如正则化、早期停止、Dropout等措施。总体而言，本项目致力于提供一套完善的深度学习解决方案，促进跨学科应用和发展。
励志图书中的时间管理、目标设定与自我提升
当前资源包含初中高级闯关习题
亲子自驾游趣味活动推荐
内容概要：本文介绍了BERT（Bidirectional Encoder Representations from Transformers），它是一种新型的语言表示模型，通过利用掩码语言模型（MLM）和下一句预测任务（NSP），实现了从无标注文本中预训练深层双向表示模型的方法。这种双向注意力机制允许模型在同一层联合调节左右语境，极大地提升了下游自然语言处理任务的性能。与单向语言模型如ELMo、GPT不同，BERT能直接捕捉句子内部复杂的依存关系，在多项NLP基准测试中刷新了记录，显著优于以前的最佳表现。 适合人群：从事自然语言处理研究的技术人员以及对该领域有兴趣的研究学者和开发者。 使用场景及目标：适用于需要高级别自然语言理解和推理能力的任务，特别是涉及问答系统、机器翻译和情感分析等任务的研发团队和技术部门。通过采用BERT可以快速提高相关应用场景中的精度。 其他说明：BERT不仅展示了双向建模相对于传统单向方法的优势，还强调了充分预训练对于改善小型数据集上模型表现的关键作用。此外，文中还详细比较了与其他几种现有先进模型的特点，并提供了具体的实验设置和技术细节供进一步探究。
漫画作品与网络文化互动
# 基于SpringBoot的“体育购物商城”的设计与实现（源码+数据库+文档+PPT) - 开发语言：Java - 数据库：MySQL - 技术：SpringBoot - 工具：IDEA/Ecilpse、Navicat、Maven (1)系统管理员主要对个人中心、用户管理、商品分类管理、体育用品管理、系统管理、订单管理等功能进行管理。 (2)用户进入系统可以对首页、体育用品、活动公告、在线客服、购物车、个人中心等功能进行操作。
,,三菱fx5u plc CCD检测fb程序 此程序已经实际设备上批量应用，机器人配合CCD视觉检测，每个工位循环拿照。 用的FB写法，程序成熟可靠，借鉴价值高，程序注释详细，用的三菱fx5u系列plc。 是新手入门级三菱fx5u电气爱好从业人员借鉴和参考经典案列。 ,核心关键词：三菱fx5u PLC; CCD检测; FB程序; 机器人配合; 视觉检测; 循环拍照; 程序成熟可靠; 注释详细; 新手入门级参考案列。,三菱FX5U PLC CCD视觉检测FB程序：成熟可靠，循环拍照应用案例