如何利用ionic框架设置Tabs标签页

如何利用ionic框架设置Tabs标签页,第1张

第一步,创建静态页面tabs.html,默认是HTML5模板,如下图所示

第二步,引入ionic相关的CSS文件和JS文件,如下图所示:

第三步,在body插入div和a标签元素,并设置样式,如下图所示:

第四步,预览该静态页面,这时会看到四个Tabs标签,如下图所示:

第五步,再次设置Tabs样式,使每个Tabs样式不一样,如下图所示:

第六步,下面插入AngularJS相关的指令,ng-app、ng-controlle指令,如下图所示:

第一步,在创建的web项目EasyUI下,新建页面文件夹pages,并在该文件夹下创建页面tabs.html。

第二步,引入EasyUI核心JavaScript和CSS文件,并需要jQuery关键的js文件。

第三步,在body标签元素内插入Tabs标签元素div,并设置样式。

第四步,预览静态页面tabs.html。

第五步,利用tabs标签页自带的函数方法获取选中的tabs页标题。

第六步,再次预览该静态页面,点击其中之一的tabs子标签,这时会d出标签页标题。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/7832861.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-10
下一篇 2023-04-10

发表评论

登录后才能评论

评论列表(0条)

保存