分类目录归档：应用

JavaScrip页面搜索

发表评论
       昨天，做了个页面搜索的功能，觉得在实际开发中应该比较有用，将代码贴出来供大家参考。将下面的代码拷到文本编辑器中，保存为html，用浏览器打开就可看到实际效果。在Opera, firefox, IE6下测试没问题。
    这个功能的处理过程是：在一个div divCont中放入要显示的选项，给要检索的Label中加入了 forSearch="true"属性（这是个自定义属性），代码根据这个属性取得我们要检索的所有的Label（待检索内容为Label中的文本，我们通过innerHTML取得.），然后用我们要查询的字符串与取得的label内的文本进行比对，当找到含有我们要查询的字符串时，将这个Label背景设为绿色，同时记录第一个找到的 label，检索完毕后，将div divCont的滚动条移到第一条检索结果出。
    如何将这个功能推广到checkbox以外其它上面去呢？ 根据上面讲解，我们知道，检索依赖的主要是Label的forSearch="true"
属性和这个Label的innerHTML，所以，我们可以对我们要检索的标签加上forSearch="true"属性，将要检索的内容置于该标签内即可。也就是说，这个检索事实是与标签没有关系的。
    在实际项目中应用时，需要将下面要素添加到页面：
        1.header部分的javascript,添加到你的页面的header部分；
        2.name="words11"的文本框，onclick="searchInfor()的button;
        3.待检索内容的容器<div id="divCont" style="border:1pt #BBCCC0 solid;height:232px;width:40%; overflow: auto; position:absolute"></div>, 这个可选，（但推荐加上，可以看起来比较美观点。）主要是为了实现滚动条效果，如果不加，就会取得整个body下面的指定标签；
        4.getCheckBoxText()函数，这个函数可以传入参数，指定要进行检索的标签类型，默认为label,当传入*时，它将认为整个页面(这一块有点不合理，应该是指定的div下面的所有标签才合适，但目前还没有找到比较好的可以快速获取div下面所有子节点的方法，不止第一层的，如果找到了，可以修改getElementsByAttribute的第一行代码来实现.)的所有加forSearch="true"的标签都要检索。
       5.给你要检索的标签中添加forSearch="true"属性；
       6.将最末尾的javascript代码添加到你的页面的最末尾，千万不要放到header部分，负责divCont会取不到。
       7.美化页面:)
   这样，你的页面就可以具有一个页面搜索功能了.在使用过程中，如果有什么新发现，欢迎分享。
 

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
    <title>
      JavaScript Search
    </title>
    <script language="JavaScript" type="text/javascript">
