好歌_个人页_阿里云开发者社区

发表了文章 2017-01-20

ASP.NET用户控件的利弊和使用实例

创建用户控件要比创建自定义控件方便很多，因为可以重用现有的控件。用户控件使创建具有复杂用户界面元素的控件极为方便。在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/

发表了文章 2017-01-11

javascript实现中国各大城市快速下拉选择

如果开发中遇到需要输入城市名的页面，那么这个特效可以帮助快速输入。这是一个纯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"><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

发表了文章 2017-01-08

使用开源CMS快速建立企业网站

产品展示功能是十分普遍常用的功能，特别是在企业网站和电商网站中，而新闻动态也是企业网站的基本功能。随着.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

发表了文章 2017-01-07

js调试工具Console命令详解

可能大家对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效果图：

发表了文章 2017-01-02

html5 canvas全屏烟花动画特效

许多地方在春节、元宵等节日有放烟花的习俗，如果在网页上模拟烟花，以前也有一些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-12-31

2017新年快乐特效

2016年马上结束了，不管这一年经历了什么，付出和收获了什么，只能挥手和2016告别了。但愿这一年的经历，能让我们更好的把握未来的时间，把握即将到来的2017年。值此元旦来临之际，何问起制作了一个HTML5特效，预祝各位新年快乐，在2017年美梦成真！查看效果：http://hovertree.com/texiao/html5/42/进去后点击按钮，收获祝福。效果图：

发表了文章 2016-12-20

HTML5理论实践与练习(一)

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应运而生了。

发表了文章 2016-12-18

图解IIS配置伪静态

买了服务器后要架设网站，可能会遇到配置伪静态的问题，在这里分享一下IIS平台的设置方法。使用IIS 8架设网站，如果要使用伪静态的功能，或者是MVC项目，可能需要添加“通配符脚本映射”。如果设置过IIS 6，对应的是“通配符应用程序映射”。参考：http://hovertree.com/h/bjaf/xpdb8gpm.htm添加设置的步骤通过下列图片展示。打开IIS 管理器，展开网站列表，选择需要设置的网站，然后在“功能视图”中双击“处理程序映射”图标。更多：http://hovertree.com/menu/iis/

发表了文章 2016-06-21

jQuery手机菜单

效果展示 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 rel="stylesheet" type="text/css" href="css/demo-1.css">  </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>  </body> </html> 转自：http://hovertree.com/h/bjaf/v8ykv2u9.htm https://yq.aliyun.com/u/helejun

好歌_个人页

个人介绍

擅长的技术

ASP.NET用户控件的利弊和使用实例

javascript实现中国各大城市快速下拉选择

使用开源CMS快速建立企业网站

js调试工具Console命令详解

html5 canvas全屏烟花动画特效

2017新年快乐特效

HTML5理论实践与练习(一)

图解IIS配置伪静态

jQuery手机菜单

ASP.NET用户控件的利弊和使用实例

javascript实现中国各大城市快速下拉选择

使用开源CMS快速建立企业网站

js调试工具Console命令详解

html5 canvas全屏烟花动画特效

2017新年快乐特效

HTML5理论实践与练习(一)

图解IIS配置伪静态

jQuery手机菜单