02 28 2010

0

MooTools Events Calendar 带事件的日历控件

分类: mootools 标签: mootools 阅读: 29

MooTools Events Calendar MooTools Events Calendar

需要支持:
  • MooTools 1.2.3 Core
  • MooTools 1.2.3.1 More
    • Tips
    • Scroller
    • Date

这是很好的一款事件日历插件，可以作为日程使用，正在做它的应用。

只需要声明:          

  new Calendar({calContainer:'calBody'});     

 

阅读文章全部内容…

03 24 2009

0

mootools的inline编辑

分类: mootools 标签: mootools inline 编辑 阅读: 234

大家可能都见过这种效果，一点击网页中的特定文字，同时就进入编辑状态当编辑完成后。又把编辑后的文字保存到数据库中了。

我使用mootools来实现本次效果。

首先定义javasctipt函数

JavaScript代码
  1. function inlineEdit(el,u,id){  
  2.     var editing;  
  3.     el.addEvent('dblclick',function(){  
  4.         if(editing) return;  
  5.         editing = true;  
  6.         var before = el.get('html').trim();  
  7.         el.set('html','');  
  8.         var input = new Element('input', { 'value':before });  
  9.         input.setStyle('width','95%');  
  10.         input.addEvent('keydown', function(e) { if(e.key == 'enter') { this.fireEvent('blur'); } });  
  11.         input.inject(el).select();  
  12.         input.addEvent('blur', function() {  
  13.             val = input.get('value').trim();  
  14.             var name = el.get('rel');  
  15.             if(before != val){  
  16.                 new Request({  
  17.                     url:u,  
  18.                     onSuccess: function(){el.set('text',val);},  
  19.                     onFailure: function(){el.set('text',before);}  
  20.                 }).send("id="+id+"&"+name+"="+val+"&colname="+name);  
  21.             }else{el.set('text',val);}  
  22.             editing = false;  
  23.         });  
  24.     });   
  25. }  
  26. window.addEvent('domready', function(){    
  27.     $$('.editable').each(function(el){    
  28.         inlineEdit(el,APP+'/User/update',$('uid').get('value'));    
  29.     });    
  30. });   

然后是html

XML/HTML代码
  1. <tr>  
  2.     <td class="cellLabel" align="right" width="20%" >用户名:td>  
  3.     <td class="cellInfo" align="left" width="30%" >{$vo.account}td>  
  4.     <td class="cellLabel" align="right" width="20%" >昵称:td>  
  5.     <td class="cellInfo editable" align="left" width="30%" rel="nickname" >{$vo.nickname}td>  
  6. tr>  
  7. <tr>  
  8.     <td class="cellLabel" align="right" >状态:td>  
  9.     <td class="cellInfo"><select class="small bLeft"  name="status">  
  10.     <option <eq name="vo.status" value="1" >selectedeq> value="1">启用option>  
  11.     <option <eq name="vo.status" value="0" >selectedeq> value="0">禁用option>  
  12.     select>td>  
  13.     <td class="cellLabel" align="right" >备注:td>  
  14.     <td class="cellInfo editable" align="left" rel="remark" >{$vo.remark}td>  
  15. tr>  

我使用的是ThinkPHP和MySQL

PHP代码
  1. public function update(){  
  2.     $colname = $_POST['colname'];  
  3.     if($colname){  
  4.         $dao = D('User');  
  5.         $data['id'] = $_POST['id'];  
  6.         $data[$colname] = $_POST[$colname];  
  7.         $dao->save($data);  
  8.     }else{  
  9.         parent::update();  
  10.     }  
  11. }  

完成了！所有的请求都是AJAX完成的。这里我就不再上传DEMO了。

给大家一张截图吧，有兴趣的朋友可以试试呀。

03 23 2009

0

Mootools 1.2帮助文档

分类: mootools 标签: mootools 阅读: 207

在站内开通了mootools的帮助文档，方便大家查询方便。

文档在这里

03 16 2009

0

想做SEO,先来摸清baidu和google的脉搏

分类: mootools 标签: SEO 阅读: 116

本文介绍Go­o­gl­e­和百度两大搜索引擎的网页收录习惯、网页排名习惯等，帮助站长合理优化自己的网页，达到Go­o­gl­e­百度两面笑的目的。

Go­o­gl­e­搜索引擎习惯

Go­o­gl­e­作为全球最大的多语言搜索引擎在发展历史过程中形成了自己的网页收录习惯，也建立起自己的一套标准。研究Go­o­l­ge­收录网页的习惯有利于更好迎合Go­o­gl­e­搜索引擎的口味，达到提高网页收录量和收录排名的目的。