//<![CDATA[
    /**
    * get elements by attribute
    */
    function getElementsByAttribute(oElm, strTagName, strAttributeName, strAttributeValue){
    var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    var oAttributeValue = (typeof strAttributeValue != "undefined")? new RegExp("(^|s)" + strAttributeValue + "(s|$)") : null;
    var oCurrent;
    var oAttribute;
    for(var i=0; i<arrElements.length; i++){
        oCurrent = arrElements[i];
        oAttribute = oCurrent.getAttribute(strAttributeName);
        if(typeof oAttribute == "string" && oAttribute.length > 0){
            if(typeof strAttributeValue == "undefined" || (oAttributeValue && oAttributeValue.test(oAttribute))){
                arrReturnElements.push(oCurrent);
            }
        }
    }
    return arrReturnElements;
    }
    /**
    * Global variables
    */
    var refA ; /* the referance of container div. */
    var scTop; /* the */
    var hits = new Array(); /* hits' array */
    /**
    * clean input box while there is no query words inputed.
    */
    function cleanInput(ref){
      var sflag = generalForm.sflag.value;
      if(sflag == '-1'){
         ref.value = "";
      }
    }
    /**
    * reset Label' backcolor to default: white.
    */
    function resetLableBackcolor(){
       if(hits){
         if(hits.length){
          var len = hits.length;
          for(var j = 0; j < len; j++){
             hits[j].style.backgroundColor = "";
          }
         }
       }
    }
    /*
    * initialize input box
    */
    function initInput(ref){
      if(ref.value != '' && ref.value != "输入选项名查询"){
        generalForm.sflag.value = "1";
      } else {
        generalForm.sflag.value = "-1";
      }
      
      if(ref.value == ''){
         ref.value = "输入选项名查询";
         resetLableBackcolor();
         refA.scrollTop = scTop;
      }
      searchInfor();
    }
    /**
    * get all tests to search by attribute forSearch.
    * @param String tag type
    */
    function getCheckBoxText(){
     var olE = refA;    
     /* get all tests to search by attribute forSearch. */
     var tag = "label";
     if(arguments.length == 1){    
     tag = arguments[0];
        
     }
     var texts = getElementsByAttribute(olE, tag, "forSearch", "true");
     return texts;
    }
    /**
    * execute query , set backgroundcolor of hits to green, move scrollbar to the first hit.
    */
    function searchInfor(){
     var words = generalForm.words11.value;
     /* get all tests to search by attribute forSearch. */
     var texts = getCheckBoxText();
     var firstChk;
     var cnt = 0;
     resetLableBackcolor();
     if(texts){
        if(texts.length){
           var len = texts.length;
           var flag = -1;
           var ref ;
           var textShow = "";
           for(var i = 0; i < len; i++){
               ref = texts[i];
               textShow = ref.innerHTML;
               flag = textShow.indexOf(words);
               if(flag > -1){
             /* set hits' backgroundColor to green. */
                  ref.style.backgroundColor = "#99FF66";
                  cnt = cnt + 1;
                  hits.push(ref);
                  if(cnt == 1){
                     firstChk = i; /* recode the first hit.*/
                  }
               }
           }
        }
     }
     refA.scrollTop = scTop + firstChk*20; /* set scrolltop to show the first hit.*/
    }
    //]]>
    </script>
  </head>
  <body leftmargin="30pt" rightmargin="0" topmargin="0" bottommargin="0">
    <form name="generalForm" id="generalForm">
      <input type="hidden" name="sflag" value="-1" />
      <div width="40%" style="vertical-align:top;overflow:hidden;" >
        <table width="40%" border="0" cellpadding="3" cellspacing="0" class="tableList" bordercolor="#CCCCCC" style="border-collapse:collapse">
          <tr>
            <td width="70%">
       & nbsp;      选项:< br>             </td>
            <td align="right" width="20%">
              <input name="words11" type="text" class="lightfont" value="输入选项名查询" onclick="cleanInput(this);" onblur="initInput(this);" />
            </td>
            <td width="10%">
              <input type="button" value="搜索" onclick="searchInfor();" />
            </td>
          </tr>
        </table>
      </div>
      <div id="divCont" style="border:1pt #BBCCC0 solid;height:232px;width:40%; overflow: auto; position:absolute">
        <table width="97%" border="0" align="left" cellpadding="0" cellspacing="0" bordercolor="white" bgcolor="white">
          <tr width="97%" rowspan="8" bgcolor="white">
            <td>
              <nobr><input name="chk" type="checkbox" id="chk2" value="2" /> <label forsearch="true" for="chk2">选项1</label></nobr>< br>             </td>
          </tr>
          <tr width="97%" rowspan="8" bgcolor="white">
            <td>
              <nobr><input name="chk" type="checkbox" id="chk3" value="3" /> <label forsearch="true" for="chk3">选项2Text1</label></nobr>
            </td>
          </tr>
          <tr width="97%" rowspan="8" bgcolor="white">
            <td>
              <nobr><input name="chk" type="checkbox" id="chk4" value="4" /> <label forsearch="true" for="chk4">选项3Text</label></nobr>< br>             </td>
          </tr>
          <tr width="97%" rowspan="8" bgcolor="white">
            <td>
              <nobr><input name="chk" type="checkbox" id="chk5" value="5" /> <label forsearch="true" for="chk5">Lable 4Text4</label></nobr>
            </td>
          </tr>
          <tr width="97%" rowspan="8" bgcolor="white">
            <td>
              <nobr><input name="chk" type="checkbox" id="chk6" value="6" /> <label forsearch="true" for="chk6">选项 5Text6</label></nobr>
            </td>
          </tr>
          <tr width="97%" rowspan="8" bgcolor="white">
            <td>
              <nobr><input name="chk" type="checkbox" id="chk7" value="7" /> <label forsearch="true" for="chk7">选项 7Text中国</label></nobr>
            </td>
          </tr>
          <tr width="97%" rowspan="8" bgcolor="white">
            <td>
              <nobr><input name="chk" type="checkbox" id="chk8" value="8" /> <label forsearch="true" for="chk8">选项8 Text1</label></nobr>
            </td>
          </tr>
          <tr width="97%" rowspan="8" bgcolor="white">
            <td>
              <nobr><input name="chk" type="checkbox" id="chk9" value="9" /> <label forsearch="true" for="chk9">选项9 Text1</label></nobr>
            </td>
          </tr>
          <tr width="97%" rowspan="8" bgcolor="white">
            <td>
              <nobr><input name="chk" type="checkbox" id="chk10" value="10" /> <label forsearch="true" for="chk10">选项10 Text1</label></nobr>
            </td>
          </tr>
          <tr width="97%" rowspan="8" bgcolor="white">
            <td>
              <nobr><input name="chk" type="checkbox" id="chk11" value="11" /> <label forsearch="true" for="chk11">选项11 Text1</label></nobr>
            </td>
          </tr>
          <tr width="97%" rowspan="8" bgcolor="white">
            <td>
              <nobr><input name="chk" type="checkbox" id="chk12" value="12" /> <label forsearch="true" for="chk12">选项12 Text1</label></nobr>
            </td>
          </tr>
          <tr width="97%" rowspan="8" bgcolor="white">
            <td>
              <nobr><input name="chk" type="checkbox" id="chk13" value="13" /> <label forsearch="true" for="chk13">选项13 Text7771</label></nobr>
            </td>
          </tr>
          <tr width="97%" rowspan="8" bgcolor="white">
            <td>
              <nobr><input name="chk" type="checkbox" id="chk14" value="14" /> <label forsearch="true" for="chk14">选项14Text1</label></nobr>
            </td>
          </tr>
          <tr width="97%" rowspan="8" bgcolor="white">
            <td>
              <nobr><input name="chk" type="checkbox" id="chk15" value="15" /> <label forsearch="true" for="chk15">选项15Text1</label></nobr>
            </td>
          </tr>
          <tr width="97%" rowspan="8" bgcolor="white">
            <td>
              <nobr><input name="chk" type="checkbox" id="chk16" value="16" /> <label forsearch="true" for="chk16">选项16Text1</label></nobr>
            </td>
          </tr>
          <tr width="97%" rowspan="8" bgcolor="white">
            <td>
              <nobr><input name="chk" type="checkbox" id="chk17" value="17" /> <label forsearch="true" for="chk17">选项17 Text1</label></nobr>
            </td>
          </tr>
          <tr width="97%" rowspan="8" bgcolor="white">
            <td>
              <nobr><input name="chk" type="checkbox" id="chk18" value="18" /> <label forsearch="true" for="chk18">Lable18 Text1</label></nobr>
            </td>
          </tr>
          <tr width="97%" rowspan="8" bgcolor="white">
            <td>
              <nobr><input name="chk" type="checkbox" id="chk19" value="19" /> <label forsearch="true" for="chk19">Lable19 Text1</label></nobr>
            </td>
          </tr>
        </table>
      </div><script language="JavaScript" type="text/javascript">
