1.7 创建一个图文并茂的笔记本 [iOS开发中的神兵利器]



1. 本节课将为您演示,如何借助网页视图,创建一个图文并茂的笔记本程序。在您的项目中已经导入了一些素材文件,该图片将作为删除按钮。


2. 当用户点击刚刚的删除图标时,将删除和图标对应的图片内容。而这张素材则是在图片加载失败时显示的。


3. 该图片将作为范例图片,被插入到笔记本中。


4. 该图片将作为笔记本的背景图片。


5. 您将在这个网页文件中,创建一个笔记本,点击打开该网页文件。


6. 现在开始编写代码,创建一个可编辑的笔记本程序。


7. 首先添加一对样式标签,用来设置笔记本中的各个元素的视觉样式。


8. 星号表示对网页中的所有元素进行统一的设置,此处的样式是用来避免在低版本的操作系统上,当用户点击网页视图时,出现的短暂闪烁的现象。


9. 接着设置网页的背景图片、间距、最小宽度和颜色等样式。


10. 设置可编辑的Div标签的间距、最小高度和滚动条信息,其横向滚动条将始终不显示。该可编辑的Div标签,将作为我们的笔记本。


11. 添加一个样式,用来设置Div标签内的文字尺寸,以及行距、边距等信息。


12. 最后添加一个样式,用来设置所有图片的视觉样式。


13. 添加一个脚本标签,用来编辑脚本代码。


14. 添加一个脚本函数,当执行该函数时,往Div标签,即笔记本中,插入一张图片。


15. 首先获得网页文档的选区对象。


16. 接着获得选区的选择范围,当选区不存在时,选区就是光标所在的位置。


17. 通过脚本语句创建一个新的容器标签,用来容纳一张图片。


18. 设置标签的位置属性为相对定位。


19. 然后创建一个字符串变量,用来加载项目中的一张图片。


20. 再次创建一个字符串变量,用来加载项目中的删除图片,该删除图片将作为上一张图片的删除图标。当点击该图标时,将从网页中删除该图标及插入的图片。


21. 接着将图片和删除图标,同时插入到Div标签中。


22. 然后将光标插入到Div标签中。


23. 接着将光标移至Div标签的右侧,从而当用户继续输入文字或插入图片时,将从刚刚插入的图片的后方开始输入。


24. 添加一个函数,用来响应删除图标的点击事件。


25. 当删除图标被点击时,将由该图标父节点的父节点,删除图标的父节点。从而删除包括被插入的图片和图标在内的多个元素。


26. 接着执行模糊方法,使Div标签失去焦点。


27. 添加一个函数,用来获得笔记本中的,包含图片和文字的所有内容。


28. 在网页中添加一个Div标签,并设置其可编辑属性的值为真,该标签将作为笔记本所有内容的容器。然后在左侧的项目导航区,打开视图控制器的代码文件。


29. 首先给类文件添加一个网页视图类型的属性。


30. 获得当前设备的屏幕尺寸信息,并通过屏幕尺寸信息创建一个矩形区域。


31. 然后通过矩形区域,初始化一个位于该显示区域的网页视图。


32. 设置网页视图显示垂直滚动条,并将网页视图添加到当前控制器的根视图。


33. 获得网页文件在项目中的路径,并将路径转换成网址的样式。


34. 通过网页视图的加载请求方法,加载该网址路径下的网页文件。


35. 添加一个按钮,当点击该按钮时,向笔记本中插入一张图片。


36. 设置按钮在正常状态下的标题,以及按钮的背景颜色。


37. 给按钮绑定点击事件,并将按钮插入到控制器的根视图中。


38. 添加第二个按钮,当点击该按钮时,将获取笔记本中的所有内容,并保存这些内容。


39. 同样设置第二个按钮在正常状态下的标题,以及按钮的背景颜色。


40. 给按钮绑定点击事件,并将第二个按钮插入到控制器的根视图中。


41. 添加一个方法,用来响应第一个按钮的点击事件。


42. 通过调用网页视图的执行脚本的方法,执行网页中的插入图片的脚本函数。


43. 接着添加一个方法,用来获取并保存笔记本中的内容。


44. 通过调用网页视图的执行脚本的方法,执行网页代码中的获取笔记本信息的脚本函数,并在控制台输出笔记本信息。接着启动模拟器预览项目。


45. 在网页视图中点击,开始笔记信息的输入。


46. 在弹出的键盘提示区,点击以输入某个单词。


47. 继续点击输入其它的单词。


48.


49. 然后点击插入图片按钮,将在输入文字的后方插入一张图片。


50. 图片插入后,光标将自动移到图片的后方。点击键盘上的回车键,将光标移到图片的下方。


51. 点击完成按钮,关闭键盘并观察当前的笔记本。


52. 如果需要再次编辑笔记,只需再次点击网页视图即可。


53. 然后输入其它的笔记信息。


54. 点击第二个按钮,可以获得已经写入的笔记信息,同时留意控制台的日志输出。


55. 在底部的控制台输出了所有的笔记内容,您可以保存这些内容,当需要时只需再次载入即可。最后点击左上角的[停止]按钮,关闭模拟器并结束本节课程。




本文整理自:《app开发中的神兵利器》,真正的[手把手]教学模式,用最快的速度上手iOS开发,苹果商店App Store免费下载:https://itunes.apple.com/cn/app/id1209739676,或扫描本页底部的二维码。课程配套素材下载地址:资料下载

0