BlogJava-ghostwu-文章分类-ajaxhttp://www.blogjava.net/ghostwu/category/19592.htmlzh-cnWed, 23 May 2007 22:36:29 GMTWed, 23 May 2007 22:36:29 GMT60yui --------autocomplete学习二http://www.blogjava.net/ghostwu/articles/119533.htmlyoyoyoyoWed, 23 May 2007 18:20:00 GMThttp://www.blogjava.net/ghostwu/articles/119533.htmlhttp://www.blogjava.net/ghostwu/comments/119533.htmlhttp://www.blogjava.net/ghostwu/articles/119533.html#Feedback0http://www.blogjava.net/ghostwu/comments/commentRss/119533.htmlhttp://www.blogjava.net/ghostwu/services/trackbacks/119533.html
1oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_flat.php", ["\n", "\t"]);   
2 oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_FLAT;   
3 oACDS.maxCacheEntries = 60;   
4 oACDS.queryMatchSubset = true;   
5



"./php/ysearch_flat.php" 这里是要调用的服务端请求.第二个参数就是要分隔的行数
(
   需要说明的是输入框要用这种格式
            <div id="ysearchautocomplete0">
                <input id="ysearchinput0">
                <div id="ysearchcontainer0"></div>
            </div>
其中ysearchcontainer0就是用来放下拉选择的数据
而发送的请求,yui都会自做主张的加上一个?query='+ysearchinput的值
)

看看和上一篇的oACDS定义来说.这是一种new YAHOO.widget.DS_XHR
因为这是需要远程调用所以需要用到connection.js这个js文件，所以一定要把它加进来
粗略看过YAHOO.widget.DS_XHR这个类，它还是需要处理服务器返回来的数据，所以要定义responseType的属性值。。其它两个属性设置可有可无

接着就写下以下两行代码
oAutoComp2 = new YAHOO.widget.AutoComplete('ysearchinput2','ysearchcontainer2', oACDS);   
50 oAutoComp2.delimChar = ";";   
51 oAutoComp2.queryDelay = 0;   
52 oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";  
queryDelya属性就是每隔几秒发送一次请求..因为需要向服务器发生请求，可能过大的消耗服务器资源.

需要说明的因为ajax都是以utf-8的方式进行处理数据的。所以返回的数据如果utf-8编码的话当然就没有问题啦。。但如果是其它的编码的话. 
就要在html响应中加上编码格式charset="gb2312",php写法是
header("charset=gb2312")



yoyo 2007-05-24 02:20 发表评论
]]>yui 学习笔记http://www.blogjava.net/ghostwu/articles/96816.htmlyoyoyoyoTue, 30 Jan 2007 16:01:00 GMThttp://www.blogjava.net/ghostwu/articles/96816.htmlhttp://www.blogjava.net/ghostwu/comments/96816.htmlhttp://www.blogjava.net/ghostwu/articles/96816.html#Feedback0http://www.blogjava.net/ghostwu/comments/commentRss/96816.htmlhttp://www.blogjava.net/ghostwu/services/trackbacks/96816.html。所以啊，十分难看啊

YAHOO.namespace('images')
YAHOO.images.init = function() {
 //初始化操作, YAHOO.widget.Slider.getHorizSlider返回的就是一个拖动条,25，为每次拖动移动的长度
  slider = YAHOO.widget.Slider.getHorizSlider("horizBGDiv", "horizHandleDiv", 100, 100,25);
 //设置拖动的动作
     slider.onChange = YAHOO.images.slideronchange;
  YAHOO.images.setChangeTime(slider);
 
}
YAHOO.images.slideronchange = function(offser) {
   var img = YAHOO.images.getSrc();
   var imageslider =  YAHOO.util.Dom.getElementsBy(YAHOO.images.getElementByImg,'img','horizValueDiv')[0]
       imageslider.src =    'img/'+ img[offser/25];
   
}

YAHOO.images.getElementByImg = function(e) {
  if(e.tagName ==  'IMG')
   return true;
}
 /**获取图片数据
  *@ retunr Array 返回数组
   */
YAHOO.images.getSrc = function() {
   var img = ['sq1.png','sq2.png','sq3.png'];
   return img;
}
YAHOO.images.setChangeTime = function(slider) {
 YAHOO.util.Event.POLL_INTERVAL = 200;
 alert(slider.getValue());
 /**
 YAHOO.util.Event.startInterval( 
   function() {
    slider.setValue(slider.getValue()+25);
   }
 
 )
 **/
}

YAHOO.util.Event.addListener(window, "load", YAHOO.images.init);

<body>主体

<body>
<div id="horizWrapper">
        <div id="horizValueDiv">
   <img  src="img/sq2.png" />
            </div>
   
        <div
             id="horizBGDiv"
             name="horizBGDiv"
          >
             <div id="horizHandleDiv" ><img  src="img/horizSlider.png"></div> 
          </div> 
          
          </div>
</body>  
这个东西还不能拿出去见人，好多东西没有改正好，明天再改正嘛

yoyo 2007-01-31 00:01 发表评论
]]>yui 学习笔记http://www.blogjava.net/ghostwu/articles/96631.htmlyoyoyoyoMon, 29 Jan 2007 15:58:00 GMThttp://www.blogjava.net/ghostwu/articles/96631.htmlhttp://www.blogjava.net/ghostwu/comments/96631.htmlhttp://www.blogjava.net/ghostwu/articles/96631.html#Feedback0http://www.blogjava.net/ghostwu/comments/commentRss/96631.htmlhttp://www.blogjava.net/ghostwu/services/trackbacks/96631.html

yui最基本的包括三个js文件
yahoo.js
event.js
dom.js


yahoo.namespace(string)
单从名字上来看，有点像java的package,可以接受一个以','为分界符的字符串。实际是只不过是创建了一个对象中的属性，以避免空间名称污染
yahoo.namespace('package')

alert(package)
最后打印出来是一个object
但package还只是一个空对象，没有任何方法，还需要自己添加

dom.js，看名字就可以知道这是封装dom操作

最常用的可能是getStyle,setStyle，getElementsBy，inDocument

但其中有一个内部方法batch，上述这些方法最终都是调用batch，是batch原型为
 function(el, method, o, override)
el为元素名字，接受字符串，html对象作为参数
文档上说是Returns an array of elements that have had the supplied method applied.
可以对一个或多个html元素用method方法进行操作


今天写到这里了，其实yui只是提供一个通用的库，怎么用ajax写出好的程序，这是一个类库不能够告诉我们的，关键是我们自己在平时多写，多实践。就好像设计模式一样，你就算懂得所有的设计模式，也不一定能好的程序来，类库只是一种方法，好程序要靠我们的头脑。下次，我会用yui写一个实例出来








yoyo 2007-01-29 23:58 发表评论
]]>