//<![CDATA[
      /* get referance of divContainer by id divCont */
      refA = document.getElementById('divCont');
      if(refA){
        /* store refA's scrollTop */    
        scTop = refA.scrollTop;
      } else {
     refA = document.body;
        scTop = refA.scrollTop;
     }
      //]]>
      </script>
    </form>
  </body>
</html>

 

作者：豆博草堂

MySQL中文问题

发表评论

      今天花了一个晚上终于解决了MySQL中中文插入显示问题，当然少不了Google的帮忙:)把解决方法写出来以供参考。

      现象: 用JDBC将中文字段插入MySQL数据库中，然后打开表发现，那些字段都是"??".用java做出select方法进行select后也是"??".

     原因:

             1.创建数据库时没有指定默认的编码方式，导致数据库使用了MySql的默认字符集latin1。

           2.Client端字符集为latin1. 3.进行jdbc链接时使用了不匹配的字符集。

解决办法：

           1.创建数据库时将数据库的缺省字符集指定为utf8。sql: create database dbname DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;

           2.修改Client默认字符集为utf8。windows下在mysql安装目录下找到my.ini(linux下，mysql的配置一般是/etc/my.conf，其中的datadir指明了数据存储目录。),将里面的default-character-set=latin1 改为default-character-set=UTF8，然后重起mysql服务即可将数据库默认字符集改为utf8.此时应该在mysql命令行用s命令检查一下看是否改好了。

          3.修改jdbc的链接，将原来的 jdbc:mysql://localhost:3306/YourDb 改为 jdbc:mysql://localhost:3306/YourDb?useUnicode=true& characterEncoding=UTF-8 做完以上工作后，插入到mysql的中文应该不会再是乱码了.

