设计每日一贴---北京兰亭妙微/UI设计公司111

252018-3

小程序复选框-在线预定

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

<view class='header1'>

  <view class='header'>

    <view class='header_con flex_between'>

      <view class='left'>

        共计{{items.length}}件商品

      </view>

      <view class='right flex_end'>

        <view wx:if="{{!management_good}}" class='flex_center' bindtap='management'>

          管理

        </view>

        <view wx:if="{{management_good}}" class='flex_center' bindtap='finish_management'>

          完成

        </view>

      </view>

    </view>

  </view>

</view>

<view class='header2'>

  <view class='header'>

    <view class='header_con flex_between'>

      <input value='类目一' disabled='{{title_disabled}}' focus="{{!title_disabled}}">

      </input>

      <view class='right flex_end'>

        <block wx-if="{{title_disabled}}">

          <image src='../../../image/hotel/delete.png' bindtap='change_classname'></image>

        </block>

        <block wx-if="{{!title_disabled}}">

          <view class='flex_center' bindtap='finish_classname'>

            完成

          </view>

        </block>

      </view>

    </view>

  </view>

</view>

<view class='onlinechoose'>

  <view class='hotel_list flex_center' wx:for="{{items}}" wx:key="items" wx:for-item="i" data-id="{{index}}" bindtap='select'>

    <view class='list_cons flex_start'>

      <view wx:if="{{management_good}}" class='lefts'>

        <block wx-if="{{!i.checked}}">

          <view class='icon_none'></view>

        </block>

        <block wx-if="{{i.checked}}">

          <icon type="success" size="30" color="red" />

        </block>

      </view>

      <image src='../../../image/hotel/demoimg.jpg'></image>

      <view class='right'>

        <view class='name'>

          {{i.name}}

        </view>

        <view class='list1 flex_between'>

          <view class='left'>

            <view class='condition1'>

              16㎡|双人床|含早

            </view>

            <view class='condition2'>

              <block>

                间数：10

              </block>

              <block>

                间数：2

              </block>

            </view>

          </view>

        </view>

        <view class='list1 flex_between'>

          <view class='left'>

            <view class='condition2'>

              类目一

            </view>

          </view>

        </view>

      </view>

    </view>

  </view>

</view>

<view class='bottom flex_between' wx:if="{{management_good}}">

  <view class='left flex_start'>

    <block wx:if="{{select_all}}">

      <view bindtap='select_none' class='flex_start'>

        <icon type="success" size="30" color="red" />

        <view>

          取消全选

        </view>

      </view>

    </block>

    <block wx:if="{{!select_all}}">

      <view bindtap='select_all' class='flex_start'>

        <view class='select_none'>

        </view>

        <view>

          全选

        </view>

      </view>

    </block>

  </view>

  <view class='right flex_end'>

    <view style='text-align:right'>

      <view class='all'>

        共选中{{middlearr.length}}件商品

      </view>

    </view>

    <view bindtap='deleteitem' class='sure'>

      删除

    </view>

  </view>

</view>

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(4424)

232018-3

Http访问跨域解决

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

一、跨域科普

跨域，即跨站HTTP请求(Cross-site HTTP request)，指发起请求的资源所在域不同于请求指向资源所在域的HTTP请求。

二、如何产生跨域

当使用前后端分离，后端主导的开发方式进行前后端协作开发时，常常有如下情景：

    a、后端开发完毕在服务器上进行部署并给前端API文档。
    b、前端在本地进行开发并向远程服务器上部署的后端发送请求。
    c、在这种开发过程中，如果前端想要一边开发一边测试接口，就需要使用跨域的方式。

三、解决方案

1、JQuery+ajax+jsonp 跨域访问
Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”，可以让网页从别的网域获取资料。

下面给出例子：

html 前端代码：

[html] view plain copy

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="resource/js/jquery-1.7.2.js"></script>

</head>

<script type="text/javascript">

$(function(){

/*

//简写形式，效果相同

$.getJSON("http://app.example.com/base/json.do?sid=1494&busiId=101&jsonpCallback=?",

         function(data){

             $("#showcontent").text("Result:"+data.result)

});

*/

$.ajax({

     type : "get",

     async:false,

     url : "http://app.example.com/base/json.do?sid=1494&busiId=101",

     dataType : "jsonp",//数据类型为jsonp

     jsonp: "jsonpCallback",//服务端用于接收callback调用的function名的参数

     success : function(data){

         $("#showcontent").text("Result:"+data.result)

     },

     error:function(){

         alert('fail');

     }

});

});

</script>

<body>

<div id="showcontent">Result:</div>

</body>

</html>

服务器端：

[java] view plain copy

import java.io.IOException;

import java.io.PrintWriter;

import java.util.HashMap;

import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;



@Controller

