|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
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>
<br>
3、菜单图标
最初一种办理办法是利用菜单图标名菜单按钮。这类效果是借助jquery来完成的。在页面截进时,显现一个菜单的图标或按钮,而导航选项是埋没的,当你点击这个图标时导航选项将显现出来,再次点击时这们导航选项将埋没。这类办法将是最合适的一种办法,完整能够经由过程css来完成,假如你还必要兼容ie的话,那这类功效你就在思索共同jQ来完成,上面列出几个案例,供人人参考:
<br>
<br>
<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这些工具总要知道是干嘛的怎么用基础库 |
|