我们暂且不研究Go­o­gl­e­对其他语言的收录，就汉语而言，Go­o­gl­e­收录有以下特点：

1、敏感度较高，反应较快

Go­o­gl­e­对新建的网站具有较高的查知性，当然，新建的网站必须要有外部链接或者向Go­o­gl­e­递交过网站登录信息。否则，即使 Go­o­gl­e­的搜索技术再厉害，一个只有站长一个人看得见的网站是很难被Go­o­gl­e­发现的。Go­o­gl­e­收录新建网站的两个途 径是：第一，通过网站的外部链接;第二，通过向Go­o­gl­e­提交网站登录数据。一般而言，后者的收录速度相对较快，而前者则要视 Go­o­gl­e­对新建网站的外部链接网站的收录频率而定。如果Go­o­gl­e­对外部链接网站的评价高、收录频率高那么其发现新站的速度也相应 地高，新建网站被收录的日期就会被提前。

2、并重相关性和重要性

Go­o­gl­e­ 使用 P­a­ge­Ra­nk 技术检查整个网络链接结构，并确定哪些网页重要性最高。然后进行超文本匹配分析，以确定哪些网页与正在执行的特定搜索相关。在综合考虑整体重要性以及与特 定查询的相关性之后，Go­o­gl­e­ 才将最相关最可靠的搜索结果放在首位。这也是Go­o­gl­e­收录网页的特点之一。

3、变化较快、机动性较高

Go­o­gle 漫游器会定期抓取 W­eb­，将大量网页列入索引。稍后完成的下一次抓取会注意到新网站、对现有网站的更改以及失效的链接，并对内容的变化在搜索结果中加以调整。

4、较重视链接的文字描述

Go­o­gle会将链接的文字描述作为关键词加以索引，所以我们在作友情链接时千万要仔细设计链接的文字描述，使之既符合网站的定位又不失相关性，以此博得Go­o­gle的信任。

5、较重视网页标记的描述

大多数时候Go­o­gle显示搜索结果时会把网页的Deio­n­显示出来，并占有较重的篇幅。

Go­o­gle使用的技术：

P­ageRan­k­ 技术：P­ageRan­k­ 能够对网页的重要性做出客观的评价。P­ageRan­k­ 并不计算直接链接的数量，而是将从网页 A 指向网页 B­ 的链接解释为由网页 A 对网页B­ 所投的一票。这样，P­ageRan­k­ 会根据网页 B­ 所收到的投票数量来评估该页的重要性。

超文本匹配分析：Go­o­gle 的搜索引擎同时也分析网页内容。然而，Go­o­gle 的技术并不采用单纯扫描基于网页的文本(网站发布商可以通过元标记控制这类文本)的方式，而是分析网页的全部内容以及字体、分区及每个文字精确位置等因 素。Go­o­gle 同时还会分析相邻网页的内容，以确保返回与用户查询最相关的结果。

百度搜索引擎收录习惯

百度是全球最大的中文搜索引擎，对中文网页的搜索技术在某种程度上领先于Go­o­gle，百度在某些方面与Go­o­gle有相同或相似之处外它还有以下特点：

1、较重视第一次收录印象

网站给百度的第一印象比较重要，相对Go­o­gle而言，百度搜索引擎的人为参与度较高，也就是说在某些层面上可能由人来决定是否收录网页而不是 由机器来决定。所以，网站在登录百度搜索引擎之前最好把内容做得丰富点、原创内容多一点、网页关键词与内容的相关度高一点，这样才能给百度较好的初次印 象。

2、对网页的更新较敏感

百度对网页的更新相对Go­o­gle而言更加敏感，可能这与百度的本土性格有关。百度搜索引擎每周更新，网页视重要性有不同的更新率，频率在几天至一月之间。所以在百度的搜索结果中基本上都标明了收录时间。

3、较重视首页

百度对首页的重视程度要比Go­o­gle高得多，这与上面提到的“较重视第一次收录印象”一脉相承。百度在显示搜索结果时也常常把网站首页显示出来，而不具体到某个内容页(当其认为不够重要时)。相对而言，其用户体验打了折扣，而增加了其“百度快照”的用户量。

4、较重视绝对地址的链接

百度在收录网页时比较重视绝对地址的收录，百度提供的网页快照功能也没有解析相对地址的绝对路径，不知这是百度技术的疏忽还是其偏好的一大体现。

5、较重视收录日期

