仓酷云

标题: IOS编程之手机上彀站导航的制造仓酷云 [打印本页]

作者: 小妖女 时间: 2015-1-18 11:43
标题: IOS编程之手机上彀站导航的制造仓酷云
init指的是所有前面是init的方法比如UIView的初始化方法是-(id)initWithFrame:(CGRect)aRect在Objc里有很多这样关于函数命名的约定为了让Web页面在手机上显现流利，如今外洋良多网站都利用Responsive计划和CSS3MediaQueries的分离来完成。如许的实例各处可见，那末明天我想和人人一同进修的是有关于这类办法完成手机结构中的导航制造。
假如你的导航选项对照多，放得手机下去扫瞄就会挤到一同，形成美妙性的不敷。上面为懂得决如许的成绩，我们就一同跟从NickLa写的教程《MobileNavigationDesign&Tutorial》进修怎样利用jQuery来办理方才所说的成绩。
成绩的形貌

上面的截图申明了导航结构在手机上的成绩。假如你的导航只要三到四个选项，如WebDesignerWall网站，导航恰好一行能显现，但当你的导航选项包括更多时，实在的选项就会被挤压下往，好比说Bitfoundry网站。上面能够看看他们对照的截图：

<br>
办理办法

NickLa在教程中排列了几种相干的办理办法:
1、下拉选择
这类办法是将一切的导航选项放到一个下拉选择把持（select）中，但这类办法并非很好，由于select的款式要制造到让各扫瞄器下完整分歧长短常的贫苦。除非你利用jQuery的插件，好比说Chosen插件能帮你完成select的款式丑化，不然的话你只好接纳select的默许款式作风。这也将招致用户的体验纷歧样，在桌面体系下是链接标签，而在手机上倒是下拉选择框。假如你喜好这类办理体例，你能够细心浏览CSS-Tricks写的ConvertaMenutoaDropdownforSmallScreens一文。也能够参考上面的网站

<br>

<br>
2、显现成块状
第二种办法是将一切导航经由过程"display:block"，并将float往失落，将每一个导航项设置成一个块项,这是一种疾速的办理办法，不外同时也带来一个不敷的地方，给头部带来很年夜的空间，原本手机屏幕空间就小，如许一来，全部屏幕也许只能看到你的导航选项了。如许招致用户体验就差，必要转动究竟部才干看到页面的主内容。好比说上面的几个案例。

<br>

<br>
3、菜单图标
最初一种办理办法是利用菜单图标名菜单按钮。这类效果是借助jquery来完成的。在页面截进时，显现一个菜单的图标或按钮，而导航选项是埋没的，当你点击这个图标时导航选项将显现出来，再次点击时这们导航选项将埋没。这类办法将是最合适的一种办法，完整能够经由过程css来完成，假如你还必要兼容ie的话，那这类功效你就在思索共同jQ来完成，上面列出几个案例，供人人参考：

<br>

<br>
在浩瀚按例中，我对照喜好bootstrap的，人人感乐趣能够往看看bootstrap的api。
jQuery制造手机导航

下面给人人展现了三种分歧的办法完成手机导航效果，上面我们来看看怎样利用jQuery完成下面先容的第三种办法。
办法很复杂，利用jQuery的prepend办法在导航中拔出一个菜单按钮，然后给这个按钮绑定一个click事务，点击完成显现/埋没效果，详细办法以下：
HTMLMarkup

<navid="nav-wrap"><ulid="nav"><li><ahref="#">Button</a></li><li><ahref="#">Button</a></li></ul></nav>

复制代码

下面布局是一个制造导航菜单的模板，极为的罕见，在些不做过量形貌。
jQueryCode
利用jQuery的prepend办法，将“<divid="menu-icon">”拔出到“<navid="nav-wrap">”后面，并在“div#menu-icon”上绑定一个click事务，完成导航的显现/埋没功效

