jQuery Mobile学习(一)

在jquery mobile中,是使用自定义属性驱动页面的(data-….),比如:

data-role

定义元素在页面中的角色,该属性允许定义不同的组件元素及页面视图:data-role=”page”

data-title

定义jquery mobile视图页面标题

data-transition

定义视图切换的动画效果

data-rel

定义具有浮动效果的视图

data-theme

指定元素或者组件内主题样式风格

data-icon

在元素内增加小图标

data-iconpos

定义小图标位置

data-inline

指定按钮根据内容自适应其长度

data-type

定义分组按钮水平或者垂直方向排布

data-rel

定义具有特定功能的元素,例如data-rel=”back”返回按钮

data-add-back-btn

指定视图页面自动在页眉左侧添加返回按钮

data-back-btn-text

指定由石头页面自动创建的返回按钮的文本内容,该属性的使用通常都需要和data-add-back-btn配合

data-position

该属性是实现在滑动屏幕时工具栏的显示和隐藏状态

data-fullscreen

用于指定全屏视图页面

data-native-menu

指定下拉选择功能采用平台内置的选择器

data-placeholder

设置下拉选择功能的占位符

data-inset

实现内嵌列表功能

data-split-theme

设置列表右侧图标的主题样式风格

data-filter

开启列表过滤功能

搞了这么多自定义属性,我们也不知道什么是什么,所以不如来试一试吧。

页面与视图作为移动web应用程序最重要的用户界面之一,他主要承担整个web应用程序的界面呈现工作。

jquery mobile提供一套自定义元素属性用于搭建各种页面和视图。

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <link href="jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css" />
 7     <script src="jquery-1.7.1.js" type="text/javascript"></script>
 8     <script src="jquery.mobile-1.3.1.js" type="text/javascript"></script>
 9 </head>
10 <body>
11     <div data-role="page">
12         <div data-role="header">页头
13         </div>
14         <div data-role="content">内容
15         </div>
16         <div data-role="footer">页脚
17         </div>
18     </div>
19 </body>
20 </html>

http://sandbox.runjs.cn/show/itndsvbq

不要说还是有点感觉的。。。

我们在实例中使用div元素作为视图页面的布局元素但是我们这里改为html的元素更加好:

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
 7     <script id="jquery_182" type="text/javascript" class="library" 
src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
 8     <script id="jquerymobile_120" type="text/javascript" class="library" 
src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
 9 </head>
10 <body>
11     <section data-role="page">
12         <header data-role="header">页头
13         </header>
14         <article data-role="content">内容
15         </article>
16         <footer data-role="footer">页脚
17         </footer>
18     </section>
19 </body>
20 </html>

多视图web页面

前面只有一个视图,我们现在来看看多视图页面怎么处理:

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
 7     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
 8     <script id="jquery_182" type="text/javascript" class="library" 
 9     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
10     <script id="jquerymobile_120" type="text/javascript" class="library" 
11     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
12 </head>
13 <body>
14     <section data-role="page" id="v1">
15         <header data-role="header">视图一
16         </header>
17         <article data-role="content">
18             <a href="#v2">去视图二</a>
19         </article>
20         <footer data-role="footer">页脚
21         </footer>
22     </section>
23      <section data-role="page" id="v2">
24         <header data-role="header">视图二
25         </header>
26         <article data-role="content">
27             <a href="#v1">去视图1</a>
28         </article>
29         <footer data-role="footer">页脚
30         </footer>
31     </section>
32 </body>
33 </html>

http://sandbox.runjs.cn/show/l4vejd6v

我们点击超链接可以在视图一与视图二切换,你会发现还有一点点动画效果呢!!!

PS:在此若是设置了data-title将改变手机上title的标题

动画

我们可以设置6钟动画效果:

① Slide 从右到左切换
② Slideup 从下到上切换
③ Slidedown 从上到下切换
④ Pop弹出框方式打开
⑤ Fade 渐变褪色方式
⑥ Flip飞入飞出方式

这里我就不截图了,我私下试试去。

<a href="#v1" data-transition="pop">去视图1</a>

效果感觉不错哦!!!

dialog对话框