public class ExchangeJsonController {

@RequestMapping("/base/json.do")

public void exchangeJson(HttpServletRequest request,HttpServletResponse response) {

    try {

     response.setContentType("text/plain");

     response.setHeader("Pragma", "No-cache");

     response.setHeader("Cache-Control", "no-cache");

     response.setDateHeader("Expires", 0);

     Map<String,String> map = new HashMap<String,String>();

     map.put("result", "content");

     PrintWriter out = response.getWriter();

     JSONObject resultJSON = JSONObject.fromObject(map); //根据需要拼装json

     String jsonpCallback = request.getParameter("jsonpCallback");//客户端请求参数

     out.println(jsonpCallback+"("+resultJSON.toString(1,1)+")");//返回jsonp格式数据

     out.flush();

     out.close();

   } catch (IOException e) {

    e.printStackTrace();

   }

}

}

2、通过注解的方式允许跨域

在Controller类或其方法上加@CrossOrigin注解，来使之支持跨域。
举例：

[java] view plain copy

@CrossOrigin(origins = "*", maxAge = 3600)

@RestController

@RequestMapping("/User")

public class UserController {

}

其中origins为CrossOrigin的默认参数，即跨域来源，*即任何来源，也可以是其他域名。即可以以以下形式：

[java] view plain copy

@CrossOrigin("http://test.com")

@CrossOrigin(origins="http://test.com",maxAge=3600)

该注解用于方法上，写法相同，处理时，SpringMVC会对类上标签和方法上标签进行合并。

3、通过配置文件的方式允许跨域

在web.xml中添加如下配置：

[html] view plain copy

