
何乐君 helejun
创建用户控件要比创建自定义控件方便很多,因为可以重用现有的控件。用户控件使创建具有复杂用户界面元素的控件极为方便。在HoverTreeTop项目中,新增图片的浏览功能,效果请看:http://hovertree.com/top/htimg/ 而图片的添加就使用了用户控件。用户控件为:UCPictureAdd.ascx ,在PictureAdd.aspx页面中使用。在PictureAdd.aspx页面中使用用户控件的代码:<%@ Page Title="" Language="C#" MasterPageFile="~/HTPanel/HMaster/HPanel.Master" AutoEventWireup="true" CodeBehind="PictureAdd.aspx.cs" Inherits="HoverTreeTop.HoverTree.HoverTreePanel.HTPanel.HPicture.PictureAdd" %> <%@ Register Src="~/htpanel/hcontrol/UcPictureAdd.ascx" TagName="PicAdd" TagPrefix="HtUc" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolderMain" runat="server"> <HtUc:PicAdd runat="server" ID="picAdd1" HtIsRecommend="true" /> </asp:Content> 提供源码下载:http://hovertree.com/h/bjaf/hv6cqe5n.htm 已经有人对ASP.NET用户控件的利弊做了小结 优点: 1.用户控件感觉就是迷你版的页面,用它可以对一些常用的功能和页面布局进行封装,实现一定的代码重用;2.用户控件的编写比编写自定义控件要简单得多,事件处理模型,生命周期等和一般页面相似,容易上手; 缺点: 1.用户控件其实很多时候嵌入了应用程序的一些逻辑,跨应用程序的重用性稍差; 2.如果出现bug,有时不太容易发现; 3.性能可能不是很好 ASP.NET Web 用户控件与完整的 ASP.NET 网页(.aspx 文件)相似,同时具有用户界面页和代码。可以采取与创建 ASP.NET 页相似的方式创建用户控件,然后向其中添加所需的标记和子控件。用户控件可以像页面一样包含对其内容进行操作(包括执行数据绑定等任务)的代码。 用户控件与 ASP.NET 网页有以下区别: 用户控件的文件扩展名为 .ascx。 用户控件中没有 @ Page 指令,而是包含 @ Control 指令,该指令对配置及其他属性进行定义。 用户控件不能作为独立文件运行。而必须像处理任何控件一样,将它们添加到 ASP.NET 页中。 用户控件中没有 html、body 或 form 元素。这些元素必须位于宿主页中。 可以在用户控件上使用与在 ASP.NET 网页上所用相同的 HTML 元素(html、body 或 form 元素除外)和 Web 控件。例如,如果您要创建一个将用作工具栏的用户控件,则可以将一系列 Button Web 服务器控件放在该控件上,并创建这些按钮的事件处理程序。 HoverTreeTop:http://hovertree.com/top/
如果开发中遇到需要输入城市名的页面,那么这个特效可以帮助快速输入。这是一个纯js实现的效果,可以快速的输入城市名称,支持鼠标点击选择,输入城市的拼音或者拼音首字母,使用方便。可以在输入框中通过点击生成包含中国各个城市的下拉列表,进行快速选择,快速切换定位。体验效果:http://hovertree.com/texiao/js/36/HTML文件代码如下:<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js中国各大城市快速选择代码 - 何问起</title><link rel="stylesheet" href="http://hovertree.com/texiao/js/36/css/cityselect.css"><style type="text/css">.demo{width:220px;margin:50px auto;}.demo input{padding: 12px 18px;}a{color:deepskyblue;}</style></head><body><h3 style="text-align: center;margin-top: 15px;">在下面的输入框中输入城市的名称:</h3><div class="demo"><!-- 在输入框加入id --><input type="text" class="cityinput" id="citySelect" placeholder="请输入目的地"></div><script type="text/javascript" src="http://hovertree.com/texiao/js/36/js/cityselect.js"></script><script type="text/javascript">var hovertree=new Vcity.CitySelector({input:'citySelect'});</script><div style="text-align:center;margin:150px 0; font:normal 14px/24px 'MicroSoft YaHei';"><p>来源:<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/h/bjag/l9bv36jh.htm" target="_blank">说明</a></p></div></body></html> 源码下载:http://hovertree.com/h/bjag/qd1jxjuh.htm 推荐: https://yq.aliyun.com/articles/68466
产品展示功能是十分普遍常用的功能,特别是在企业网站和电商网站中,而新闻动态也是企业网站的基本功能。随着.NET框架的开源和跨平台的支持,ASP.NET也增加了不少生机。所以使用ASP.NET开源项目建设网站是不错的选择。HoverTreeTop项目就是一个开源免费的ASP.NET项目,已经实现了新闻动态和产品展示功能。列表页和内容页都生成静态HTML页面,访问速度快也利于搜索引擎。HoverTreeTop项目使用分层结构,方便开发维护和部署。可部署成独立的网站,也可以部署到子文件夹中,通过web.config文件和模版文件设置本地路径和域名前缀等,方便而灵活。要了解源码的效果,可以访问链接:http://hovertree.com/top/ ,这是使用HoverTreeTop生成的实例。可以看到,产品内容页面可以有多张图片。后续会实现产品的弹出层或者图片放大镜等特效,方便查看。HoverTreeTop项目运用模板页设计,方便设计网站的美工和风格。如果是.NET的学习者,源码中也运用了许多C#的基本概念,例如事件,还有一些设计模式,可供参考。源码使用VS2015编辑,基于.NET 4.0或者4.6,数据库为Sql Server 2008。源码中包含数据库的备份文件(HovertreeTopDb.bak)和附加文件(HoverTreeTop.mdf),可以自由选择还原或者附加方式。附上源码下载地址:http://hovertree.com/h/bjaf/hv6cqe5n.htm
可能大家对console.log会有一定的了解,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出信息呢,下面我就介绍一些调试的入门技巧,让你爱上console.log 一、显示信息的命令 最常用的就是console.log了。效果:http://hovertree.com/texiao/js/34/1.htm查看效果的方法:如果是Chrome浏览器,请打开“开发者工具”,按快捷键“Ctrl+Shift+I”,或者右键点击页面,选择“检查”菜单。然后在“Console”面板可以查看输出结果。如图所示:如果是火狐浏览器的话,按组合键“Ctrl+Shift+K”可以打开“网页控制台”。如图:示例的代码如下:<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1" /><title>常用console命令之显示信息_何问起</title><base target="_blank" /><meta charset="utf-8" /><style>a{color:blue;}</style></head><body><div>常用console命令之显示信息,请查看浏览器的console面板。<a href="http://hovertree.com/h/bjaf/gk6698g3.htm">说明</a><a href="http://hovertree.com">首页</a></div><script type="text/javascript">console.log('hello hovertree');console.info('信息 何问起');console.error('错误');console.warn('警告');</script></body></html> 二:占位符console上述的集中度支持printf的占位符格式,支持的占位符有:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)示例代码:<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1" /><title>console命令之占位符_何问起</title><base target="_blank" /><meta charset="utf-8" /><style>a{color:blue;}</style></head><body><div>console命令之占位符 <a href="http://hovertree.com/h/bjaf/gk6698g3.htm">说明</a><a href="http://hovertree.com">首页</a></div><script type="text/javascript">console.log("%d年%d月%d日",2016,11,11);</script></body></html> 查看效果:http://hovertree.com/texiao/js/34/2.htm效果图:三、信息分组示例代码:<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1" /><title>常用console命令_何问起</title><base target="_blank" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>a{color:blue;}</style></head><body><div>常用console命令之信息分组<a href="http://hovertree.com/h/bjaf/gk6698g3.htm">说明</a><a href="http://hovertree.com">首页</a></div><script type="text/javascript">console.group("第一组信息");console.log("第一组第一条:何问起(http://hovertree.com)");console.log("第一组第二条:柯乐义(http://keleyi.com)");console.groupEnd();console.group("第二组信息");console.log("第二组第一条:HoverClock 一个jQuery时钟插件");console.log("第二组第二条:欢迎使用");console.groupEnd();</script></body></html> 查看效果:http://hovertree.com/texiao/js/34/效果图:四、查看对象的信息console.dir()可以显示一个对象所有的属性和方法。示例代码:<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>用console.dir方法查看对象信息_何问起</title><base target="_blank" /><meta charset="utf-8" /><style>a{color:blue;}</style></head><body><div> 用console.dir方法查看对象信息<a href="http://hovertree.com/h/bjaf/gk6698g3.htm">说明</a><a href="http://hovertree.com">首页</a></div><script type="text/javascript">var info = { blog:"http://hovertree.com", 时钟插件:"HoverClock", message:"欢迎使用!" };console.dir(info);</script></body></html> 查看效果:http://hovertree.com/texiao/js/34/4.htm效果图:五、显示某个节点的内容console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码。示例代码:<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1" /><title>常用console命令_何问起</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><base target="_blank" /><style>a{color:blue;}</style></head><body><div> console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码<a href="http://hovertree.com/h/bjaf/gk6698g3.htm">说明</a><a href="http://hovertree.com">首页</a></div><div id="info"><h3>我的博客:hovertree.com</h3><p>HoverTreeImg插件,欢迎使用</p></div><script type="text/javascript">var info = document.getElementById('info');console.dirxml(info);</script></body></html> 查看效果:http://hovertree.com/texiao/js/34/5.htm效果图:六、判断变量是否是真console.assert()用来判断一个表达式或变量是否为真。如果结果为否,则在控制台输出一条相应信息,并且抛出一个异常。示例代码:<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1" /><title>console.assert使用_何问起</title><base target="_blank" /><meta charset="utf-8" /><style>a{color:blue;}</style></head><body><div> console.assert方法的使用<a href="http://hovertree.com/h/bjaf/gk6698g3.htm">说明</a><a href="http://hovertree.com">首页</a></div><script type="text/javascript">var result = 1;console.assert( result );var year = 2014;console.assert(year == 2018 );</script></body></html> 效果:http://hovertree.com/texiao/js/34/6.htm效果图:七、追踪函数的调用轨迹。console.trace()用来追踪函数的调用轨迹。示例代码:<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1" /><title>追踪函数的调用轨迹_何问起</title><base target="_blank" /><meta charset="utf-8" /><style>a{color:blue;}</style></head><body><div>javascript中console.trace()方法示例<a href="http://hovertree.com/h/bjaf/gk6698g3.htm">说明</a><a href="http://hovertree.com">首页</a></div><script type="text/javascript">/*函数是如何被调用的,在其中加入console.trace()方法就可以了 -- 何问起*/function add(a,b){console.trace();return a+b; }var x = add3(1,1);function add3(a,b){return add2(a,b);}function add2(a,b){return add1(a,b);}function add1(a,b){return add(a,b);}</script></body></html> 查看效果:http://hovertree.com/texiao/js/34/7.htm效果图:八、计时功能console.time()和console.timeEnd(),用来显示代码的运行时间。示例代码:<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1" /><title>显示代码的运行时间_何问起</title><base target="_blank" /><meta charset="utf-8" /></head><body><div>console.time()和console.timeEnd(),用来显示代码的运行时间。<a href="http://hovertree.com/h/bjaf/gk6698g3.htm">说明</a><a href="http://hovertree.com">首页</a></div><script type="text/javascript">console.time("控制台计时器一");for(var i=0;i<10000;i++){for(var j=0;j<1000;j++){} }console.timeEnd("控制台计时器一");</script></body></html> 查看效果:http://hovertree.com/texiao/js/34/8.htm效果图:
许多地方在春节、元宵等节日有放烟花的习俗,如果在网页上模拟烟花,以前也有一些javascript实现的效果,自从HTML5兴起之后,网页模拟烟花更加容易、逼真了。效果展示:http://hovertree.com/texiao/html5/43/效果图:代码如下:<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>html5 canvas全屏烟花动画特效 - 何问起</title><base target="_blank" /> <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/html5/43/css/normalize.css" /> <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/html5/43/css/hovertree.css"> </head> <body> <div class="hovertree"></div> <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="http://hovertree.com/texiao/html5/43/js/jquery.fireworks.js"></script> <script type="text/javascript"> $('.hovertree').fireworks({ sound: true, // sound effect opacity: 0.9, width: '100%', height: '100%' }); </script> <div style="width:340px;position:fixed;z-index:99;">来源:<a href="http://hovertree.com/">何问起</a> <a href="http://hovertree.com/h/bjag/me34x8fk.htm">说明</a></div> </body> </html> HTML5不只在图像方面有许多进步,在声音方面也有进步,本烟花特效还可以设置是否有声音效果。sound: true 或者 sound: false 。本特效源码下载:http://hovertree.com/h/bjag/24o31rk5.htmHTML5的相关题目以下不是canvas的方法是:A、getContext()B、fill()C、stroke()D、controller()答案:http://hovertree.com/tiku/bjaf/4tlxjl9k.htm相关效果:http://hovertree.com/h/bjaf/epbhdsa3.htm
2016年马上结束了,不管这一年经历了什么,付出和收获了什么,只能挥手和2016告别了。但愿这一年的经历,能让我们更好的把握未来的时间,把握即将到来的2017年。值此元旦来临之际,何问起制作了一个HTML5特效,预祝各位新年快乐,在2017年美梦成真!查看效果:http://hovertree.com/texiao/html5/42/进去后点击按钮,收获祝福。效果图:
2014年10月29日,W3C宣布,经过接近8年的艰苦努力,HTML5标准规范终于制定完成。Html5将会取代1999年制定的HTML 4.01、XHTML 1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求,为桌面和移动平台带来无缝衔接的丰富内容。这是一个HTML5制作的火焰动画特效:http://hovertree.com/texiao/html5/26/效果图如下:该效果在HTML5之前一般使用Flash实现,现在使用HTML5实现,浏览器已经原生支持,不需要flash等插件。作为“年长”的web开发者,可以说一步一步见证着HTML5的发展。这些年为了兼容IE6放弃了很多HTML5的新特性。但是今时不同以往,移动设备的流行,天然支持HTML5,以及桌面端IE最终被用户和微软唾弃,更多支持HTML5浏览器的受欢迎,我要重新研究一下HTML5带来的这些新特性。练习题目:HTML5 之前的 HTML 版本是?A.HTML 4.01B.HTML 4C.HTML 4.1D.HTML 4.9http://hovertree.com/shortanswer/bjae/kigbklfy.htmHTML5 的新特性① 语义特性(Semantic)HTML5赋予网页更好的意义和结构。② 本地存储特性(OFFLINE & STORAGE)基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。③ 设备访问特性 (DEVICE ACCESS)从Geolocation功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联。④ 连接特性(CONNECTIVITY)更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。⑤ 网页多媒体特性(MULTIMEDIA)支持网页端的Audio、Video等多媒体功能, 与网站自带的APPS,摄像头,影音功能相得益彰。⑥ 三维、图形及特效特性(3D, Graphics & Effects)基于SVG、Canvas、WebGL及CSS3的3D功能,用户会惊叹于在浏览器中,所呈现的惊人视觉效果。⑦ 性能与集成特性(Performance & Integration)没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术,解决以前的跨域等问题,帮助您的Web应用和网站在多样化的环境中更快速的工作。⑧ CSS3随着web 2.0的出现和发展,以往的CSS已经无法完全满足现今页面的交互等需求,CSS3应运而生了。
买了服务器后要架设网站,可能会遇到配置伪静态的问题,在这里分享一下IIS平台的设置方法。 使用IIS 8架设网站,如果要使用伪静态的功能,或者是MVC项目,可能需要添加“通配符脚本映射”。如果设置过IIS 6,对应的是“通配符应用程序映射”。参考:http://hovertree.com/h/bjaf/xpdb8gpm.htm添加设置的步骤通过下列图片展示。打开IIS 管理器,展开网站列表,选择需要设置的网站,然后在“功能视图”中双击“处理程序映射”图标。 更多:http://hovertree.com/menu/iis/
效果展示 http://hovertree.com/texiao/nav/4/手机扫描二维码查看效果:源码下载 http://hovertree.com/h/bjaf/kroft6c7.htm效果图如下:代码如下:<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery+CSS3移动手机菜单代码 - 何问起</title><base target="_blank" /> <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/nav/4/css/default.css"> <!--<link href='http://fonts.useso.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>--> <link rel="stylesheet" type="text/css" href="css/demo-1.css"> <!--[if IE]> <script src="http://hovertree.com/texiao/html5/4/html5shiv.min.js"></script> <![endif]--> </head> <body> <div class="htmleaf-container"> <div id="wrapper"> <div class="menu"> <img id="menu-bg" src="http://hovertree.com/texiao/nav/4/img/golden-gate-lights.jpg" /> <ul> <li><a href="http://hovertree.com/about/">About</a></li> <li><a href="http://hovertree.com/h/bjaf/f34s9wqj.htm">Share</a></li> <li><a href="http://hovertree.com/tiku/bjaf/iaf4sqdx.htm">Activity</a></li> <li><a href="http://hovertree.com/hovertreescj/">Settings</a></li> <li><a href="http://hovertree.com/menu/webfront/">Contact</a></li> </ul> </div> <div class="screen"> <div class="navbar"></div> <div class="list"> <div class="item"> <div class="img"></div> <span></span> <span></span> <span><a href="http://hovertree.com/h/bjaf/v8ykv2u9.htm">原文</a></span> </div> <div class="item"> <div class="img"></div> <span><a href="http://hovertree.com">何问起</a></span> <span><a href="http://hovertree.com/menu/texiao/">特效</a></span> <span></span> </div> <div class="item"> <div class="img"></div> <span></span> <span></span> <span></span> </div> <div class="item"> <div class="img"></div> <span></span> <span></span> <span></span> </div> </div> <div class="burger"> <div class="x"></div> <div class="y"></div> <div class="z"></div> </div> </div> </div> </div> <script src="http://hovertree.com/texiao/nav/4/js/stopExecutionOnTimeout.js?t=1"></script> <script src="http://hovertree.com/texiao/nav/4/js/jquery-2.1.1.min.js" type="text/javascript"></script> <script> if ('ontouchstart' in window) { var click = 'touchstart'; } else { var click = 'click'; } $('div.burger').on(click, function () { if (!$(this).hasClass('open')) { openMenu(); } else { closeMenu(); } }); $('div.menu ul li a').on(click, function (e) { e.preventDefault(); closeMenu(); }); function openMenu() { $('div.burger').addClass('open'); $('div.y').fadeOut(100); $('div.screen').addClass('animate'); setTimeout(function () { $('div.x').addClass('rotate30'); $('div.z').addClass('rotate150'); $('.menu').addClass('animate'); setTimeout(function () { $('div.x').addClass('rotate45'); $('div.z').addClass('rotate135'); }, 100); }, 10); } function closeMenu() { $('div.screen, .menu').removeClass('animate'); $('div.y').fadeIn(150); $('div.burger').removeClass('open'); $('div.x').removeClass('rotate45').addClass('rotate30'); $('div.z').removeClass('rotate135').addClass('rotate150'); setTimeout(function () { $('div.x').removeClass('rotate30'); $('div.z').removeClass('rotate150'); }, 50); setTimeout(function () { $('div.x, div.z').removeClass('collapse'); }, 70); } </script> <!--<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff"> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源:<a href="http://hovertree.com/" target="_blank">何问起</a></p> </div>--> </body> </html> 转自:http://hovertree.com/h/bjaf/v8ykv2u9.htm https://yq.aliyun.com/u/helejun