webim.html 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>H+ 后台主题UI框架 - WebIM 即时通信</title>
  7. <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
  8. <meta name="description" content="H+是一个完全响应式,基于Bootstrap3最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术">
  9. <link rel="shortcut icon" href="favicon.ico"> <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
  10. <link href="../css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
  11. <!-- Morris -->
  12. <link href="../css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">
  13. <!-- Gritter -->
  14. <link href="../js/plugins/gritter/jquery.gritter.css" rel="stylesheet">
  15. <link href="../css/animate.min.css" rel="stylesheet">
  16. <link href="../css/style.min.css?v=4.1.0" rel="stylesheet">
  17. <link href="../js/plugins/layer/layim/layim.css" rel="stylesheet">
  18. </head>
  19. <body class="gray-bg">
  20. <div class="row">
  21. <div class="col-sm-12">
  22. <div class="wrapper wrapper-content">
  23. <div class="row">
  24. <div class="col-sm-6">
  25. <div class="ibox float-e-margins">
  26. <div class="ibox-title">
  27. <h5>WebIM 即时通信 简介</h5>
  28. </div>
  29. <div class="ibox-content">
  30. <p>WebIM基于阿里大牛贤心的layim修改而来,layim是一款不错的web即时通讯的jQuery插件。主要修改内容:</p>
  31. <hr>
  32. <ul>
  33. <li>1. 所有图片图标修改为字体图标,提高加载效率;</li>
  34. <li>2. 整合到H+中,解决了一些兼容性问题;</li>
  35. </ul>
  36. <hr>
  37. <p>作者:<a href="http://sentsin.com/" target="_blank">贤心</a>
  38. </p>
  39. </div>
  40. </div>
  41. </div>
  42. <div class="col-sm-6">
  43. <div class="ibox float-e-margins">
  44. <div class="ibox-title">
  45. <h5>示例</h5>
  46. </div>
  47. <div class="ibox-content">
  48. <div class="alert alert-info">
  49. 请在右下角的窗口中查看。
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. <div class="col-sm-12">
  55. <div class="ibox float-e-margins">
  56. <div class="ibox-title">
  57. <h5>如何使用</h5>
  58. </div>
  59. <div class="ibox-content">
  60. <ul class="list-group clear-list" style="margin-bottom:0;">
  61. <li class="list-group-item fist-item">
  62. <p>
  63. <span class="label label-success">1</span> 安装插件
  64. </p>
  65. <br>
  66. <pre>&lt;!DOCTYPE html&gt;
  67. &lt;html&gt;
  68. &lt;head>
  69. ……
  70. &lt;link href="../js/plugins/layer/layim/layim.css"&gt;
  71. &lt;/head&gt;
  72. &lt;body&gt;
  73. ……
  74. &lt;script src="../js/plugins/layer/layer.min.js"&gt;&lt;/script&gt;
  75. &lt;script src="../js/plugins/layer/layim/layim.js"&gt;&lt;/script&gt;
  76. &lt;/body&gt;
  77. &lt;/html&gt;</pre>
  78. </li>
  79. <li class="list-group-item">
  80. <p>
  81. <span class="label label-info">2</span> 插件配置
  82. </p>
  83. <br>
  84. <pre>在../js/plugins/layer/layer.min.js中找到如下内容,进行自定义设置:
  85. ___________________________________________________________________
  86. var config = {
  87. msgurl: 'mailbox.html',
  88. chatlogurl: 'mailbox.html',
  89. aniTime: 200,
  90. right: -232,
  91. api: {
  92. friend: '../js/plugins/layer/layim/data/friend.json', //好友列表接口
  93. group: '../js/plugins/layer/layim/data/group.json', //群组列表接口
  94. chatlog: '../js/plugins/layer/layim/data/chatlog.json', //聊天记录接口
  95. groups: '../js/plugins/layer/layim/data/groups.json', //群组成员接口
  96. sendurl: '' //发送消息接口
  97. },
  98. user: { //当前用户信息
  99. name: '游客',
  100. face: 'http://tp1.sinaimg.cn/1670071920/180/1287996904/1'
  101. },
  102. //自动回复内置文案,也可动态读取数据库配置
  103. autoReplay: [
  104. '您好,我现在有事不在,一会再和您联系。',
  105. '你没发错吧?',
  106. '洗澡中,请勿打扰,偷窥请购票,个体四十,团体八折,订票电话:一般人我不告诉他!',
  107. '你好,我是主人的美女秘书,有什么事就跟我说吧,等他回来我会转告他的。',
  108. '我正在拉磨,没法招呼您,因为我们家毛驴去动物保护协会把我告了,说我剥夺它休产假的权利。',
  109. '<(@ ̄︶ ̄@)>',
  110. '你要和我说话?你真的要和我说话?你确定自己想说吗?你一定非说不可吗?那你说吧,这是自动回复。',
  111. '主人正在开机自检,键盘鼠标看好机会出去凉快去了,我是他的电冰箱,我打字比较慢,你慢慢说,别急……',
  112. '(*^__^*) 嘻嘻,是贤心吗?'
  113. ],
  114. ……</pre>
  115. </li>
  116. <li class="list-group-item">
  117. <p>
  118. <span class="label label-primary">3</span> 输出数据
  119. </p>
  120. <br>
  121. <p>按照../js/plugins/layer/layim/data/的json文件提供的数据接口输出规定的数据格式,注意:如果第二步修改了api的内容,注意输出数据的路径。</p>
  122. </li>
  123. </ul>
  124. </div>
  125. </div>
  126. </div>
  127. </div>
  128. </div>
  129. </div>
  130. </div>
  131. <script src="../js/jquery.min.js?v=2.1.4"></script>
  132. <script src="../js/bootstrap.min.js?v=3.3.6"></script>
  133. <script src="../js/content.min.js?v=1.0.0"></script>
  134. <script src="http://res.sentsin.com/lay/lib/layer/1.8.5/layer.min.js"></script>
  135. <script src="../js/plugins/layer/layim/layim.js"></script>
  136. </body>
  137. </html>