<filter-mapping>

    <filter-name>CorsFilter</filter-name>

    <url-pattern>/*</url-pattern>

</filter-mapping>

使用这个Filter即可让整个服务器全局允许跨域。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(5585)

222018-3

【ionic3】ionic2.x与ionic3.x之间的部分区别

seo达人

在用2.x开发时有的地方的颜色样式是通过添加 color="primary" 属性的形式设置的，但是升级3.x之后这种方式除了一些自带的color属性的组件、标签（eg: ）可以生效，其他的都失效了。

评论(0) 浏览(5557)

212018-3

学习解析XML(1）

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

什么是xml, xml有什么作用？

XML 是独立于软件和硬件的信息传输工具

XML 指可扩展标记语言（EXtensible Markup Language）。

XML 是一种很像HTML的标记语言。

XML 的设计宗旨是传输数据，而不是显示数据。

XML 标签没有被预定义。您需要自行定义标签。

XML 被设计为具有自我描述性。

XML 是 W3C 的推荐标准。

XML 和 HTML 之间的差异

XML 不是 HTML 的替代。

XML 和 HTML 为不同的目的而设计：

XML 被设计用来传输和存储数据，其焦点是数据的内容。

HTML 被设计用来显示数据，其焦点是数据的外观。

HTML 旨在显示信息，而 XML 旨在传输信息

xml的用途:

XML 把数据从 HTML 分离

XML 简化数据共享

XML 简化数据传输

XML 简化平台变更

XML 使您的数据更有用

XML 用于创建新的互联网语言

<?xml version="1.0" encoding="UTF-8"?> 声明

以及根元素子元素以及定义根元素结尾

如例

声明

<?xml version="1.0" encoding="UTF-8"?>

根元素

<note>

子元素

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

定义根元素结尾

命名的规范

所有的 XML 元素都必须有一个关闭标签

XML 标签对大小写敏感、

XML 必须正确嵌套

XML 属性值必须加引号

实体引用

XML 以 LF 存储换行

在 Windows 应用程序中，换行通常以一对字符来存储：回车符（CR）和换行符（LF）。

在 Unix 和 Mac OSX 中，使用 LF 来存储新行。

在旧的 Mac 系统中，使用 CR 来存储新行。

XML 以 LF 存储换行。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(4609)

212018-3

优秀网页UI设计深度解析

蓝蓝设计的小编

在今天这样一个互联网+时代，绝大多数企业都意识到通过线上资讯来吸引更多的潜在客户是多么的重要。这些潜在客户对你的公司及产品印象的好坏，很大程度上取决于你在网站设计上投入精力的多少。所以花时间构思一个好的网站设计，特别是主页部分的设计非常关键。

评论(0) 浏览(5263)

202018-3

小程序复选框-在线预定

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

<view class='header1'>

  <view class='header'>

    <view class='header_con flex_between'>

      <view class='left'>

        共计{{items.length}}件商品

      </view>

      <view class='right flex_end'>

        <view wx:if="{{!management_good}}" class='flex_center' bindtap='management'>

          管理

        </view>

        <view wx:if="{{management_good}}" class='flex_center' bindtap='finish_management'>

          完成

        </view>

      </view>

    </view>

  </view>

</view>

<view class='header2'>

  <view class='header'>

    <view class='header_con flex_between'>

      <input value='类目一' disabled='{{title_disabled}}' focus="{{!title_disabled}}">

      </input>

      <view class='right flex_end'>

        <block wx-if="{{title_disabled}}">

          <image src='../../../image/hotel/delete.png' bindtap='change_classname'></image>

        </block>

        <block wx-if="{{!title_disabled}}">

          <view class='flex_center' bindtap='finish_classname'>

            完成

          </view>

        </block>

      </view>

    </view>

  </view>

</view>

<view class='onlinechoose'>

  <view class='hotel_list flex_center' wx:for="{{items}}" wx:key="items" wx:for-item="i" data-id="{{index}}" bindtap='select'>

    <view class='list_cons flex_start'>

      <view wx:if="{{management_good}}" class='lefts'>

        <block wx-if="{{!i.checked}}">

          <view class='icon_none'></view>

        </block>

        <block wx-if="{{i.checked}}">

          <icon type="success" size="30" color="red" />

        </block>

      </view>

      <image src='../../../image/hotel/demoimg.jpg'></image>

      <view class='right'>

        <view class='name'>

          {{i.name}}

        </view>

        <view class='list1 flex_between'>

          <view class='left'>

            <view class='condition1'>

              16㎡|双人床|含早

            </view>

            <view class='condition2'>

              <block>

                间数：10

              </block>

              <block>

                间数：2

              </block>

            </view>

          </view>

        </view>

        <view class='list1 flex_between'>

          <view class='left'>

            <view class='condition2'>

              类目一

            </view>

          </view>

        </view>

      </view>

    </view>

  </view>

</view>

<view class='bottom flex_between' wx:if="{{management_good}}">

  <view class='left flex_start'>

    <block wx:if="{{select_all}}">

      <view bindtap='select_none' class='flex_start'>

        <icon type="success" size="30" color="red" />

        <view>

          取消全选

        </view>

      </view>

    </block>

    <block wx:if="{{!select_all}}">

      <view bindtap='select_all' class='flex_start'>

        <view class='select_none'>

        </view>

        <view>

          全选

        </view>

      </view>

    </block>

  </view>

  <view class='right flex_end'>

    <view style='text-align:right'>

      <view class='all'>

        共选中{{middlearr.length}}件商品

      </view>

    </view>

    <view bindtap='deleteitem' class='sure'>

      删除

    </view>

  </view>

</view>

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(4554)

202018-3

UI设计教程质感朋克U盘ui图标教程

蓝蓝设计的小编

介绍一下如何在PS里更好的体现图标的质感，个人觉得，这个教程对于UI学习者来说是非常受用的，特别是UI设计的新手学习者。好了，喜欢的朋友记得给我好评！

评论(0) 浏览(4667)

192018-3

UI设计教程！如何提升你的设计水平

蓝蓝设计的小编

最近半年尝试性的收了一个小徒弟，因为他今年毕业，我以为教起来会很顺利，因为他是平面设计专业而且PS软件基础还不错。但是实际上却遇到了不少的问题不少的弯路。我把它们整理了下来，总结了一下。分享给刚入门的Ui设计师们希望能帮到初学UI的你。

评论(0) 浏览(4948)

182018-3

前端框架Bootstrap的使用

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

1. 下载Bootstrap

下载地址：https://v3.bootcss.com/
进入后下载这个标题的Bootstrap

下载完成后，将所需的css,js复制到工程中即可

2. 拷贝官方的模块文件

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Bootstrap 101 Template</title>  <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>你好，世界！</h1> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

3. 页面添加组件

下面一个按钮为例：

喜欢的样式

<button type="button" class="btn btn-primary">（首选项）Primary</button>

1

<div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div>

1

2

3

4

5

然后将二者结合即可：

<div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-primary">Left</button> <button type="button" class="btn btn-primary">Middle</button> <button type="button" class="btn btn-primary">Right</button> </div>

1

2

3

4

5

- 最后的结果如下：
Left Middle Right

至此你就可以简单的用前端框架做出美观的界面了！
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(4852)

172018-3

2018年12条移动端用户体验设计趋势

鹤鹤

在移动应用领域，事物正飞速发展。要想在用户体验设计领域获得成功，设计师必须有远见，并为即将到来的新挑战做好准备。

为了简化这个任务，我列出了2018年最重要、最有影响力的趋势，而且很有可能远不止如此。

评论(0) 浏览(3969)

首页

小程序复选框-在线预定

Http访问跨域解决

【ionic3】ionic2.x与ionic3.x之间的部分区别

学习解析XML(1）

XML 和 HTML 之间的差异

XML 把数据从 HTML 分离

XML 简化平台变更

XML 使您的数据更有用

XML 用于创建新的互联网语言

所有的 XML 元素都必须有一个关闭标签

XML 标签对大小写敏感、

XML 必须正确嵌套

XML 属性值必须加引号

实体引用

XML 以 LF 存储换行

优秀网页UI设计深度解析

小程序复选框-在线预定

UI设计教程质感朋克U盘ui图标教程

UI设计教程！如何提升你的设计水平

前端框架Bootstrap的使用

1. 下载Bootstrap

2. 拷贝官方的模块文件

3. 页面添加组件

至此你就可以简单的用前端框架做出美观的界面了！

2018年12条移动端用户体验设计趋势

分类

日历

链接

个人资料

存档