ionic 模态窗口$ionicModal$ionicModal 可以遮住用户主界面的内容框你可以在你的 index 文件或者是其他文件内嵌入以下代码里面的代码可以根据你自己的业务场景相应的改变<script idmymodal.html typetext/ngtemplateionmodalviewionheaderbarh1 classtitleMy Modal title</h1 - FACESOHO知行者

ionic 模态窗口$ionicModal$ionicModal 可以遮住用户主界面的内容框你可以在你的 index 文件或者是其他文件内嵌入以下代码里面的代码可以根据你自己的业务场景相应的改变<script idmymodal.html typetext/ngtemplateionmodalviewionheaderbarh1 classtitleMy Modal title</h1

[6925]

ionic 加载动作$ionicLoading 是 ionic 默认的一个加载交互效果里面的内容也是可以在模板里面修改用法angular.module'LoadingApp' ['ionic'].controller'LoadingCtrl' function$scope $ionicLoading { $scope.show function { $ionicLoading.show{ template 'Loading...' } } $scope.hide

[6924]

ionic 列表操作列表是一个应用广泛在几乎所有移动app中的界面元素ionList 和 ionItem 这两个指令还支持多种多样的交互模式比如移除其中的某一项拖动重新排序滑动编辑等等用法<ionlistionitem ngrepeatitem in items Hello {{item}}!/ionitem</ionlist高级用法缩略图删除按钮重新排序滑动<ionlist ngcontrol

[6923]

onswipe 指手指滑动效果可以是任何方向上的而且也和 ondrag 类似都有四个方向上单独的事件button onswipeonSwipe classbuttonTest</button

[6922]

ondragup 向上拖拽button ondraguponDragUp classbuttonTest</button

[6921]

ondrag 这个有点类似于PC端的拖拽当你一直点击某个物体并且手开始移动都会触发 ondragbutton ondragonDrag classbuttonTest</button

[6920]

onrelease 当用户结束触摸事件时触发button onreleaseonRelease classbuttonTest</button

[6919]

ontouch 这个和 ontap 还是有区别的这个是立即执行而且是用户点击立马执行不用等待 touchend/mouseup button ontouchonTouch classbuttonTest</button

[6918]

ondoubletap 手双击屏幕事件button ondoubletaponDoubleTap classbuttonTest</button

[6917]

ontap 这个是手势轻击事件如果长按时间超过250毫秒那就不是轻击了button ontaponTap classbuttonTest</button

[6916]

ionic 手势事件事件描述用法实例onhold 长按的时间是500毫秒button onholdonHold classbuttonTest</button

[6915]

ionic 切换开关操作以下实例中通过切换不同开关 checked 显示不同的值true 为打开false 为关闭HTML 代码<ionheaderbar classbarpositiveh1 classtitle开关切换</h1</ionheaderbarioncontentdiv classlistdiv classitem itemdivider&g

[6914]

ionic 单选框操作实例中根据选中的不同选项显示不同的值HTML 代码<ionheaderbar classbarpositiveh1 classtitle当选按钮</h1</ionheaderbarioncontentdiv classlistdiv classitem itemdivider 选取的值为 {{ data.clientSide

[6913]

ionic 复选框ionic 复选框（checkbox）与普通的 HTML 复选框没什么区别以下实例演示了 ionic 复选框 ioncheckbox 的应用<ioncheckbox ngmodelisChecked复选框标签</ioncheckbox实例实例中会根据复选框是否选中修改 checked 值true 为选中 false 为未选中HTML 代码<ionheaderbar classbarpositive

[6912]

ionic 下拉刷新在加载新数据的时候我们需要实现下拉刷新效果代码如下实例HTML 代码<body ngappstarter ngcontrolleractionsheetCtl ionpaneioncontent ionrefresher pullingtext下拉刷新 onrefreshdoRefresh</ionrefresherionlist &l

[6911]

ionic 背景层我们经常需要在 UI 上例如在弹出框、加载框、其他弹出层中显示或隐藏背景层在组件中可以使用$ionicBackdrop.retain来显示背景层使用$ionicBackdrop.release隐藏背景层每次调用retain后背景会一直显示直到调用release消除背景层实例HTML 代码<body ngappstarter ngcontrolleractionsheetCtl <io

[6910]

ionic 上拉菜单ActionSheet上拉菜单ActionSheet通过往上弹出的框来让用户选择选项非常危险的选项会以高亮的红色来让人第一时间识别你可以通过点击取消按钮或者点击空白的地方来让它消失实例HTML 代码<body ngappstarter ngcontrolleractionsheetCtl ionpaneioncontent h2 ngclickshowAction She

[6909]

响应式网格手持设备屏幕在切换时例如横屏竖屏等就需要设置每行的网格可以实现根据不同宽度自适应大小不同设备响应式类的样式如下响应式类描述 .responsivesm 小于手机横屏 .responsivemd 小于平板竖屏 .responsivelg 小于平板横屏div classrow responsivesmdiv classcol.col</divdiv classcol.col</div&g

[6908]

ionic_grid_vertically_align

[6907]

注意实例中每个 col 样式会自动添加上边框和灰色背景下面列出了指定列宽的一些百分比的样式名 .col10 10% .col20 20% .col25 25% .col33 33.3333% .col50 50% .col67 66.6666% .col75 75% .col80 80% .col90 90% 有偏移量的网格列可以设置左侧偏移量实例如下<div classrowdiv classcol col33 coloffset33

[6906]

指定列宽你可以设定一行中各个列的大小不一样默认情况下列都会被划分为同等大小但你也可以按百分比来设置列的宽度（一行为 12 个网格）<div classrowdiv classcol col50.col.col50</divdiv classcol.col</divdiv classcol.col</div</div<div classro

[6905]

ionic 网格Gridionic 的网格Grid和其他大部分框架有所不同它采用了弹性盒子模型Flexible Box Model 而且在移动端基本上的手机都支持row 样式指定行col 样式指定列同等大小网格在带有 row 的样式的元素里如果包含了 col 的样式col 就会设置为同等大小以下实例中 row 的样式包含了 5 个 col 样式每个 col 的宽度为 20%<div classrowdiv classcol.col

[6904]

«
1
2
...
46
47
48
49
50
...
356
357
»
357