03 24 2009

0

mootools的inline编辑

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

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

我使用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 13 2009

0

mootools UI mochaui感觉更强大了

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

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

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

 

03 13 2009

4

mootools 1.2的新特性之一 Element Storage

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

直接存储属性

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

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

03 06 2009

0

ThinkPHP分页的Slider效果

分类: ThinkPHP 标签: ThinkPHP mootools 分页 阅读: 413

用过ThinkPHP框架中有个Page类，可以帮助大家无忧的显示分页效果。

也可以自定义分页效果。这里有就不多讲了。

利用mootools框架，在分页时展示slider效果。可以参考本站最后的Slider分页效果。

thinkPHP的代码是

PHP代码
  1. $p = new Page($count,$listRows);  
  2. .....  
  3. $this->assign("nowPage", $p->nowPage);  
  4. $this->assign("totalPages", $p->totalPages);  
JavaScript代码
  1. window.addEvent('domready', function() {  
  2.     var page=$('nowPage').get('text').toInt()-1;  
  3.     new Slider('slider','knob',{  
  4.         wheel:false,  
  5.         steps:$('totalPages').get('text').toInt()-1,  
  6.         onChange:function(step){  
  7.             $('nowPage').set('text',step+1)  
  8.         },  
  9.         onComplete:function(step){  
  10.             if(step!=page){  
  11.                 var p = step.toInt()+1;  
  12.                 url=ACTION+'?p='+p;  
  13.                 window.location.href=url;  
  14.             }  
  15.         }  
  16.     }).set(page);  
  17. });  

 

XML/HTML代码
  1. <div id="slider" class="slider">  
  2.     <div id="knob" class="knob" style="position: relative; left: 0px;">div>  
  3. div>  
  4. <span style="float:left;height:22px;">Page <span id="nowPage" style="font-weight:bold;">{$nowPage}span> of <span id="totalPages">{$totalPages}span>span>  

拖动knob在slider中滑动，就可以分页了。

02 25 2009

0

SimpleTabs的改进

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

我在使用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 阅读: 412

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

Mootools相关链接：

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