作者：豆博草堂

Windows下软件在Linux下的对应软件

发表评论

我是个Linux初学者，由于在Windows上养成的习惯，在学习Linux时非常不习惯，特别是刚开始，在windows下使用的许多软件不知道在Linux用什么替代时，心里感觉非常不舒服，与其他人的网上交流也成了问题。现在，我把我知道的一些常用的在Linux下对应Windows的软件写出来，希望给大家些帮助.

Windows Linux 备注
Office OpenOffice openoffice默认都会安装到Linux，而且还可以打开微软office的文档格式。
腾讯QQ LumaQQ Java开发的，具有QQ的基本功，但在登录后下载好友属性时常死掉，不知为什么。
Notepad KWriter, VI等 Linux安装后就有几个文本编辑器。功能都比 较强大。
播放器 MPlayer+
MPlayer-GUI		 这个功能比较强大，但需要装解码器, 可装all-20060611.tar.bz2解码器下载下来解压后可以 放在/usr/lib/win32 下面，这样就可以播放windows下大多数格式了. 
Matlab
 
SCILab
 语法和功能与Matlab相似的开源数学软件，很好用。 
RealPlayer
 
RealPlayer
 装完后也需要装插件，否则会不好用。可以google下看怎么装插件。:)
PDF阅读器 XPDF Linux下默认安装的.
CHM阅读器 GnoCHM 很不错的工具，这样在Linux下阅读CHM也就没问题了。
Photoshop GIMP 没用过，听说不错。
输入法 SCIM 很好的输入法，但是，如果你的系统默认语言是非中文的话，想输入中文就有点麻烦了，需要配置，我自己还没有配出来,也不知为什么.

另外还有编程类软件就更不用说了，Linux天生就是酷爱技术的人员搞出来的，做开发的工具当然应有尽有了:).要补充的是，
现在很多Linux发行版都有yum命令，需要装什么软件的话可以在终端下用 yum install <要装的软件的名字>来安装，
能不能找到你的软件很大程度上取决于你的软件仓库配置（可以上网找仓库的rpm包，用rpm来添加。）。另外，也
可以下载软件的rpm包来安装，可以在网上找到很多。在安装rpm过程中如果发现lib依赖问题，也可以用
yum install

总的说来，windows下有的软件Linux下也有，但Linux下有的，windows未必有，因为Linux走的是开放
路线，特别是在技术领域，Linux和Unix可以说真的值得投资.

学Linux开始很难，主要是不习惯，等过了一个坎就好了，学Linux没错的！:0)

作者：豆博草堂