只要在标签的data-rel设置了dialog属性,视图就具有dialog浮动层效果。

<a href="#v2" data-rel="dialog">去视图二</a>

这里有点表现不佳,我们暂时不管他。

页面主题

<section data-role="page" id="v1" data-theme="a">

关于自定义属性的东西暂时写到这里,我们来看看我们比较重要的按钮。

按钮在移动web应用程序中式非常重要的用户界面组件,主要用作为用户提供各种操作入口和视图交互功能,我们的jquery mobile提供了很多不错的按钮。

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
 7     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
 8     <script id="jquery_182" type="text/javascript" class="library" 
 9     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
10     <script id="jquerymobile_120" type="text/javascript" class="library" 
11     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
12 </head>
13 <body>
14   <div data-role="button">我是按钮</div>
15 </body>
16 </html>

于是我们的按钮就出现啦,在页面上独占一行。

input 中button、submit等也都变成了这个样式了

小图标

jquery mobile提供了一套小图标:

图标太多,我这里简单列两个:

delete:删除,data-icon=”delete”

plus:加号,data-icon=”plus”

PS:设置data-iconpos=”notext”便可以只要图标不要文字

1   <div data-role="button" data-icon="delete">删除</div>
2   <div data-role="button" data-icon="delete" data-iconpos="notext">删除</div>
3   <div data-role="button" data-icon="delete" data-iconpos="right">删除</div>

http://sandbox.runjs.cn/show/xd9axexu

若是系统提供的图标不能满足条件的话,便可以自定义图标

data-icon="myapp-email"
myapp-email就是自定义图标的名称(需要上传)
css中对应的样式是.ui-icon-myapp-email
自定义图标大小是18*18,建议png-8

按钮分组

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
 7     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
 8     <script id="jquery_182" type="text/javascript" class="library" 
 9     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
10     <script id="jquerymobile_120" type="text/javascript" class="library" 
11     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
12 </head>
13 <body>
14     <div data-role="controlgroup" data-type="horizontal">
15         <div data-role="button" data-icon="plus">
16             添加</div>
17         <div data-role="button" data-icon="delete">
18             删除</div>
19         <div data-role="button" data-icon="refresh">
20             修改</div>
21     </div>
22     <div data-role="controlgroup" data-type="horizontal">
23         <div data-role="button" data-icon="plus">
24             添加</div>
25         <div data-role="button" data-icon="delete">
26             删除</div>
27         <div data-role="button" data-icon="refresh">
28             修改</div>
29     </div>
30 </body>
31 </html>

http://sandbox.runjs.cn/show/u7cydmrv

感觉还不错的说,这里还可以为各个按钮设置主题,看起来就更加有分别了。

工具栏也是一重要组件,我们这里结合前面的按钮来完成一完整的工具栏。

jquery mobile提供两组工具栏:

Headers bar
充当视图页面的标题作用,在一般情况下header bar位于页面的顶部,一般包含2按钮
Footer bar
这个工具栏一般位于尾部,就是与header bar对应的东东

初体验:

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
 7     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
 8     <script id="jquery_182" type="text/javascript" class="library" 
 9     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
10     <script id="jquerymobile_120" type="text/javascript" class="library" 
11     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
12 </head>
13 <body>
14 <div data-role="page">
15   <header data-role="header">
16     <h1>header bar</h1>
17   </header>
18   <div>内容区域</div>
19   <footer data-role="footer">
20     <h2>footer bar</h2>
21   </footer>
22 </div>
23 </body>
24 </html>

我们在此基础上改下:

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
 7     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
 8     <script id="jquery_182" type="text/javascript" class="library" 
 9     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
10     <script id="jquerymobile_120" type="text/javascript" class="library" 
11     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
12 </head>
13 <body>
14 <div data-role="page">
15   <header data-role="header">
16     <h1>header bar</h1>
17   </header>
18   <div>内容区域</div>
19   <footer data-role="footer">
20     <div data-role="controlgroup" data-type="horizontal" >
21         <div data-role="button" data-icon="plus" data-theme="a">
22             添加</div>
23         <div data-role="button" data-icon="delete" data-theme="b">
24             删除</div>
25         <div data-role="button" data-icon="refresh" data-theme="c">
26             修改</div>
27     </div>
28   </footer>
29 </div>
30 </body>
31 </html>

