- 浏览: 124659 次
- 性别:
- 来自: 北京
最新评论
-
MIMIko:
怎么显示少了一个文件呢?跑步起来
Sencha Touch 2 Menu -
daydayupx:
有完整的代码吗?1240500584@qq.com
Sencha Touch Carousel -
JAVA一小菜:
您好,我想问下,为什么我从官网下载下来的sencha touc ...
Sencha Tuch Spket1.6.23 IDE 配置 -
zengdingshan:
请回复zdsxsc@163.com
Sencha Touch 2 Menu -
zengdingshan:
你好,这个demo运行不起来,请问有什么特殊配置吗
Sencha Touch 2 Menu
主页面
/** * @Author sai */ Ext.define("Sencha.view.Main", { extend : 'Ext.tab.Panel', xtype : 'Main', //requires: ['Sencha.view.MenuButton','Sencha.view.MenuItemButton'], config : { tabBar : { docked : 'bottom' }, scrollable :{ direction : 'horizontal' }, items:[{ title : '首页', iconCls : 'home', loadMask : true, html: ' Screen 1' }, { title : '应用超市', iconCls : 'user', loadMask : true, html: 'Screen 2' }], listeners : { initialize : function(panel) { debugger; var b=panel.getTabBar().element.down('div[class^="x-tab-normal x-tab x-iconalign-center"]:nth-child(2)').dom; var el = document.createElement("div"); el.setAttribute("class","x-tab-normal x-tab x-iconalign-center x-tab-icon x-layout-box-item x-stretched"); b.parentNode.insertBefore(el,b); var button=Ext.create('Sencha.view.MenuButton',{left:10,bottom:0}).element.dom; el.appendChild(button); var div = document.createElement("div"); var style="position:absolute; padding: 10px; height: 62px !important;bottom:-20px !important; width: 62px !important; background:url(resources/images/roB.png) 0 0 no-repeat;background-size:100% 100%;" div.setAttribute("style",style); div.setAttribute("id","radius"); el.appendChild(div); var items=[ {xtype: 'menuitembutton',iconCls:'user',route:'contact',id:'test01',t:'test01'}, {xtype: 'menuitembutton',iconCls:'user',route:'mail',id:'test02',t:'test02'}, {xtype: 'menuitembutton',iconCls:'user',route:'app',id:'test03',t:'test03'}, {xtype: 'menuitembutton',iconCls:'user',route:'app',id:'test04',t:'test04'}, {xtype: 'menuitembutton',iconCls:'user',route:'app',id:'test05',t:'test05'} ]; Ext.Viewport.add(items); } } } })
/** * 快捷菜单控制器 * @Author sai */ Ext.define('Sencha.controller.Menu', { extend: 'Ext.app.Controller', requires: [ 'Sencha.view.MenuItemButton', 'Sencha.view.MenuButton', 'Ext.util.DelayedTask' ], config: { before: { showContact: 'authenticate' }, routes: { 'mail':'showMail', 'contact': 'showContact', 'main':'showMain' }, refs: { menubutton: 'menubutton', menuitembutton: 'menuitembutton' }, control: { menubutton: { tap: 'onMenuButtonTap' }, menuitembutton: { tap: 'onMenuItemButtonTap' } } }, /** * * @param {} button */ onMenuItemButtonTap: function(button) { var menuButton = Ext.ComponentQuery.query('menubutton')[0]; button.addCls('tapped'); button.setZIndex(0); this.closeMenu(menuButton); //var h= this.getApplication().getHistory(); this.redirectTo(button.getRoute()); }, /** * * @param {} menuButton */ onMenuButtonTap: function(menuButton) { if (!menuButton.getIsOpen()) { // open menu this.openMenu(menuButton); } else { // close Menu this.closeMenu(menuButton); } }, openMenu: function(menuButton) { Ext.Viewport.setMasked(true); var masks= Ext.ComponentQuery.query('mask'); for(var i=0, max=0; i<masks.length; i++){ max = Math.max( max,masks[i].getZIndex() || 0 ); if(!masks[i].isDisabled()){ masks[i].addListener('tap',function(){ Ext.Viewport.setMasked(false); var items = Ext.ComponentQuery.query('menuitembutton'),menuButton=Ext.ComponentQuery.query('menubutton')[0]; menuButton.replaceCls('open', 'close'); if(Ext.get("bg")){ Ext.get("bg").destroy();} var left= document.body.clientWidth*0.5; var bottom= 12; Ext.each(items, function(item, index) { if (item.getCls().indexOf('tapped') === -1) { item.replaceCls('open', 'close'); item.setLeft(left); item.setBottom(bottom); item.setZIndex(0); item.fireEvent('hide'); } else { var task = Ext.create( 'Ext.util.DelayedTask', function() { item.removeCls('menuitembutton'); item.setLeft(left); item.setBottom(bottom); item.removeCls('tapped'); } ); item.fireEvent('hide'); task.delay(900); } }); menuButton.setIsOpen(false); }); } } var el = document.createElement("div"); el.setAttribute("class","s-bbox"); el.setAttribute("id","bg"); Ext.Viewport.element.appendChild(el); var items = Ext.ComponentQuery.query('menuitembutton'), bottom = menuButton.getBottom(), left = menuButton.getLeft(), radius = 150, abschnitte = items.length - 1, winkel = 130 / abschnitte; menuButton.replaceCls('close', 'open'); //debugger; // if(items.length=='0'){return;} if(items.length=='1'){ items[0].addCls('menuitembutton'); items[0].replaceCls('close', 'open'); var left= document.body.clientWidth*0.5; var bottom= 160; items[0].setLeft(left); items[0].setBottom(bottom); items[0].setZIndex(max+1); items[0].fireEvent('show'); } else{ Ext.each(items, function(item, index) { item.addCls('menuitembutton'); item.replaceCls('close', 'open'); var currentAngle = (155 - (winkel * (abschnitte - index))), radiant = Math.PI / 180, currnetRadiant = radiant * currentAngle, x = Math.round(Math.cos(currnetRadiant) * radius), y = Math.round(Math.sin(currnetRadiant) * radius); item.setLeft(document.body.clientWidth*0.5 + x); item.setBottom(bottom + y); item.setZIndex(max+1); item.fireEvent('show'); });} menuButton.setIsOpen(true); }, closeMenu: function(menuButton) { Ext.Viewport.setMasked(false); var items = Ext.ComponentQuery.query('menuitembutton'); menuButton.replaceCls('open', 'close'); if(Ext.get("bg")){ Ext.get("bg").destroy();} var left= document.body.clientWidth*0.5; var bottom= 12; Ext.each(items, function(item, index) { if (item.getCls().indexOf('tapped') === -1) { item.replaceCls('open', 'close'); item.setLeft(left); item.setBottom(bottom); item.setZIndex(0); item.fireEvent('hide'); } else { var task = Ext.create( 'Ext.util.DelayedTask', function() { item.removeCls('menuitembutton'); item.setLeft(left); item.setBottom(bottom); item.removeCls('tapped'); } ); item.fireEvent('hide'); task.delay(900); } }); menuButton.setIsOpen(false); }, showContact:function(){ debugger; }, showMain:function(){ debugger; }, showMail:function(){ debugger; }, authenticate:function(action){ debugger; action.resume(); // var usercode= window.localStorage.getItem("usercode") // if(usercode){ // action.resume();}else{ // // } } });
/** * @Author sai */ Ext.define('Sencha.view.MenuButton', { extend: 'Ext.Button', requires: ['Ext.Button'], alias: 'widget.menubutton', xtype: 'menubutton', config: { //iconCls: 'add', ui : 'pathmenu', iconMask: true, height: 50, width: 50, zIndex:'10', cls: 'menubutton', listeners:{ 'hide':function(){ var div = document.getElementById("radius"); var style="display:none"; div.setAttribute("style",style); }, 'show':function(){ //var left=parseInt(this.getLeft())-parseInt(5); var left=3; var div = document.getElementById("radius"); var style="position:absolute; padding: 10px; height: 62px !important; width: 62px !important; left: "+left+"px !important; bottom: 5px !important; background:url(images/roB.png) 0 0 no-repeat;background-size:100% 100%;" div.setAttribute("style",style); } }, isOpen: false } });
/** * 快捷菜单选项 * @Author sai */ Ext.define('Sencha.view.MenuItemButton', { extend: 'Ext.Button', alias: 'widget.menuitembutton', xtype: 'menuitembutton', config: { iconMask: true, ui : 'pathmenu', t:'', height: 40, width: 40, zIndex:'0', cls: 'menuitembutton', isActive: false, listeners:{'initialize':function(){ this.setLeft(document.body.clientWidth*0.5); this.setBottom(15); this.setStyle('margin-left:-20px'); var el = document.createElement("div"); el.id=this.getId()+'-field'; el.innerHTML=this.getT(); el.setAttribute("class", "s-text"); el.setAttribute("style","display:none;"); Ext.Viewport.element.appendChild(el); }, 'resize':function(){ // debugger; this.setLeft(document.body.clientWidth*0.5); this.setBottom(15); }, 'show':function(){ //debugger; var id=this.getId()+'-field'; var el=document.getElementById(id); var b=this.getBottom()-20; var style='left:'+this.getLeft()+'px !important; bottom:'+b+'px !important; margin-left:-20px; z-index: '+this.getZIndex()+'!important;'; el.setAttribute("style",style); }, 'hide':function(){ //debugger; var id=this.getId()+'-field'; var el=document.getElementById(id); el.setAttribute("style","display:none;"); } }, route: '' } });
.x-button.x-button-pathmenu{background:url(../images/ro.png) 0 0 no-repeat;background-size:100% 100%;/*background-color:#f7f7f7;background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dedede), color-stop(10%, #ebebeb), color-stop(65%, #f7f7f7), color-stop(100%, #f9f9f9));background-image:-webkit-linear-gradient(top, #dedede,#ebebeb 10%,#f7f7f7 65%,#f9f9f9);background-image:linear-gradient(top, #dedede,#ebebeb 10%,#f7f7f7 65%,#f9f9f9);border:3px solid #fff;*/border-radius:1.75em;padding:0.5em;border:0;} .x-button.x-button-pathmenu.menubutton{background:url(../images/roa.png) 0 0 no-repeat;background-size:100% 100%;} .x-button.x-button-pathmenu.open{-webkit-transform:rotate(360deg) translateZ(0)} .x-button.x-button-pathmenu.close{-webkit-transform:rotate(-360deg) translateZ(0)} .x-button.x-button-pathmenu.menubutton{-webkit-transition:all 300ms} .x-button.x-button-pathmenu.menubutton.open{-webkit-transform:rotate(45deg) translateZ(0); background:url(../images/roa.png) 0 0 no-repeat #1E93E4; background-size:100% 100%; } .x-button.x-button-pathmenu.menubutton.close{-webkit-transform:rotate(0deg) translateZ(0)} .x-button.x-button-pathmenu.menuitembutton{-webkit-transition-duration:300ms;-webkit-transition-property:opacity, left, bottom, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.68, -0.55, 0.265, 1.55);opacity:1} .x-button.x-button-pathmenu.menuitembutton.tapped{-webkit-transform:rotate(180deg) scale(4) translatez(0);opacity:0} .s-bbox{height:135px;width:270px; background:none; background:-webkit-gradient(radial,bottom center,0,bottom center,100,from(rgba(0,0,0,0.4)),color-stop(80%,rgba(0,0,0,0.6)),to(rgba(0,0,0,0.2))); background:-webkit-radial-gradient(bottom center,135px 135px,rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.6) 80%,rgba(0,0,0,0.2) 100%); background-image: radial-gradient(bottom center, circle, rgba(50,50,50,1) 0%, rgba(68,68,68,1) 100%); border-radius:135px 135px 0 0;position:absolute;left:50%;margin-left:-135px;bottom:3em;} .s-text{ position:absolute; height: 14px !important; width: 40px !important; text-align:center; font-size:12px; color:#fff; font-weight:bold; -webkit-transition-duration: 300ms;-webkit-transition-property: opacity, left, bottom, -webkit-transform;-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
如果对你有帮助 可以捐助我呀!大老板们
- _Menu_demo.zip (2.4 MB)
- 下载次数: 197
评论
3 楼
MIMIko
2016-03-25
怎么显示少了一个文件呢?跑步起来
2 楼
zengdingshan
2013-10-23
请回复zdsxsc@163.com
1 楼
zengdingshan
2013-10-23
你好,这个demo运行不起来,请问有什么特殊配置吗
发表评论
-
Sencha Touch chart 时间轴
2013-06-28 17:33 1845JSon 时间数据格式 {"data" ... -
Sencha Touch 复杂 store
2013-06-25 11:26 2714Ext.define('Contact.model.Titl ... -
gird 翻页
2013-05-15 14:57 1547//<debug> Ext.Loader ... -
Sencha Touch TextArea 支持滑动
2013-04-12 16:41 3485TextArea ios 支持滑动 Ext.def ... -
Sencha Touch history 理解
2013-02-20 14:20 1195/** * @author Ed Spencer ... -
Sencha Touch history
2013-02-20 14:19 1688/** * @author Ed Spencer ... -
Sencha Touch Carousel 自动切换
2013-01-25 11:20 1634setInterval(function () { ... -
Sencha Touch userAgent 判断
2013-01-25 11:05 1188[{ name: 'en ... -
Sencha Touch Ajax CORS 跨域
2013-01-21 11:28 4672CORS 全称:Cross-Origin Resource ... -
Sencha Touch Carousel
2012-12-26 14:37 1314var el = carousel.element; ... -
Sencha Touch 判断横竖屏
2012-12-26 14:27 1421Ext.Viewport.on('orientat ... -
Sencha Touch 2 第二讲
2012-11-13 09:25 1223第二讲(Sencha Touch 应用组成部分及简单介绍) h ... -
Sencha Touch 2 第一讲
2012-11-06 11:51 2077教学视频 下载地址 http://www.kuaipan.cn ... -
Sencha Touch 2 Jsonp原理
2012-10-27 22:51 4293JSONP是一个非官方的协议,它允许在服务器端集成Script ... -
ST谷歌语音搜索
2012-09-05 09:57 1025var dom= me.element.down(' ... -
picker 加title
2012-08-21 16:06 1063var picker = Ext.create('Ex ... -
Sencha Touch 自定义图标
2012-08-13 17:37 5736首先把你 图标图片放入 E:\space\Theming\sd ... -
Sencha Touch 2 Slidenavigation
2012-08-07 14:57 1604launch: function() { var ... -
phonegap SQLite 插件
2012-08-02 15:33 7231插件下载地址: https://github.com/Appl ... -
XTemplate 使用
2012-07-23 18:05 0itemTpl: new Ext.XTemplate( ...
相关推荐
Sencha Touch 2入门教程之MVC 讲解如何使用 Sencha Touch 2 mvc模式来开发一个登录界面
sencha touch 2 实现的贪吃蛇 希望对大家有所帮助
本文通过对 Sencha Touch 框架的介绍,使读者对该框架有一定的了解,并通过一些代码示例给用户更详细直观的对 Sencha Touch 框架功能的了解。 ExtJS ExtJS 是为 web 开发人员提供的基于 JavaScript 和 web 标准快速...
sencha touch2移动开发框架,ajax获取数据
Sencha Touch开发的项目《般若人生》源码
sencha touch 折叠list
sencha touch 应用案例 sencha touch 案例 一个完整的sencha touch 应用案例 移动WEB社区开发的日志案例 非常不错!
Sencha Touch 2 简介知识,环境搭建,组件介绍和布局事例
sencha touch cookbook 英文高清文字版 !
MAC OS 下sencha touch +cordova 开发环境配置。可以将H5 hybird 应用打包成IOS 应用。
sencha touch 2.4.0最新版 原版包下载
sencha touch中文翻译文档,包含sencha touch入门基础和一些控件的使用说明
sencha touch list demo
Sencha Touch 2入门教程之MVC例子程序源代码 用Sencha Touch 2 之MVC模式写的一个登录界面的例子
sencha touch 是一个移动平台UI开发框架,可以实现各种绚丽的页面效果
这是我做的一个sencha touch 的项目,测试并能运行,希望对大家有帮助
sencha touch grid