百度对网页的收录日期非常看重，也是其搜索结果排名的参考点，被收录得越早排名会较高，有时甚至不考虑相关性地把它认为比较重要的内容放在首位，而点击进入之后才发现是早已过时的信息或者垃圾信息。这是百度需要改进的技术。

百度使用的技术：

百度使用以下技术：“一种互联网上镜像和准镜像网站的识别方法”，这个方法解决了搜索引擎对雷同信息的重复获取，节省网络资源和本地资源，提高系统 服务的质量和效率;“一种基于词汇的计算机索引和检索方法”，该方法对一段连续的文字信息，经过词汇分析处理后，通过添加隐形词汇的手段，实现对基于词汇 索引和检索系统的检索质量提升，使用户获得更加准确的检索结果;“一种使用快照的方式实现对网上信息进行记录和分析的方法”，该方法是通过对互联网上一个 特定信息，多次进行快照的方式，将信息当时的状态进行保留。并通过对一系列快照信息的分析，得到有效数据，方便地得到网上信息的变动情况。

03 13 2009

0

mootools UI mochaui感觉更强大了

分类: mootools 标签: mootools UI 阅读: 862

很早之前也用过mochaui，当时看demo的时候就感觉眼前一亮。但是感觉很吃内存（也许都是这样的，呵呵）。后来也再看jxlib的UI

事隔多月再次打开mochaui，再看到demo，哇，太漂亮了，我一直想做的一个项目如果使用这个UI的帮助，肯定会有很好的效果呀。其实占用内存也需并不是一个问题。

 

03 13 2009

4

mootools 1.2的新特性之一 Element Storage

分类: mootools 标签: mootools 阅读: 366

直接存储属性

store可以给element存储客户自定义的属性，再通过retrieve返回属性值。

JavaScript代码
  1. var element = $('myElement');  
  2. element.store('effectInstance', new Fx.Tween(element, 'color'));  
  3. element.store('customProperty', 'someProperty');  
  4.   
  5. element.retrieve('effectInstance'); //the Fx.Tween instance  
  6. element.retrieve('customProperty'); //'someProperty'  

 

03 13 2009

2

一个用mootools写的俄罗斯方块

分类: mootools 标签: mootools 阅读: 221

大家都玩过.exe版的，或者是flash版的。没有玩过纯div版的吧。

http://robert.ingl.in/cantris.html

一个牛人写的，很有意思哟！

02 25 2009

0

SimpleTabs的改进

分类: mootools 标签: mootools SimpleTabs 阅读: 142

我在使用mootools框架的同时，一直在找一个tabs的实例，最近找到一个SimpleTabs( digitarald.de/project/simple-tabs/1-0/showcase/tabbed/)，可是使用过程中发现对IE的支持并不是很完美。表现在，等浏览器载入tabs后会有一个闪动。我做了些改动，消除了这个影响。并增加了一个皮肤。大家试试看了。

 

站内有一个实例：Categories 和 tags 的分页


 