jQuery(document).ready(function($){/*prependmenuicon*/$(#nav-wrap).prepend(<divid="menu-icon">Menu</div>);/*togglenav*/$("#menu-icon").on("click",function(){$("#nav").slideToggle();$(this).toggleClass("active");});});

复制代码

此时导航的HTMLMarkup并酿成上面如许：

<navid="nav-wrap"><divid="menu-icon">Menu</div><ulid="nav"><li><ahref="#">Button</a></li><li><ahref="#">Button</a></li></ul></nav>

复制代码

CSSCode
布局有了，功效也有了，但还必要CSS来丑化，那末有关于CSS具体的代码在此就不做过量得的排列，此处只给人人先容几个关头部分。
起首在款式中将“div#menu-icon”埋没起来（display:none），然后经由过程CSS3MediaQueries来重置div#menu-icon款式。换句话说当显屏宽度小于600px时，将div#menu-icon重设置为显现(display:block)。

@mediascreenand(max-width:600px){#menu-icon{color:#000;width:42px;height:30px;background:url(images/menu-icon.png)no-repeatleftcenter;padding:8px10px42px;cursor:pointer;border:1pxsolid#666;display:block;/*显现div#menu-icon*/}#nav{clear:both;position:absolute;top:38px;width:160px;z-index:10000;padding:5px;background:#f8f8f8;border:1pxsolid#999;display:none;/*默许埋没，经由过程jq完成显现埋没切换*/}}

复制代码

经由过程CSS3MediaQueries在手机扫瞄器上，将#nav设置为埋没，如许次要完成实初截进时埋没导航，然后经由过程下面写的jq来完成，点击“div#menu-icon”图标时，显现导航菜单项，在点击时就埋没导航菜单项。如图所示：

<br>
DEMO效果

<br>
下面DEMO是NickLa给人人写的一个效果，感乐趣的话能够看看，不外记得利用iPhone检察，否则就看不到下图的效果：

<br>
那末有关于手机上导航制造办法就先容完了，下面办法各有所长，就像NickLa先容的一样，最初取决必要人人本人依据需求往决断，此文仅供参考，但愿人人喜好，假如您以为对你有所匡助，请将此文发送给你的伴侣，假如你另有更好的倡议也能够鄙人面的批评中与我们一同分享您的履历。最初再次感激NickLa给我们带来这么好的教程。

语法弄明白@interface@property这些工具总要知道是干嘛的怎么用基础库

作者: 飘灵儿 时间: 2015-1-21 13:10
开始的时候甚至想放弃，不过想想自己的未来，只能咬牙坚持，课下就不停的缠着老师。放学就补基础，这些基础的东西没有速成的，只有刻苦努力。我是后来发现的，转变自己的心态，不要读书看资料当成一种痛苦

作者: 再见西城 时间: 2015-1-29 13:00
重要的是，放眼全球也的确找不到第二个如苹果iOS平台这样健壮、完整、先进而且为开发者带来真实收益的开发平台来。

作者: 蒙在股里 时间: 2015-2-5 03:39
同很多iOS开发者一样，我也是通过培训进入到iOS开发这个行业，开始没有打算培训，只准备自己学习一些计算机编程相关的知识，毕业时找一份编程相关工作（本人是信息与计算科学这个专业，是数学系）。

作者: 分手快乐 时间: 2015-2-6 13:56
看《iPhone 4与iPad开发基础教程》，跟着一步步来

作者: 小女巫 时间: 2015-2-16 09:20
中国如今已然发展成为一个软件大国，软件人才的数量跃居全球之首。当然，在苹果平台的开发领域，也保持了相当强劲的发展势头。然而，很多初入iOS开发门槛的开发者，

作者: admin 时间: 2015-2-19 08:43
学习ios没什么捷径，关键在于多动手敲，曾看到前辈开玩笑说怎么快速学会某技术，答案是：“提高打字速度，快点写代码就能快点学会了”。

作者: 金色的骷髅 时间: 2015-3-5 23:04
因为我们老师也是自学的，给我们讲课说的最多的就是百度，谷歌，查文档。

作者: 透明 时间: 2015-3-12 16:35
其次学习方法和学习心态很重要，在学习当中应该保持一颗良好的心态。应该借鉴别人好的学习方法，大家互相帮助，取长补短。

作者: 变相怪杰 时间: 2015-3-12 16:35
iPhone文件系统：创建、重命名以及删除文件，NSFileManager中包含了用来查询单词库目录、创建、重命名、删除目录以及获取/设置文件属性的方法（可读性，可编写性等等）。

作者: 乐观 时间: 2015-3-12 16:35
在此，某不才愿将安装成功的Mac OS X系统的vmware虚拟机向有志学习iOS开发的各位学友们免费开放出来，经测试，可以在WindowsXP/Win7系统上完美运行，即便你的机器只有2GB内存。

作者: 小魔女 时间: 2015-3-17 00:08
在百度搜索你想要了解的类名(苹果的cocoa和cocoatouch框架的类名很有特点很容易搜到，前缀都是NS or UI)，看别人写的博客详解

作者: 小妖女 时间: 2015-3-20 14:17
特别是在校的学生，都存在一个小小的尴尬——虽然学习iOS开发的热情高涨，但由于没有多余的银子购买昂贵的Mac电脑而踟蹰不前。其实，针对初学者，如果想进入iOS开发的天地

作者: 兰色精灵 时间: 2015-3-22 02:10
其实在培训的过程中，学习到最多的就是查资料的方式，当时感觉老师好坑，什么都不告诉我们，让我们自己去查，但是现在觉得还是要自己解决问题，这样才能理解的更加深入。

作者: 不帅 时间: 2015-4-17 14:39
看完这个你就可以有多种选择来踏入做应用的阶段

作者: 冷月葬花魂 时间: 2015-5-4 08:41
在此，某不才愿将安装成功的Mac OS X系统的vmware虚拟机向有志学习iOS开发的各位学友们免费开放出来，经测试，可以在WindowsXP/Win7系统上完美运行，即便你的机器只有2GB内存。

作者: 飘飘悠悠 时间: 2015-5-10 13:42
看完这个你就可以有多种选择来踏入做应用的阶段

作者: 老尸 时间: 2015-5-12 07:02
在百度搜索你想要了解的类名(苹果的cocoa和cocoatouch框架的类名很有特点很容易搜到，前缀都是NS or UI)，看别人写的博客详解

作者: 谁可相欹 时间: 2015-6-18 19:22
这个办法就是在WindowsXP或Win7的电脑上，使用vmware虚拟机来搭建一个真实的Mac OS X环境。

作者: 活着的死人 时间: 2015-7-7 08:16
边吃零食边看Stanford的视频教程

作者: 只想知道 时间: 2015-7-21 16:10
自从苹果公司开放iOS SDK以来，大量的国内外的软件开发者将关注的目光聚集在苹果的iOS平台上。由于iPhone和iPad自一出现就给人带来了颠覆性的感觉

欢迎光临仓酷云 (http://ckuyun.com/)