http://sandbox.runjs.cn/show/icqp5f8v

导航工具条

navbar是非常有用的,他提供不同数量的按钮组合,一般位于header或者footer中

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
 7     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
 8     <script id="jquery_182" type="text/javascript" class="library" 
 9     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
10     <script id="jquerymobile_120" type="text/javascript" class="library" 
11     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
12 </head>
13 <body>
14 <div data-role="page">
15   <header data-role="header">
16     <h1>header bar</h1>
17   </header>
18   <div>内容区域</div>
19   <footer data-role="footer">
20     <nav data-role="navbar">
21         <ul>
22             <li>
23                 <a href="#" class="ul-btn-active" data-icon="home">主页</a>
24             </li>
25             <li>
26                 <a href="#"  data-icon="search">查找</a>
27             </li>
28             <li>
29                 <a href="#"  data-icon="info">信息</a>
30             </li>
31         </ul>
32     </nav>
33   </footer>
34 </div>
35 
36 </body>
37 </html>

http://sandbox.runjs.cn/show/pwbcm0mo

各位感觉还行吧。。。

fixed工具栏

这个家伙提供后,我们在轻触屏幕或者滑动屏幕时,header和footer都会出现或者消失

<header data-role="header" data-position="fixed">

我们今天暂时学到这里,明天再继续吧。

深度学习是机器学习的一个子领域,它基于人工神经网络的研究,特别是利用多层次的神经网络来进行学习和模式识别。深度学习模型能够学习数据的高层次特征,这些特征对于图像和语音识别、自然语言处理、医学图像分析等应用至关重要。以下是深度学习的一些关键概念和组成部分: 1. **神经网络(Neural Networks)**:深度学习的基础是人工神经网络,它是由多个层组成的网络结构,包括输入层、隐藏层和输出层。每个层由多个神经元组成,神经元之间通过权重连接。 2. **前馈神经网络(Feedforward Neural Networks)**:这是最常见的神经网络类型,信息从输入层流向隐藏层,最终到达输出层。 3. **卷积神经网络(Convolutional Neural Networks, CNNs)**:这种网络特别适合处理具有网格结构的数据,如图像。它们使用卷积层来提取图像的特征。 4. **循环神经网络(Recurrent Neural Networks, RNNs)**:这种网络能够处理序列数据,如时间序列或自然语言,因为它们具有记忆功能,能够捕捉数据中的时间依赖性。 5. **长短期记忆网络(Long Short-Term Memory, LSTM)**:LSTM 是一种特殊的 RNN,它能够学习长期依赖关系,非常适合复杂的序列预测任务。 6. **生成对抗网络(Generative Adversarial Networks, GANs)**:由两个网络组成,一个生成器和一个判别器,它们相互竞争,生成器生成数据,判别器评估数据的真实性。 7. **深度学习框架**:如 TensorFlow、Keras、PyTorch 等,这些框架提供了构建、训练和部署深度学习模型的工具和库。 8. **激活函数(Activation Functions)**:如 ReLU、Sigmoid、Tanh 等,它们在神经网络中用于添加非线性,使得网络能够学习复杂的函数。 9. **损失函数(Loss Functions)**:用于评估模型的预测与真实值之间的差异,常见的损失函数包括均方误差(MSE)、交叉熵(Cross-Entropy)等。 10. **优化算法(Optimization Algorithms)**:如梯度下降(Gradient Descent)、随机梯度下降(SGD)、Adam 等,用于更新网络权重,以最小化损失函数。 11. **正则化(Regularization)**:技术如 Dropout、L1/L2 正则化等,用于防止模型过拟合。 12. **迁移学习(Transfer Learning)**:利用在一个任务上训练好的模型来提高另一个相关任务的性能。 深度学习在许多领域都取得了显著的成就,但它也面临着一些挑战,如对大量数据的依赖、模型的解释性差、计算资源消耗大等。研究人员正在不断探索新的方法来解决这些问题。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值