JavaScript代码
  1. var SimpleTabs = new Class({  
  2.   
  3.     Implements: [Events, Options],  
  4.   
  5.     /** 
  6.      * Options 
  7.      */  
  8.     options: {  
  9.         show: 0,  
  10.         selector: '.tab-tab',  
  11.         classWrapper: 'tab-wrapper',  
  12.         classMenu: 'tab-menu',  
  13.         classContainer: 'tab-container',  
  14.         onSelect: function(toggle, container, index) {  
  15.             toggle.addClass('tab-selected');  
  16.             container.setStyle('display', '');  
  17.         },  
  18.         onDeselect: function(toggle, container, index) {  
  19.             toggle.removeClass('tab-selected');  
  20.             container.setStyle('display', 'none');  
  21.         },  
  22.         onRequest: function(toggle, container, index) {  
  23.             container.addClass('tab-ajax-loading');  
  24.         },  
  25.         onComplete: function(toggle, container, index) {  
  26.             container.removeClass('tab-ajax-loading');  
  27.         },  
  28.         onFailure: function(toggle, container, index) {  
  29.             container.removeClass('tab-ajax-loading');  
  30.         },  
  31.         onAdded: Class.empty,  
  32.         getContent: null,  
  33.         ajaxOptions: {},  
  34.         cache: true  
  35.     },  
  36.   
  37.     /** 
  38.      * Constructor 
  39.      * 
  40.      * @param {Element} The parent Element that holds the tab elements 
  41.      * @param {Object} Options 
  42.      */  
  43.     initialize: function(element, options) {  
  44.         this.element = $(element);  
  45.         this.setOptions(options);  
  46.         this.selected = null;  
  47.         this.build();  
  48.     },  
  49.   
  50.     build: function() {  
  51.         this.tabs = [];  
  52.         this.menu = new Element('ul', {'class': this.options.classMenu});  
  53.         this.wrapper = new Element('div', {'class': this.options.classWrapper});  
  54.   
  55.         this.element.getElements(this.options.selector).each(function(el) {  
  56.             var content = el.get('href') || (this.options.getContent ? this.options.getContent.call(this, el) : el.getNext());  
  57.             this.addTab(el.innerHTML, el.title || el.innerHTML, content);  
  58.         }, this);  
  59.         this.element.empty().adopt(this.menu, this.wrapper);  
  60.   
  61.         if (this.tabs.length) this.select(this.options.show);  
  62.     },  
  63.   
  64.     /** 
  65.      * Add a new tab at the end of the tab menu 
  66.      * 
  67.      * @param {String} inner Text 
  68.      * @param {String} Title 
  69.      * @param {Element|String} Content Element or URL for Ajax 
  70.      */  
  71.     addTab: function(text, title, content) {  
  72.         var grab = $(content);  
  73.         var container = (grab || new Element('div'))  
  74.             .setStyle('display', 'none')  
  75.             .addClass(this.options.classContainer)  
  76.             .inject(this.wrapper);  
  77.         var pos = this.tabs.length;  
  78.         var evt = (this.options.hover) ? 'mouseenter' : 'click';  
  79.         var tab = {  
  80.             container: container,  
  81.             toggle: new Element('li', {'class': 'tab-tab'}).grab(new Element('a', {  
  82.                 href: '#',  
  83.                 title: title  
  84.             }).grab(  
  85.                 new Element('span', {html: text})  
  86.             )).addEvent(evt, this.onClick.bindWithEvent(this, [pos])).inject(this.menu)  
  87.         };  
  88.         if (!grab && $type(content) == 'string') tab.url = content;  
  89.         this.tabs.push(tab);  
  90.         return this.fireEvent('onAdded', [tab.toggle, tab.container, pos]);  
  91.     },  
  92.   
  93.     onClick: function(evt, index) {  
  94.         evt = new Event(evt).stop();  
  95.         this.select(index);  
  96.         return false;  
  97.     },  
  98.   
  99.     /** 
  100.      * Select the tab via tab-index 
  101.      * 
  102.      * @param {Number} Tab-index 
  103.      */  
  104.     select: function(index) {  
  105.         if (this.selected === index || !this.tabs[index]) return this;  
  106.         if (this.ajax) this.ajax.cancel().removeEvents();  
  107.         var tab = this.tabs[index];  
  108.         var params = [tab.toggle, tab.container, index];  
  109.         if (this.selected !== null) {  
  110.             var current = this.tabs[this.selected];  
  111.             if (this.ajax && this.ajax.running) this.ajax.cancel();  
  112.             params.extend([current.toggle, current.container, this.selected]);  
  113.             this.fireEvent('onDeselect', [current.toggle, current.container, this.selected]);  
  114.         }  
  115.         this.fireEvent('onSelect', params);  
  116.         if (tab.url && (!tab.loaded || !this.options.cache)) {  
  117.             this.ajax = this.ajax || new Request.HTML();  
  118.             this.ajax.setOptions({  
  119.                 url: tab.url,  
  120.                 method: 'get',  
  121.                 update: tab.container,  
  122.                 onFailure: this.fireEvent.pass(['onFailure', params], this),  
  123.                 onComplete: function(resp) {  
  124.                     tab.loaded = true;  
  125.                     this.fireEvent('onComplete', params);  
  126.                 }.bind(this)  
  127.             }).setOptions(this.options.ajaxOptions);  
  128.             this.ajax.send();  
  129.             this.fireEvent('onRequest', params);  
  130.         }  
  131.         this.selected = index;  
  132.         return this;  
  133.     }  
  134.   
  135. });  

 

 

02 16 2009

2

mootools

分类: mootools 标签: mootools 阅读: 414

mootools是一款轻型、高效的JS框架，本站是已mootools为基础开发的。

Mootools相关链接：

{$page}
9 条记录 1/1 页
登陆
最近更新
评论
标签
mootools 
SEO 
电影 
php 
mysql 
南方黑道 
心情 
RS232 
IE 
debugger 
SimpleTabs 
ThinkPHP 
分页 
西单女孩 
流量 
兽首 
UI 
javascript 
更新 
秦皇岛 
日出 
IE8 
小沈阳之夜 
inline 
编辑 
分类
友情链接(申请链接)