jQuery Mobile Popups

2014-09-22 17:58:52

jQuery Mobile Popup弹窗集合。

带有样式风格的弹出框

显示信息

可自定义样式和最大宽度定义的弹出框 自定义弹窗

弹出菜单

显示信息

弹出表单

显示信息

登录系统

弹出窗口

显示信息

文件删除

确定要删除这个文件吗?

该操作不可撤销。

删除 取消

弹出图片

显示信息

调用方法:

这个部件在jQueryMobile中会自动初始化,但是你也可以通过popup()方法来调用。
$(‘#uedcool’).popup();

调用打开弹出框方法:

除了通过一个带有data-rel=’popup’的链接来触发部件显示,还可以调用open方法来打开弹出框部件,如:
$(‘#uedcool’).popup(‘open’);

关闭部件的方法:

弹出框可以通过按Esc键或者点击弹出框外面的区域来关闭,除此之外也可以通过调用close方法来关闭,如:
$(‘#uedcool’).popup(‘close’);

还可以通过在弹出框中添加关闭按钮的方式来调用关闭方法,只需要在关闭按钮或者链接中添加data-rel=’back’属性就可以通过点击来隐式调用关闭方法,例如:

Close 这里显示内容

注:可以通过定义ui-btn-right或者ui-btn-left来控制按钮的显示位置。

部件容器内边距:

建议在弹出框的的div上添加ui-content样式,这样可以使这个容器内内部定义一个15px的内边距,使容器的布局更加自然,如下:

在容器上添加ui-content 样式

定位:

在默认情况下,弹出框的中心点是和触发元素的中心点重合的(除在对边界位置进行修正的情况下),这样可以很方便的来实现菜单或者提示功能。

除此之外,可以通过在触发的链接上定义data-position-to来实现类似对话框或者lightbox风格在页面上居中的显示效果,例如:

弹出框的中心点与页面的中心点对应:

I am positioned to the window.

弹出框的中心点与触发元素的中心点对应:

I am positioned to the window.

除了以上window和origin这两个参数外,还可以在data-position-to属性中设置一个元素的id来使弹出框在该元素的位置显示。

Sublime Text + zen coding编码神器

欲利其工,必先利其器!我认为无论做什么,一款优秀的工具永远是极为重要的。这里分享程序猿的一款神器。 之前一直使用notepad++写代码,非常的轻量级,打开速度快,支持的语言多。后来又发现了zen coding的插件,安装后阵容为Notepad++ + Zen coding,zen coding支持代码缩写补全,尤其写前段页面html,css时简直是神器,效率非常的高,简直爱不释手。 换OSX系统后notepad不再支持,支持急需入手新的编码神器,换了好多总是不合人意。终于是找到Sublime Text,同样的轻量,高亮和黑色背景美到窒息,简洁的UI界面,配上行云流水操作,写代码简直是一种享受,不幸的是Sublime Text是收费软件,59刀也配的上它的优秀表现,不过好消息是作者还是比较厚道的,只是偶尔提醒购买,丝毫不影响编码。如果这么好的编辑器能用zen coding,绝对的完美,事实证明完美的东西是绝对的。简单操作后便可以舒适的享受写代码的过程了: 1.Sublime Text 官网下载http://www.sublimetext.com/对应的版本。