发表了一篇文章
要想使用Bootstrap框架，就要在页面中引用Bootstrap框架文件。一共四个：bootstrap.min.css、bootstrap-theme.min.css、jquery-1.10.2.min.js、bootstrap.min.js
只有引用了这些文件，接下来才可以使用Bootstrap框架提供的各种UI元素
接下来按照上图依次说明各个部分的代码
顶部说明文字：
设计整个页面的思路是整个页面放在一个面板（Panel）上，顶部的说明的文字就是面板头（Panel Head）
而Bootstrap框架的页面是一个12列的网格布局。因此，我把整个页面分成三部分。左右各3列宽的空白，中间6列宽放一个面板（Panel）。
代码如下：剩下部分的代码都依次在&div class="panel-body"& &/div&中
&body class="bs-docs-home"&
&div class="container theme-showcase"&
&h1 style=" line-height:2"& &/h1&&br /&
&div class="row"&
&div class="col-sm-3"&&/div&
&div class="col-sm-6"&
&div class="panel panel-primary"&
&div class="panel-heading"&
&h3 class="panel-title"&&strong&职业技能考证分数查询&/strong&&/h3&
&div class="panel-body"&
&div class="col-sm-3"&&/div&
&script src="https://code.jquery.com/jquery-1.10.2.min.js"&&/script&
&script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"&&/script&
提示文字用的是Bootstrap框架中的提示（alert）组件，代码如下：
&div class="alert alert-danger alert-dismissable"&
&button type="button" class="close" data-dismiss="alert" aria-hidden="true"&&&/button&
&strong&注意!&/strong& 本站查询的分数来源于12333官网，详情请到官网咨询
身份证表单和查询按钮
身份证表单和后面的科目表单都应该在一个表单中。身份证表单和查询按钮是利用Bootstrap框架的表单元素组。利用input group把文本框（input）和按钮（button）组合在一起。而Bootstrap框架提供了诸如水印、高亮等效果。为表单增色不少
&form role="form" name="form1"&
&div class="form-group"&
&label for="IDCard"&请输入您的身份证号码&/label&
&div class="input-group"&
&input type="text" class="form-control" id="IDCard" name="IDCard" placeholder="身份证号码" &
&span class="input-group-btn"&
&button class="btn btn-default" type="button" onClick="form1.submit();" &查询&/button&
科目表单也是利用Bootstrap框架的表单元素组。利用input group把文本框（input）和按钮（button）和下拉列表（ul）组合在一起。
可以在文本框里直接输入科目，也可以在下拉菜单中选择科目。具体的实现是在超链接（a）的点击事件（click）中用$('#Subject').val('计算机操作员')等代码来改变文本框中的内容。科目表单位置在身份证表单的下方，在表单（form）里面
代码如下：
&div class="form-group"&
&label for="Subject"&请输入您要查询的科目&/label&
&div class="input-group"&
&input type="text" class="form-control" id="Subject" name="Subject" placeholder="科目，空白科目意味着查询所有的科目" &
&div class="input-group-btn"&
&button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&科目 &span class="caret"&&/span&&/button&
&ul class="dropdown-menu pull-right"&
&li&&a href="#" onClick="$('#Subject').val('计算机操作员');"&计算机操作员&/a&&/li&
&li&&a href="#" onClick="$('#Subject').val('网页设计');"&网页设计&/a&&/li&
&li&&a href="#" onClick="$('#Subject').val('多媒体');"&多媒体&/a&&/li&
查询错误信息
当点击查询按钮时，没有查到记录的时候，则显示该查询错误信息。和之前的提示文字一样，用的是Bootstrap框架中的提示（alert）组件。
这个信息是否显示，还需要后台动态代码的配合，动态代码根据查询的结果来决定是否显示该信息（没有记录，则显示该信息）。动态代码不在这篇文章里讨论。
位置在表单（form）的后面，代码如下：
&div class="alert alert-danger alert-dismissable"&
&button type="button" class="close" data-dismiss="alert" aria-hidden="true"&&&/button&
&strong&注意!&/strong& 没有查到成绩，请检查身份证号码和科目后，再次查询
当点击查询按钮时，查到记录的时候，则显示成绩表格。同样，是否显示也需要后台的动态代码的配合。
查询错误信息和成绩表格同时只能出现一个
代码如下：
&div class="table-responsive"&
border="0" cellspacing="0" cellpadding="0" class="table"&
&tr class=" label-primary"&
&th scope="col" width="50%" &&span style="color:white"&科目&/span&&/th&
&th scope="col"&&span style="color:white"&成绩&/span&&/th&
&tr class="active"&
&td&计算机操作员&/td&
&td&没有成绩&/td&
&tr class="success"&
&td&计算机操作员&/td&
&td&优秀&/td&
&tr class="active"&
&td&多媒体操作员&/td&
&td&良好&/td&
&tr class="success"&
&td&网页设计&/td&
&td&不及格&/td&
这个页面是利用Bootstrap框架来实现的，得益于Bootstrap框架的强大，使得设计UI不再成为一件难事。但Bootstrap仅仅是UI框架，它的出彩还得依靠后台的动态代码的配合。
下面这个网址，就是笔者用上面的界面加上后台动态代码（PHP）来实现职业技能考试分数（仅限于上海）的查询的功能。大家可以去看看，并提出宝贵的意见（有效期1个月）。
完整的UI代码如下：
&!DOCTYPE html&
&html lang="en"&
&meta charset="utf-8"&
&meta http-equiv="X-UA-Compatible" content="IE=edge"&
&meta name="viewport" content="width=device-width, initial-scale=1.0"&
&meta name="description" content=""&
&meta name="author" content=""&
&title&职业技能考证分数查询（Bootstrap）&/title&
&link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css"&
&link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"&
&!--[if lt IE 9]&&script src="../../docs-assets/js/ie8-responsive-file-warning.js"&&/script&&![endif]--&
&!--[if lt IE 9]&
&script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&&/script&
&script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"&&/script&
&![endif]--&
.bs-docs-home
background-color: #1B31B1;
background-image: url(line.png);
&body class="bs-docs-home"&
&div class="container theme-showcase"&
&h1 style=" line-height:2"& &/h1&&br /&
&div class="row"&
&div class="col-sm-3"&&/div&
&div class="col-sm-6"&
&div class="panel panel-primary"&
&div class="panel-heading"&
&h3 class="panel-title"&&strong&职业技能考证分数查询&/strong&&/h3&
&div class="panel-body"&
&div class="alert alert-danger alert-dismissable"&
&button type="button" class="close" data-dismiss="alert" aria-hidden="true"&&&/button&
&strong&注意!&/strong& 本站查询的分数来源于12333官网，详情请到官网咨询&/div&
&form role="form" name="form1"&
&div class="form-group"&
&label for="IDCard"&请输入您的身份证号码&/label&
&div class="input-group"&
&input type="text" class="form-control" id="IDCard" name="IDCard" placeholder="身份证号码" &
&span class="input-group-btn"&
&button class="btn btn-default" type="button" onClick="form1.submit();" &查询&/button&
&div class="form-group"&
&label for="Subject"&请输入您要查询的科目&/label&
&div class="input-group"&
&input type="text" class="form-control" id="Subject" name="Subject" placeholder="科目，空白科目意味着查询所有的科目" &
&div class="input-group-btn"&
&button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&科目 &span class="caret"&&/span&&/button&
&ul class="dropdown-menu pull-right"&
&li&&a href="#" onClick="$('#Subject').val('计算机操作员');"&计算机操作员&/a&&/li&
&li&&a href="#" onClick="$('#Subject').val('网页设计');"&网页设计&/a&&/li&
&li&&a href="#" onClick="$('#Subject').val('多媒体');"&多媒体&/a&&/li&
&div class="alert alert-danger alert-dismissable"&
&button type="button" class="close" data-dismiss="alert" aria-hidden="true"&&&/button&
&strong&注意!&/strong& 没有查到成绩，请检查身份证号码和科目后，再次查询
&div class="table-responsive"&
border="0" cellspacing="0" cellpadding="0" class="table"&
&tr class=" label-primary"&
&th scope="col" width="50%" &&span style="color:white"&科目&/span&&/th&
&th scope="col"&&span style="color:white"&成绩&/span&&/th&
&tr class="active"&
&td width="50%"&计算机操作员&/td&
&td&没有成绩&/td&
&tr class="success"&
&td&计算机操作员&/td&
&td&优秀&/td&
&tr class="active"&
&td&多媒体操作员&/td&
&td&良好&/td&
&tr class="success"&
&td&网页设计&/td&
&td&不及格&/td&
&div class="col-sm-3"&&/div&
&script src="https://code.jquery.com/jquery-1.10.2.min.js"&&/script&
&script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"&&/script&
Bootstrap框架是一个前端UI设计的框架，它提供了统一的UI界面，简化了设计界面UI的过程（缺点是定制了界面，调整的余地不是太大）。尤其是现在的响应时布局（我的理解是页面根据不同的分辨率，采用不…
发表了一篇文章
问题描述：在下图里我们有不同高度的挡板。这个图片由一个整数数组所代表，数组中每个数是墙的高度。下图可以表示为数组（2、5、1、2、3、4、7、2）。假如开始下雨了，那么挡板之间的水坑能够装多少水（水足…
发表了一篇文章
基本知识回顾：
计算机中的颜色Color，用RGB模式存储（用R、G、B三个分量表示颜色，每个分量的范围是0—255）。
而计算机中的颜色除了用RGB模式表示以外，常见的还有HSV模式（或者是HS…
发表了一篇文章
问题描述：
甲乙两人比赛投篮。约定甲先投篮，每人投篮投进一球，则继续投球，若投失一球，则换人投球。初始积分为1分，甲每投进一球，积分加1分；乙每投进1球，积分减1分。若积分达到N分（N＞1），甲获胜…
发表了一篇文章
有些简单的单网页，如果利用等高线效果的背景图片，再配合合适的背景色，能达到绚丽的效果。如下图所示：
本文就介绍该等高线效果的背景图片是如何制作的。Follow Me！！！！
发表了一篇文章
注意：由于在jquery.snippet.js中使用了代码$.browser.opera，而这个代码在JQuery 1.9版本中已经移除，故如果引用的是JQuery 1.9版本，则插件使用会不正常。因此，建议直接引用其官网上的JQuery 1.4版本。
那如何在自己的博客中使用Snippet插件呢？
首先，把需要用到的文件先上传到博客的后台
其次，在博客的页面中写引用插件的代码。
或者是统一在博客后台中的页面设置中统一引用，但这有一个副作用，就是每篇博客都会引用这几个文件（不管有用没用，都会引用，这些文件加起来也有近240K，对没用到这个插件的页面来说是个浪费，例如笔者之前的近百篇文章）
我们来看看Snippet插件是如何美化代码的
1、页面加载Snippet插件所需的文件（三个文件，大约240K）
2、调用插件的Snippet方法，美化PRE标签下的代码
3、对代码重新用HTML代码格式化（添加HTML标签，如li和span等），通过HTML代码调用相应的类来呈现美化好后的代码
但调用Snippet插件美化代码也有些副作用
1、需要调用外部文件，代码臃肿（三个文件240K）
2、我们看中的是美化后的结果，不在乎美化的过程。而调用插件，则每次浏览的时候都会执行美化的过程。
3、美化还不智能，只能针对一种类别进行美化，比如仅仅对HTML或者是JS美化。如果是包含JS代码的HTML页面，则美化的效果大打折扣。
那我们可以把美化好后的HTML代码段复制到我们的博客中，再引用相应的CSS文件，那既可以实现美化代码的作用，又避免引用Snippet插件的文件，还可以自己定制微调，实现完美美化包含JS代码的HTML页面。
于是，自己单独编写一个用Snippet插件来美化代码的页面。页面效果如下：
界面比较简陋，上部是一个文本框，中间是两个选项和一个按钮，下部分为两部分，一个是美化后的效果，一个是该效果对应的HTML代码。具体的该页面的HTML代码如下所示：（这个页面在IE下运行正常，但在Chrome下不能正常运行，是因为innerText么？）
&!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"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&Snippet&/title&
&link href="CSS/jquery.snippet.css" rel="stylesheet" type="text/css" /&
&script type="text/javascript" src="JS/jquery.min.js"&&/script&
&script type="text/javascript" src="JS/jquery.snippet.js"&&/script&
&textarea cols="100" rows="20" name="Code"&&/textarea&
&input type="button" name="button" id="button" value="美化代码" onclick="F();" /&
&select name="select" id="select"&
&option value="html"&HTML&/option&
&option value="css"&CSS&/option&
&option value="JavaScript"&JavaScript&/option&
&select name="select2" id="select2"&
&option value="bright"&bright&/option&
&option value="golden"&golden&/option&
&option value="navy"&navy&/option&
&option value="whatis"&whatis&/option&
&option value="random" selected="selected"&random&/option&
&div id="C" style="width: 600 word-wrap: break-"&
&pre id="FormatCode"&&/pre&
&div id="D" style="background-color: #EEF7A6"&
function F() {
var S = Code.value;
document.getElementById("C").innerHTML = '&pre id="FormatCode"&&/pre&';
document.getElementById("FormatCode").innerText = S;
var V1, V2;
V1 = select.value;
V2 = select2.value;
$("pre#FormatCode").snippet(V1, { style: V2, transparent: false, showNum: false });
document.getElementById("D").innerText = document.getElementById("C").innerHTML;
注：Snippet插件一共有39种样式，这里是演示代码，只贴了4种选项，实际可以根据自己的喜好贴选项。在实际的页面中，我贴了15种选项。
我再把所需要的样式表直接添加在源代码里，因为本文所用的样式是Golden样式，故本文只贴了Snippet插件的基本样式和Golden样式。
.sh_golden{background:none; padding:0; margin:0; border:0 none;}
.sh_golden .sh_sourcecode{background-color:#000;color:#db0;font-weight:normal;font-style:normal;}
.sh_golden .sh_sourcecode .sh_keyword{color:#ffed8a;font-weight:bold;font-style:normal;}
.sh_golden .sh_sourcecode .sh_type{color:#ffed8a;font-weight:normal;font-style:normal;}
.sh_golden .sh_sourcecode .sh_string{color:#f00;font-weight:normal;font-style:normal;}
.sh_golden .sh_sourcecode .sh_regexp{color:#f00;font-weight:normal;font-style:normal;}
.sh_golden .sh_sourcecode .sh_specialchar{color:#f00;font-weight:normal;font-style:normal;}
.sh_golden .sh_sourcecode .sh_comment{color:#978345;font-weight:normal;font-style:italic;}
.sh_golden .sh_sourcecode .sh_number{color:#fff;font-weight:normal;font-style:normal;}
.sh_golden .sh_sourcecode .sh_preproc{color:#fda;font-weight:normal;font-style:normal;}
.sh_golden .sh_sourcecode .sh_symbol{color:#ababab;font-weight:normal;font-style:normal;}
.sh_golden .sh_sourcecode .sh_function{color:#db0;font-weight:bold;font-style:normal;}
.sh_golden .sh_sourcecode .sh_cbracket{color:#ababab;font-weight:normal;font-style:normal;}
.sh_golden .sh_sourcecode .sh_url{color:#f00;font-weight:normal;font-style:normal;}
.sh_golden .sh_sourcecode .sh_date{color:#ffed8a;font-weight:bold;font-style:normal;}
.sh_golden .sh_sourcecode .sh_time{color:#ffed8a;font-weight:bold;font-style:normal;}
.sh_golden .sh_sourcecode .sh_file{color:#ffed8a;font-weight:bold;font-style:normal;}
.sh_golden .sh_sourcecode .sh_ip{color:#f00;font-weight:normal;font-style:normal;}
.sh_golden .sh_sourcecode .sh_name{color:#f00;font-weight:normal;font-style:normal;}
.sh_golden .sh_sourcecode .sh_variable{color:#dedede;font-weight:bold;font-style:normal;}
.sh_golden .sh_sourcecode .sh_oldfile{color:#f00;font-weight:normal;font-style:normal;}
.sh_golden .sh_sourcecode .sh_newfile{color:#f00;font-weight:normal;font-style:normal;}
.sh_golden .sh_sourcecode .sh_difflines{color:#ffed8a;font-weight:bold;font-style:normal;}
.sh_golden .sh_sourcecode .sh_selector{color:#dedede;font-weight:bold;font-style:normal;}
.sh_golden .sh_sourcecode .sh_property{color:#ffed8a;font-weight:bold;font-style:normal;}
.sh_golden .sh_sourcecode .sh_value{color:#f00;font-weight:normal;font-style:normal;}
.snippet-wrap {position:relative;}
*:first-child+html .snippet-wrap {display:inline-block;}
* html .snippet-wrap {display:inline-block;}
.snippet-reveal{text-decoration:underline;}
*:first-child+html .snippet-wrap .snippet-hide {bottom:25px;}
* html .snippet-wrap .snippet-hide {bottom:25px;}
.snippet-wrap pre.sh_sourcecode{padding:1em;line-height:1.8em;overflow:auto;position:relative;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
box-shadow: 2px 2px 5px #000;
-moz-box-shadow: 2px 2px 5px #000;
-webkit-box-shadow: 2px 2px 5px #000;}
.snippet-wrap pre.snippet-textonly {padding:2em;}
*:first-child+html .snippet-wrap pre.snippet-formatted {padding:2em 1em;}
* html .snippet-wrap pre.snippet-formatted {padding:2em 1em;}
.snippet-reveal pre.sh_sourcecode {padding:.5em 1em; text-align:right;}
.snippet-wrap .snippet-num li{padding-left:1.5em;}
.snippet-wrap .snippet-no-num{list-style:none!important; padding:.6em 1em; margin:0!important;}
.snippet-wrap .snippet-no-num li {list-style:none ; padding-left:0;margin:0px;}
.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:3em;}
.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}
.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}
.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:-3em; padding-left:6px;}
*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2.4em;}
* html .snippet-wrap .snippet-num li.box {margin-left:-2.4em;}
.snippet-wrap li.box-top {border-width:1px 1px 0 !important;}
.snippet-wrap li.box-bot {border-width:0 1px 1px !important;}
.snippet-wrap li.box-mid {border-width:0 1px !important;}
.snippet-wrap .snippet-num li .box-sp {width:18px; display:inline-block;}
*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:27px;}
* html .snippet-wrap .snippet-num li .box-sp {width:27px;}
.snippet-wrap .snippet-no-num li.box {border:1px solid;}
.snippet-wrap .snippet-no-num li .box-sp {display:none;}
.snippet-container{width:80%;word-wrap:break-word;}
上面的CSS代码中的绿色部分是我额外添加的，因为博客园中设置了一些CSS，破坏了Snippet插件美化后的效果，如增加了li元素的行间距，还有ul的左边距，以及增加了li元素的list-style属性（用了!important提高了优先级，我也只能用!important提升优先级，强制去掉li元素之前的列表样式）
实际使用下来，Snippet插件美化代码的效果还是不错的，但也有要完善的地方，例如在美化CSS中，碰到+-等符号美化就会出错，还得自己修正。
题外话：在贴样式的时候，不知是博客园的设置问题还是Windows Live Writer的问题，样式中的大写字母会被替换成小写字母，导致样式无效（浏览器认为是不同的样式，没法运用）。故在贴美化后的HTML代码时，把引用的CSS中的类大写改成小写。
本文是利用Snippet插件来美化我们的代码。如果，还有更好的建议，望不吝赐教。
书写博客，难免要贴出代码。然而直接贴出代码，则不美观。于是，应运而生出现了很多代码美化的插件。其中比较有名的是Syntax Highlighting插件。
笔者在网上翻阅的时候发现了Snipp…
发表了一篇文章
这道题是笔者当年参加竞赛的题目，多年来一直未得其解，久久不能释怀。近日，重新拿起该题细细研究，终于将其解出，著文以记之。
问题描述：
长方体长X，宽Y，高Z。X、Y、Z都是正整数。长方体由长…
发表了一篇文章
(function($){
jQuery.fn.DropDownList = function(options) {
var defaults ={
InputName:"Q",
ButtonText:"示例",
ReadOnly:true,
MaxHeight:-1,
onSelect:$.noop(),
var options = $.extend(defaults,options);
return this.each(function(){
var o=options;
var Obj=$(this);
var S="&div class='input-group'&";
S = S + "&input type='text' class='form-control' name='" + o.InputName + "' id='" + o.InputName + "'
S = S + "&div class='input-group-btn'&";
S = S + "&button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown'&" + o.ButtonText + "&span class='caret'&&/span&&/button&";
S = S + "&ul class='dropdown-menu dropdown-menu-right' role='menu'&";
if (o.Sections!== undefined)
$.each(o.Sections,function(n,value){
if (n&0) { S=S + "&li class='divider'&&/li&"; }
if (value.ItemHeader!==undefined) { S = S + "&li class='dropdown-header'&" + value.ItemHeader + "&/li&"; }
CreateItem(value);
CreateItem(o);
var SelText="";
var SelData="";
function CreateItem(Items)
$.each(Items.Items,function(n,Item){
if (Item.ItemData===undefined) {Item.ItemData=Item.ItemText;}
S=S + "&li&&a href='#'
ItemData='"
+ Item.ItemData + "' &" + Item.ItemText + "&/a&&/li&";
if (Item.Selected==true) { SelText=Item.ItemText;SelData=Item.ItemData;}
S =S + "&/ul&&/div&&/div&";
Obj.html(S);
var Input=Obj.find("input");
if (SelText!="") { SetData(SelText,SelData); }
Obj.find("a").bind("click", function(e) {SetData($(this).html(),$(this).attr("ItemData"));});
if (o.ReadOnly==true)
Input.bind("cut copy paste keydown", function(e) {e.preventDefault();});
if (o.MaxHeight&0)
var UL=Obj.find("ul");
if (UL.height()&o.MaxHeight)
{UL.css({'height':o.MaxHeight,'overflow':'auto'});}
function SetData(Text,Data)
Input.val(Text);
if (o.onSelect) { o.onSelect(o.InputName,Data); }
})(jQuery);
下面是几个用法实例：对Id为DropDownList的div元素运用组件，则在该div内部添加一个DropDownList组件
1、用Items属性实现下拉菜单（所有菜单项都在一个组里，没有组标题，没有分割线）
function ShowData(InputName,Data)
alert(InputName + ":" + Data);
$("#DropDownList").DropDownList(
InputName:"Q",
ButtonName:"参考",
onSelect : function(I,Data)
ShowData(I,Data);
{ItemText:"示例1",ItemData:"Demo1",Selected:true},
{ItemText:"示例2",ItemData:"Demo2"},
{ItemText:"示例3",ItemData:"Demo3"}
2、用Sections属性实现下拉菜单（菜单组之间有分割线，菜单组可以设置组标题）
function ShowData(InputName,Data)
alert(InputName + ":" + Data);
$("#DropDownList").DropDownList(
InputName:"Q",
ButtonText:"参考",
onSelect : function(I,Data)
ShowData(I,Data);
Sections:[
ItemHeader:"全部",
{ItemText:"全部",ItemData:"All"}
{ItemText:"示例1",ItemData:"Demo1",Selected:true},
{ItemText:"示例2"}
3、实现全国省份直辖市的下拉选择，要设置MaxHeight属性
function ShowData(InputName,Data)
alert(InputName + ":" + Data);
$("#DropDownList").DropDownList(
InputName:"Q",
ButtonText:"参考",
MaxHeight:310,
onSelect : function(I,Data)
ShowData(I,Data);
Sections:[
ItemHeader:"直辖市",
{ItemText:"北京",ItemData:"Beijing"},
{ItemText:"上海",ItemData:"Shanghai",Selected:true},
{ItemText:"天津",ItemData:"Tianjin"},
{ItemText:"重庆",ItemData:"Chongqing"}
ItemHeader:"华东地区",
{ItemText:"山东",ItemData:"Shandong"},
{ItemText:"江苏",ItemData:"Jiangsu"},
{ItemText:"安徽",ItemData:"Anhui"},
{ItemText:"浙江",ItemData:"Zhejiang"},
{ItemText:"福建",ItemData:"Fujian"}
ItemHeader:"华南地区",
{ItemText:"广东",ItemData:"Guangdong"},
{ItemText:"广西",ItemData:"Guangxi"},
{ItemText:"海南",ItemData:"Hainan"}
ItemHeader:"华中地区",
{ItemText:"湖北",ItemData:"Hubei"},
{ItemText:"湖南",ItemData:"Hunan"},
{ItemText:"河南",ItemData:"Henan"},
{ItemText:"江西",ItemData:"Jiangxi"}
ItemHeader:"华北地区",
{ItemText:"河北",ItemData:"Hebei"},
{ItemText:"山西",ItemData:"Shanxi"},
{ItemText:"内蒙古",ItemData:"Neimenggu"}
ItemHeader:"西北地区",
{ItemText:"宁夏",ItemData:"Ningxia"},
{ItemText:"新疆",ItemData:"Xinjiang"},
{ItemText:"青海",ItemData:"Qinghai"},
{ItemText:"陕西",ItemData:"Shaanxi"},
{ItemText:"甘肃",ItemData:"Gansu"},
ItemHeader:"西南地区",
{ItemText:"四川",ItemData:"Sichuan"},
{ItemText:"云南",ItemData:"Yunnan"},
{ItemText:"贵州",ItemData:"Guizhou"},
{ItemText:"西藏",ItemData:"Xizang"}
ItemHeader:"东北地区",
{ItemText:"辽宁",ItemData:"Liaoning"},
{ItemText:"吉林",ItemData:"Jilin"},
{ItemText:"黑龙江",ItemData:"Heilongjiang"}
唯一的遗憾就是有滚动条的时候，滚动条会覆盖下拉菜单右侧的两个圆角，如果真要完美的话，可能要对Bootstrap中的源代码进行修改了。
Bootstrap是当下流行的前端UI组件库之一。利用Bootstrap，可以很方便的构造美观、统一的页面。把设计师从具体的UI编码中解放出来。
Bootstrap提供了不少的前端UI组件。带…
发表了一篇文章
&ul class="dropdown-menu dropdown-menu-right" role="menu"&
&li&&a href="#"&Action&/a&&/li&
&li&&a href="#"&Another action&/a&&/li&
&li&&a href="#"&Something else here&/a&&/li&
&li class="divider"&&/li&
&li&&a href="#"&Separated link&/a&&/li&
从上面的结构可以看出，由ul标签实现下拉菜单的外观（通过引用dropdown-menu样式），由li标签实现菜单项（包括菜单、分隔符、组标题）。来看看ul和li标签对应的CSS：
.dropdown-menu {
position: absolute;
top: 100%;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
.dropdown-menu & li & a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.;
color: #333;
white-space: nowrap;
.dropdown-menu & li & a:hover,
.dropdown-menu & li & a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
由于a的样式是通过.dropdown-menu & li & a来实现的，故要实现a的外观必须是在含有样式dropdown-menu的ul里面的li的里面的a的。
于是，动了一个念头，在HTML结构里的ul里面的li里再嵌套一个包含样式dropdown-menu的ul，ul里面是li，li里面是a。
但是从上面的CSS可以看出，嵌套在里面的ul也会实现菜单的外观（圆角、投影、浮动等），故在该ul的标签里强制添加style属性，把一些样式强制性的去除（改成inherit，采用默认样式），这些样式包括display、position、top、float、padding、border、border-radius、-webkit-box-shadow、box-shadow。
再说说MaxHeight。本次修改后直接采用CSS的样式max-height，而减少对菜单高度的判断。会有疑问，如果浏览器不支持max-height怎么办？一是不支持max-height的浏览器比较少（IE6等），二是如果浏览器不支持max-height，也就不能很好的支持Bootstrap。故不必考虑浏览器是否支持max-height属性。由于里外有2个ul标签，我们需要对里面的ul标签应用max-height属性，故用UL=Obj.find("ul[style]")语句来找寻里面的ul标签（因为里面的ul含有style属性，而外面的ul没有）。
再说说JQuery的height方法。当调用JQuery的height方法来计算隐藏元素高度时，估计是先会显示元素，然后计算高度，再隐藏元素。这会有两个问题。一是显示再隐藏，速度很快，肉眼看不出，但是浏览器不会说谎，有时浏览器会额外显示滚动条。二是如果该元素的父元素也是隐藏的，则height方法会返回0。
完善版的源代码：
(function($){
jQuery.fn.DropDownList = function(options) {
var defaults ={
InputName:"Q",
ButtonText:"示例",
ReadOnly:true,
MaxHeight:-1,
onSelect:$.noop(),
var options = $.extend(defaults,options);
return this.each(function(){
var o=options;
var Obj=$(this);
var S="&div class='input-group'&";
S = S + "&input type='text' class='form-control' name='" + o.InputName + "' id='" + o.InputName + "'
S = S + "&div class='input-group-btn'&";
S = S + "&button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown'&" + o.ButtonText + " &span class='caret'&&/span&&/button&";
S = S + "&ul class='dropdown-menu dropdown-menu-right' role='menu' &";
S = S + "&li&&ul class='dropdown-menu ' style='display:position:top:0;float:padding:0;border:0border-radius:0-webkit-box-shadow:box-shadow:'&";
var SelText,SelData;
if (o.Sections!== undefined)
$.each(o.Sections,function(n,value){
if (n&0) {S=S + "&li class='divider'&&/li&";}
if (value.ItemHeader!==undefined) {S = S + "&li class='dropdown-header'&" + value.ItemHeader + "&/li&";}
CreateItem(value);
CreateItem(o);
function CreateItem(Items)
$.each(Items.Items,function(n,Item){
if (Item.ItemData===undefined) {Item.ItemData=Item.ItemText;}
S=S + "&li&&a href='#' ItemData='"
+ Item.ItemData + "' &" + Item.ItemText + "&/a&&/li&";
if (Item.Selected==true) {SelText=Item.ItemText;SelData=Item.ItemData;}
S =S + "&/ul&&/li&&/ul&&/div&&/div&";
Obj.html(S);
var Input=Obj.find("input");
if (SelText!="") {SetData(SelText,SelData);}
Obj.find("a").bind("click", function(e) {
SetData($(this).html(),$(this).attr("ItemData"));
if (o.ReadOnly==true)
Input.bind("cut copy paste keydown", function(e) {e.preventDefault();});
if (o.MaxHeight&0)
var UL=Obj.find("ul[style]");
UL.css({'max-height':o.MaxHeight,'overflow':'auto'});
function SetData(Text,Data)
Input.val(Text);
if (o.onSelect) {o.onSelect(o.InputName,Data);}
})(jQuery);
这样通过两层的ul实现了下拉菜单，并且滚动条也没有覆盖右侧的两个圆角。较之上个版本，比较完善。
在前文 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件 中，实现了DropDownList的JQuery组件，但是留有遗憾。就是当下拉菜单出现滚动条的时候，滚动条会覆…
发表了一篇文章
最后说点题外话，本文中的Win API函数的申明都来在下面的网站，网站非常强大
现在能实现截屏的软件很多，就不一一列举了，连WIN7都自带截屏软件，甚至OFFICE2010开始都有截屏的功能。
截屏软件虽多，无外乎三种截屏方式：全屏截图、窗口截图、自定义矩形截图。
发表了一篇文章
当今社会，智能手机的飞速发展。使得可以做到人手一部智能手机。而各种应用层出不穷。
手游（手机游戏）的出现，满足了人们对打发碎片时间的需求。
而在游戏中，宝物升级是最常见的剧情元素之一。而优秀…
发表了一篇文章
今日，在网上看到一篇帖子，介绍了各种时尚美观的六边形LOGO，其中一个吸引了我的目光。
一时技痒，尝试着用PS把它临摹出来
1、新建文档，大小600*600
2、用多边…
发表了一篇文章
&System.Runtime.InteropServices.ComVisible(True)&
使得该类的公用方法能通过Webbrowser控件被调用，就是代码中Query方法
_Web.ObjectForScripting = Me
把该类和Webbrowser控件绑定，这样前端UI就能调用该类的方法了。
在前端UI的HTML代码中，通过window.external.Query(ID, Subject); 调用后台的逻辑
function Query() {
var ID = $('#IDCard').val();
var Subject = $('#Subject').val();
if (ID == '')
alert('请输入身份证号！！！！');
window.external.Query(ID, Subject);
function CreateTable(T) {
$('#ResultTable').html(T);
2、后台如何调用前端UI的方法来刷新页面
上面的前端UI代码中，函数CreateTable是给后台逻辑调用来刷新前端UI的
在后台代码中用下面的代码调用前端UI的函数来刷新UI。
_Web.Document.InvokeScript("CreateTable", A)
至此，前端UI和后台逻辑的双向通信已经全部打通，实现了UI和逻辑层的分离。
同时，前端UI利用众多的HTML、CSS、JS类库能实现很多绚丽的UI，不怕想不到，就怕做不到。
本文中的后台逻辑就不贴了，无外乎就是获取数据、数据分析、格式化数据而已
多说一句，这个前端UI也可以用WPF实现，只是实现的难度要大很多。毕竟网上现成的WPF的前端UI库不太好找。
先看看下面的实例
这是应朋友之邀编写的查询职业技能鉴定考核的分数的软件。看过我之前的博文的，可知这是借用我之前的网页界面。
这个UI，如果用WinForm的控件来实现，难度很高。
…
发表了一篇文章
Public Class clsTetris
Implements I_Question
Private _Shapes As List(Of clsTetrisShape)
Private _Index() As Integer
Public ReadOnly Property Cols As Integer Implements I_Question.Cols
End Property
Public Function ConvertFromDance(Answer() As Integer) As Object Implements I_Question.ConvertFromDance
Debug.Print(Answer.Length)
Dim tBmp As New Bitmap(320, 320)
Dim tG As Graphics = Graphics.FromImage(tBmp)
tG.Clear(Color.White)
Dim I As Integer
For I = 0 To Answer.Length - 1
_Shapes(_Index(Answer(I) - 1)).DrawShape(tG)
Return tBmp
End Function
Public ReadOnly Property ExtraCols As Integer Implements I_Question.ExtraCols
End Property
Public Sub ConvertToDance(Dance As clsDancingLinksImproveNoRecursive) Implements I_Question.ConvertToDance
_Shapes = New List(Of clsTetrisShape)
Dim I As Integer, J As Integer
Dim tShape As clsTetrisShape, tRotateShape As clsTetrisShape
Dim S As Integer
For I = 0 To 6
For J = 0 To 4
S = I * 8 + J
tShape = New clsTetrisShape(1, S, S + 1, S + 2, S + 3, S + 8)
AppendAllShapes(Dance, tShape)
For I = 0 To 6
For J = 0 To 4
S = I * 8 + J
tShape = New clsTetrisShape(1, S, S + 8, S + 9, S + 10, S + 11)
AppendAllShapes(Dance, tShape)
For I = 0 To 5
For J = 0 To 5
S = I * 8 + J
tShape = New clsTetrisShape(2, S, S + 1, S + 9, S + 10, S + 18)
AppendAllShapes(Dance, tShape)
For I = 0 To 5
For J = 0 To 5
S = I * 8 + J
tShape = New clsTetrisShape(3, S, S + 1, S + 9, S + 10, S + 17)
AppendAllShapes(Dance, tShape)
For I = 0 To 5
For J = 1 To 6
S = I * 8 + J
tShape = New clsTetrisShape(3, S, S + 1, S + 7, S + 8, S + 16)
AppendAllShapes(Dance, tShape)
For I = 0 To 5
For J = 0 To 5
S = I * 8 + J
tShape = New clsTetrisShape(4, S, S + 1, S + 2, S + 8, S + 16)
AppendAllShapes(Dance, tShape)
For I = 0 To 6
For J = 0 To 4
S = I * 8 + J
tShape = New clsTetrisShape(5, S, S + 1, S + 2, S + 10, S + 11)
AppendAllShapes(Dance, tShape)
For I = 0 To 6
For J = 1 To 5
S = I * 8 + J
tShape = New clsTetrisShape(5, S, S + 1, S + 2, S + 7, S + 8)
AppendAllShapes(Dance, tShape)
For I = 0 To 5
For J = 0 To 5
S = I * 8 + J
tShape = New clsTetrisShape(6, S, S + 8, S + 9, S + 10, S + 18)
_Shapes.Add(tShape)
tRotateShape = tShape.Rotate90
_Shapes.Add(tRotateShape)
For I = 0 To 5
For J = 2 To 7
S = I * 8 + J
tShape = New clsTetrisShape(6, S, S + 6, S + 7, S + 8, S + 14)
_Shapes.Add(tShape)
tRotateShape = tShape.Rotate90
_Shapes.Add(tRotateShape)
For I = 0 To 5
For J = 0 To 5
S = I * 8 + J
tShape = New clsTetrisShape(7, S, S + 1, S + 2, S + 9, S + 17)
AppendAllShapes(Dance, tShape)
For I = 0 To 6
For J = 0 To 5
S = I * 8 + J
tShape = New clsTetrisShape(8, S, S + 1, S + 2, S + 8, S + 9)
AppendAllShapes(Dance, tShape)
For I = 0 To 6
For J = 0 To 5
S = I * 8 + J
tShape = New clsTetrisShape(8, S, S + 1, S + 2, S + 9, S + 10)
AppendAllShapes(Dance, tShape)
For I = 0 To 6
For J = 0 To 4
S = I * 8 + J
tShape = New clsTetrisShape(9, S, S + 1, S + 2, S + 3, S + 9)
AppendAllShapes(Dance, tShape)
For I = 0 To 6
For J = 0 To 4
S = I * 8 + J
tShape = New clsTetrisShape(9, S, S + 1, S + 2, S + 3, S + 10)
AppendAllShapes(Dance, tShape)
For I = 0 To 6
For J = 0 To 6
S = I * 8 + J
tShape = New clsTetrisShape(10, S, S + 1, S + 8, S + 9)
_Shapes.Add(tShape)
For I = 0 To 5
For J = 1 To 6
S = I * 8 + J
tShape = New clsTetrisShape(11, S, S + 7, S + 8, S + 9, S + 16)
_Shapes.Add(tShape)
For I = 0 To 7
For J = 0 To 3
S = I * 8 + J
tShape = New clsTetrisShape(12, S, S + 1, S + 2, S + 3, S + 4)
_Shapes.Add(tShape)
tRotateShape = tShape.Rotate90
_Shapes.Add(tRotateShape)
For I = 0 To 6
For J = 0 To 5
S = I * 8 + J
tShape = New clsTetrisShape(13, S, S + 1, S + 2, S + 8, S + 10)
AppendAllShapes(Dance, tShape)
ReDim _Index(_Shapes.Count - 1)
For I = 0 To _Shapes.Count - 1
_Index(I) = I
Dim R As New Random, tSwap As Integer
For I = _Shapes.Count - 1 To Int(_Shapes.Count / 3) Step -1
J = R.Next(I)
tSwap = _Index(J)
_Index(J) = _Index(I)
_Index(I) = tSwap
For I = 0 To _Shapes.Count - 1
Dance.AppendLine(_Shapes(_Index(I)).GetLineValue)
Private Sub AppendAllShapes(Dance As clsDancingLinksImproveNoRecursive, tShape As clsTetrisShape)
Dim tRotateShape As clsTetrisShape
_Shapes.Add(tShape)
tRotateShape = tShape.Rotate90
_Shapes.Add(tRotateShape)
tRotateShape = tShape.Rotate180
_Shapes.Add(tRotateShape)
tRotateShape = tShape.Rotate270
_Shapes.Add(tRotateShape)
Public ReadOnly Property IsRandomSolution As Boolean Implements I_Question.IsRandomSolution
Return False
End Property
上面这个类实现了I_Question接口，代码如下：
Public Interface I_Question
ReadOnly Property Cols As Integer
ReadOnly Property ExtraCols As Integer
ReadOnly Property IsRandomSolution As Boolean
Sub ConvertToDance(Dance As clsDancingLinksImproveNoRecursive)
Function ConvertFromDance(Answer() As Integer) As Object
End Interface
几个参数解释一下
Cols：问题矩阵的数据列数
ExtraCols：问题矩阵必须覆盖的列数。大多数的情况下，和Cols相等，也就是所有列完全覆盖
IsRandomSolution：一个开关，指示求解过程中，是按照最少列优先求解（为False的时候）还是随机选择列求解（为True的时候），在列数比较少的情况下，可以为True，否则不建议使用True，为True的时候，如果存在多个解，每次求解有可能得出不同的解。
ConvertToDance：将数据转换为问题矩阵，并输入到指定的Dance类
ConvertFromDance：Dance类计算得出结果后，将结果返回给实现接口的类，让该类对结果进行相应的处理。
类clsTetris还内置了clsTetrisShape类，定义每个形状的编号、位置、并最终将每个形状绘制到指定的图上，如下：
Public Class clsTetrisShape
Private Poi() As Integer
Private ShapeType As Integer
Public Sub New(ShapeType As Integer, ParamArray Poi() As Integer)
Me.ShapeType = ShapeType
Dim I As Integer
ReDim Me.Poi(Poi.Length - 1)
For I = 0 To Poi.Length - 1
Me.Poi(I) = Poi(I)
Public Function GetLineValue() As Integer()
Dim Value(76) As Integer
Dim I As Integer
For I = 0 To 76
Value(I) = 0
For I = 0 To Poi.Length - 1
Value(Poi(I)) = 1
Value(63 + ShapeType) = 1
Return Value
End Function
Public Function Rotate90() As clsTetrisShape
Dim NewPoi(Poi.Length - 1) As Integer
Dim I As Integer, X As Integer, Y As Integer
For I = 0 To Poi.Length - 1
X = Int(Poi(I) / 8)
Y = Poi(I) Mod 8
NewPoi(I) = Y * 8 + 7 - X
Return New clsTetrisShape(ShapeType, NewPoi)
End Function
Public Function Rotate180() As clsTetrisShape
Dim NewPoi(Poi.Length - 1) As Integer
Dim I As Integer
For I = 0 To Poi.Length - 1
NewPoi(I) = 63 - Poi(I)
Return New clsTetrisShape(ShapeType, NewPoi)
End Function
Public Function Rotate270() As clsTetrisShape
Dim NewPoi(Poi.Length - 1) As Integer
Dim I As Integer, X As Integer, Y As Integer
For I = 0 To Poi.Length - 1
X = Int(Poi(I) / 8)
Y = Poi(I) Mod 8
NewPoi(I) = (7 - Y) * 8 + X
Return New clsTetrisShape(ShapeType, NewPoi)
End Function
Public Sub DrawShape(G As Graphics)
Dim tBrush As SolidBrush
Select Case ShapeType
tBrush = New SolidBrush(Color.FromArgb(84, 130, 53))
tBrush = New SolidBrush(Color.FromArgb(112, 48, 160))
tBrush = New SolidBrush(Color.FromArgb(166, 166, 166))
tBrush = New SolidBrush(Color.FromArgb(0, 176, 240))
tBrush = New SolidBrush(Color.FromArgb(0, 32, 96))
tBrush = New SolidBrush(Color.FromArgb(0, 0, 0))
tBrush = New SolidBrush(Color.FromArgb(192, 0, 0))
tBrush = New SolidBrush(Color.FromArgb(255, 217, 102))
tBrush = New SolidBrush(Color.FromArgb(0, 112, 192))
tBrush = New SolidBrush(Color.FromArgb(0, 176, 80))
tBrush = New SolidBrush(Color.FromArgb(255, 255, 0))
tBrush = New SolidBrush(Color.FromArgb(198, 89, 17))
tBrush = New SolidBrush(Color.FromArgb(146, 208, 80))
tBrush = New SolidBrush(Color.FromArgb(146, 208, 80))
End Select
Dim I As Integer, X As Integer, Y As Integer
For I = 0 To Poi.Length - 1
X = Int(Poi(I) / 8)
Y = Poi(I) Mod 8
G.FillRectangle(tBrush, New Rectangle(Y * 40, X * 40, 40, 40))
然后是贴出求解类
Public Class clsDancingCentre
Public Shared Function Dancing(Question As I_Question) As Object
Dim _Dance As New clsDancingLinksImproveNoRecursive(Question.Cols, Question.ExtraCols)
Question.ConvertToDance(_Dance)
Return Question.ConvertFromDance(_Dance.Dance(Question.IsRandomSolution))
End Function
该类只有一个核心方法，定义一个舞蹈链算法（Dancing Links）类，并对该类和I_Question接口搭桥求解问题
在clsTetris类中，原本如果设置IsRandomSolution为True的话，那么求解过程非常缓慢（曾经1小时没有求出一个解出来），但如果设置为False的时候，每次求解是秒破，但是每次求解都是同一个结果。后来想到，交换问题矩阵的行，会影响求解的顺序，但不影响求解的结果。如果求解的结果是唯一的，那么矩阵的行交不交换都一样，但是如果求解的问题不是唯一的，那么改变问题矩阵的行，那么每次求解出来的解就有可能不同。故在clsTetris中，在最后把数据添加到Dance类的时候，是改变了添加顺序的，这样每次求解都是秒破，并且得出的结果也不一样。求解100个解，不到30秒。
最后贴出Dancing类，这才是舞蹈链算法（Dancing Links）的核心
Public Class clsDancingLinksImproveNoRecursive
Private Left() As Integer, Right() As Integer, Up() As Integer, Down() As Integer
Private Row() As Integer, Col() As Integer
Private _Head As Integer
Private _Rows As Integer, _Cols As Integer, _NodeCount As Integer
Private Count() As Integer
Private Ans() As Integer
Public Sub New(ByVal Cols As Integer)
Me.New(Cols, Cols)
Public Sub New(ByVal Cols As Integer, ExactCols As Integer)
ReDim Left(Cols), Right(Cols), Up(Cols), Down(Cols), Row(Cols), Col(Cols), Ans(Cols)
ReDim Count(Cols)
Dim I As Integer
Down(0) = 0
Right(0) = 1
Left(0) = Cols
For I = 1 To Cols
Down(I) = I
Left(I) = I - 1
Right(I) = I + 1
Col(I) = I
Row(I) = 0
Count(I) = 0
Right(Cols) = 0
_Cols = Cols
_NodeCount = Cols
Dim N As Integer = Right(ExactCols)
Right(ExactCols) = _Head
Left(_Head) = ExactCols
Left(N) = _Cols
Right(_Cols) = N
Public Sub AppendLine(ByVal ParamArray Value() As Integer)
Dim V As New List(Of Integer)
Dim I As Integer
For I = 0 To Value.Length - 1
If Value(I) && 0 Then V.Add(I + 1)
AppendLineByIndex(V.ToArray)
Public Sub AppendLine(Line As String)
Dim V As New List(Of Integer)
Dim I As Integer
For I = 0 To Line.Length - 1
If Line.Substring(I, 1) && "0" Then V.Add(I + 1)
AppendLineByIndex(V.ToArray)
Public Sub AppendLineByIndex(ByVal ParamArray Index() As Integer)
If Index.Length = 0 Then Exit Sub
_Rows += 1
Dim I As Integer, K As Integer = 0
ReDim Preserve Left(_NodeCount + Index.Length)
ReDim Preserve Right(_NodeCount + Index.Length)
ReDim Preserve Up(_NodeCount + Index.Length)
ReDim Preserve Down(_NodeCount + Index.Length)
ReDim Preserve Row(_NodeCount + Index.Length)
ReDim Preserve Col(_NodeCount + Index.Length)
ReDim Preserve Ans(_Rows)
For I = 0 To Index.Length - 1
_NodeCount += 1
If I = 0 Then
Left(_NodeCount) = _NodeCount
Right(_NodeCount) = _NodeCount
Left(_NodeCount) = _NodeCount - 1
Right(_NodeCount) = Right(_NodeCount - 1)
Left(Right(_NodeCount - 1)) = _NodeCount
Right(_NodeCount - 1) = _NodeCount
Down(_NodeCount) = Index(I)
Up(_NodeCount) = Up(Index(I))
Down(Up(Index(I))) = _NodeCount
Up(Index(I)) = _NodeCount
Row(_NodeCount) = _Rows
Col(_NodeCount) = Index(I)
Count(Index(I)) += 1
Public Function Dance(Optional Random As Boolean = False) As Integer()
Dim P As Integer, C1 As Integer
Dim I As Integer, J As Integer
Dim K As Integer = 0
Dim R As New Random
If (Right(_Head) = _Head) Then
ReDim Preserve Ans(K - 1)
For I = 0 To Ans.Length - 1
Ans(I) = Row(Ans(I))
Return Ans
P = Right(_Head)
If Random = False Then
Do While P && _Head
If Count(P) & Count(C1) Then C1 = P
P = Right(P)
I = R.Next(_Cols)
For J = 1 To I
P = Right(P)
If P = _Head Then P = Right(_Head)
RemoveCol(C1)
I = Down(C1)
Do While I = C1
ResumeCol(C1)
If K & 0 Then Return Nothing
C1 = Col(Ans(K))
I = Ans(K)
J = Left(I)
Do While J && I
ResumeCol(Col(J))
J = Left(J)
I = Down(I)
Ans(K) = I
J = Right(I)
Do While J && I
RemoveCol(Col(J))
J = Right(J)
End Function
Private Sub RemoveCol(ByVal ColIndex As Integer)
Left(Right(ColIndex)) = Left(ColIndex)
Right(Left(ColIndex)) = Right(ColIndex)
Dim I As Integer, J As Integer
I = Down(ColIndex)
Do While I && ColIndex
J = Right(I)
Do While J && I
Up(Down(J)) = Up(J)
Down(Up(J)) = Down(J)
Count(Col(J)) -= 1
J = Right(J)
I = Down(I)
Private Sub ResumeCol(ByVal ColIndex As Integer)
Left(Right(ColIndex)) = ColIndex
Right(Left(ColIndex)) = ColIndex
Dim I As Integer, J As Integer
I = Up(ColIndex)
Do While (I && ColIndex)
J = Right(I)
Do While J && I
Up(Down(J)) = J
Down(Up(J)) = J
Count(Col(J)) += 1
J = Right(J)
求解了1000个解，发现很有趣的一个现象，就是长条（1*5的那个），几乎都在边上，在当中的解少之又少
下面贴几个解
问题的提出：如下图，用13块俄罗斯方块覆盖8*8的正方形。如何用计算机求解？
解决这类问题的方法不一而足，然而核心思想都是穷举法，不同的方法仅仅是对穷举法进行了优化
发表了一篇文章
int iRed = GetRValue(m_cColor);
int iGreen = GetGValue(m_cColor);
int iBlue = GetBValue…
发表了一篇文章
老土的方式：
szColor.Replace(&#&, &&);
int iArrColor[6] = {0};
TCHAR hexSeed…
发表了一篇文章
CString szGUID;
::CoCreateGuid(&guid))
szGUID.Format( &{%0…
发表了一篇文章
OnButtonDelete()
POSITION pos = m_list.GetFirstSelectedItemPosition();
int idx = m_l…
发表了一篇文章
example1.xml:
version="1.0"
example2.xml:
version="1.0"
GreatWorld
Alas(again)
example3.xml:
version="1.0"
name="int-based"x="20"y="30"r="50"
name="float-based"x="3.5"y="52.1"
example4.xml:
version="1.0"
WelcometoMyApp
ThankyouforusingMyApp
name="MainFrame"x="5"y="15"w="400"h="250"
ip="192.168.0.1"timeout="123.456000"
上面的例子摘自《TinyXML Tutorial 中文指南》。上面有四个例子，你看到了xml文件的几种表现形式？我看到了本质来说不过是两种表现形式：属性值值在尖括号内，如&Window name="MainFrame" x="5" y="15" w="400" h="250" /&和文本在尖括号外，如&Welcome&Welcome to MyApp&/Welcome&，具体如下图：
鉴于example4.xml比较复杂，下面我将以此为例介绍tinyxml的使用。
Tinyxml使用了两种编译选择：使用标准C的char *类型或者使用STL中的std::string,其中使用预处理器TIXML_USE_STL进行控制，即添加了TIXML_USE_STL为使用std::string的。鉴于STL的广泛使用以及其强大功能，下面我以使用std::string的tinyxml说明。
首先使用VS 2005打开tinyxmlSTL.dsp的工程文件，将其编译成一个静态库，debug版本为：tinyxmld_STL.lib，然后开始测试tinyxml库。我的测试计划是这样的：首先使用tinyxml库创建example4.xml，然后将其读出来，然后查询指定节点的属性或文本，再修改example4.xml（修改其中的一些节点值和删除其中一个节点，增加一个节点），然后再读出来以判断是否修改成功。具体是在VS 2005上新建一个控制台工程：Test，注意使用多字节字符集进行编译，同时添加。首先是创建xml文件的代码：
boolCreateXml(std::stringXmlFile)
TiXmlDocument*pDoc=newTiXmlD
if(NULL==pDoc)
returnfalse;
TiXmlDeclaration*pDeclaration=newTiXmlDeclaration(_T("1.0"),_T(""),_T(""));
if(NULL==pDeclaration)
returnfalse;
pDoc-&LinkEndChild(pDeclaration);
TiXmlElement*pRootEle=newTiXmlElement(_T("MyApp"));
if(NULL==pRootEle)
returnfalse;
pDoc-&LinkEndChild(pRootEle);
TiXmlElement*pMsg=newTiXmlElement(_T("Messages"));
if(NULL==pMsg)
returnfalse;
pRootEle-&LinkEndChild(pMsg);
TiXmlElement*pWelcome=newTiXmlElement(_T("Welcome"));
if(NULL==pWelcome)
returnfalse;
pMsg-&LinkEndChild(pWelcome);
std::stringstrValue=_T("WelcometoMyApp");
TiXmlText*pWelcomeValue=newTiXmlText(strValue);
pWelcome-&LinkEndChild(pWelcomeValue);
TiXmlElement*pFarewell=newTiXmlElement(_T("Farewell"));
if(NULL==pFarewell)
returnfalse;
pMsg-&LinkEndChild(pFarewell);
strValue=_T("ThankyouforusingMyApp");
TiXmlText*pFarewellValue=newTiXmlText(strValue);
pFarewell-&LinkEndChild(pFarewellValue);
TiXmlElement*pWindows=newTiXmlElement(_T("Windows"));
if(NULL==pWindows)
returnfalse;
pRootEle-&LinkEndChild(pWindows);
TiXmlElement*pWindow=newTiXmlElement(_T("Window"));
if(NULL==pWindow)
returnfalse;
pWindows-&LinkEndChild(pWindow);
pWindow-&SetAttribute(_T("name"),_T("MainFrame"));
pWindow-&SetAttribute(_T("x"),_T("5"));
pWindow-&SetAttribute(_T("y"),_T("15"));
pWindow-&SetAttribute(_T("w"),_T("400"));
pWindow-&SetAttribute(_T("h"),_T("250"));
TiXmlElement*pConnection=newTiXmlElement(_T("Connection"));
if(NULL==pConnection)
returnfalse;
pRootEle-&LinkEndChild(pConnection);
pConnection-&SetAttribute(_T("ip"),_T("192.168.0.1"));
pConnection-&SetAttribute(_T("timeout"),_T("123.456000"));
pDoc-&SaveFile(XmlFile);
returntrue;
不知你注意到上面的规律没有？首先父节点连接字节点使用函数LinkEndChild，使用方法是：pParentNode-& LinkEndChild(pChild);其次设置类似这种结构&Window name="MainFrame" x="5" y="15" w="400" h="250" /&采用SetAttribute函数，这个函数有两个参数，前一个参数表示键，后一个参数表示键值，设置&Farewell&Thank you for
using MyApp&/Farewell&这种结构采用TiXmlText类，使用LinkEndChild函数进行连结。
上面是创建xml文件的代码，下面介绍读取xml文件的代码。打印整个xml文件的代码很简单，代码如下：
boolPaintXml(std::stringXmlFile)
TiXmlDocument*pDoc=newTiXmlDocument();
if(NULL==pDoc)
returnfalse;
pDoc-&LoadFile(XmlFile);
pDoc-&Print();
returntrue;
下次介绍使用tinyxml库对xml文件进行查询指定节点、删除指定节点、修改指定节点和增加节点的用法。
参考文献：
作者：朱金灿
来源：http://blog.csdn.net/clever101
对于xml文件，目前我的工作只是集中在配置文件和作为简单的信息文件来用，因此我不太喜欢使用ms…
发表了一篇文章
VC 常用插件
1.Visual Assist（强烈推荐）[url]http://www.wholetomato.com/[/url]
VA从5.0一直到现在的VAX，功能越来…
514197人浏览
383360人浏览
351051人浏览
341547人浏览
324808人浏览}