【已解决】用JQuery easyUI实现编辑HTML页面时预览移动端的界面

【背景】

尝试用easyUI:

http://jeasyui.com/index.php

中的:

Panel

http://www.jeasyui.com/demo-mobile/main/index.php?plugin=Panel&theme=metro-gray&dir=ltr&pitem=

去实现编辑的html内容,在手机上预览显示。

【折腾过程】

1.先去拿到背景图片:

http://www.jeasyui.com/demo-mobile/images/phone.png

再去找个单独的html去测试。

2.网上随便下载了个页面

单独打开效果是:

open demo input html page effect

然后用如下代码:

    <!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">  
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>HTML页面编辑手机端预览测试</title>  
        <link rel="stylesheet" type="text/css" href="lib/easyui/themes/metro/easyui.css">  
        <link rel="stylesheet" type="text/css" href="lib/easyui/themes/mobile.css">  
        <link rel="stylesheet" type="text/css" href="lib/easyui/themes/icon.css">  
        <script type="text/javascript" src="lib/easyui/jquery.min.js"></script>  
        <script type="text/javascript" src="lib/easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="lib/easyui/jquery.easyui.mobile.js"></script>
    </head>
    <body>
        <div class="easyui-navpanel" data-options="href:'input_html_demo.html'" style="padding:10px">
            <header>
                <div class="m-toolbar">
                    <div class="m-title">Ajax Panel</div>
                </div>
            </header>
            <footer>
                <div class="m-toolbar">
                    <div class="m-title">Panel Footer</div>
                </div>
            </footer>
        </div>
    </body>    
    </html>

放在里面效果是:

demo html put to view port show on whole page

3.尝试去加上对应的背景图片:

把:

Ajax Panel – Live Demo – jQuery EasyUI

中的源码:

<styletype="text/css">
	.device{
		width: 400px;
		height: 760px;
		margin:10px 0 0 170px;
		background:url('../images/phone.png') no-repeat;
		position:relative;
	}
	.demo-wrap{
		position:absolute;
		width:322px;
		height:482px;
		background: #ccc;
		top:117px;
		left:23px;
	}
</style>

拷贝过来:

再去试试:

    <!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">  
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>HTML页面编辑手机端预览测试</title>  
        <link rel="stylesheet" type="text/css" href="lib/easyui/themes/metro/easyui.css">  
        <link rel="stylesheet" type="text/css" href="lib/easyui/themes/mobile.css">  
        <link rel="stylesheet" type="text/css" href="lib/easyui/themes/icon.css">  
        <script type="text/javascript" src="lib/easyui/jquery.min.js"></script>  
        <script type="text/javascript" src="lib/easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="lib/easyui/jquery.easyui.mobile.js"></script>
       
        <style type="text/css">
            .device{
                width: 400px;
                height: 760px;
                margin:10px 0 0 170px;
                background:url('images/phone.png') no-repeat;
                position:relative;
            }
            .demo-wrap{
                position:absolute;
                width:322px;
                height:482px;
                background: #ccc;
                top:117px;
                left:23px;
            }
        </style>
    </head>
    <body>
        <div class="easyui-navpanel" data-options="href:'input_html_demo.html'" style="padding:10px">
            <header>
                <div class="m-toolbar">
                    <div class="m-title">Ajax Panel</div>
                </div>
            </header>
            <footer>
                <div class="m-toolbar">
                    <div class="m-title">Panel Footer</div>
                </div>
            </footer>
        </div>
    </body>    
    </html>

结果显示效果没变化。

4.把路径都改为上一级的目录:

        <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/metro/easyui.css">  
        <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/mobile.css">  
        <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/icon.css">  
        <script type="text/javascript" src="../lib/easyui/jquery.min.js"></script>  
        <script type="text/javascript" src="../lib/easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="../lib/easyui/jquery.easyui.mobile.js"></s

结果是:

change path to parent only show text

只显示文字了,其他内容都不显示了。。。

5.后来又经过N多次的折腾,结果都还是显示乱码,或者异常。

6.最后的最后,终于用如下代码:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>HTML页面编辑手机端预览测试</title>  
    <link rel="stylesheet" type="text/css" href="lib/easyui/themes/metro/easyui.css"> 
    <link rel="stylesheet" type="text/css" href="lib/easyui/themes/mobile.css">  
    <link rel="stylesheet" type="text/css" href="lib/easyui/themes/icon.css">  
    <script type="text/javascript" src="lib/easyui/jquery.min.js"></script>  
    <script type="text/javascript" src="lib/easyui/jquery.easyui.min.js"></script> 
    <script type="text/javascript" src="lib/easyui/jquery.easyui.mobile.js"></script>
    
    <style type="text/css">
        .device{
            width: 400px;
            height: 760px;
            margin:10px 0 0 170px;
            background:url('images/phone.png') no-repeat;
            position:relative;
        }
        .demo-wrap{
            position:absolute;
            width:322px;
            height:482px;
            background: #ccc;
            top:117px;
            left:23px;
        }
    </style>

</head>
<body>

    <div class="device">
        <div class="demo-wrap">
            <div class="easyui-navpanel" data-options="href:'input_html_demo.html'" style="padding:10px">
                <header>
                    <div class="m-toolbar">
                        <div class="m-title">页面预览效果</div>
                    </div>
                </header>
                <footer>
                    <div class="m-toolbar">
                        <div class="m-title">xxxx系统</div>
                    </div>
                </footer>
            </div>
        </div>
    </div>

</body>    
</html>

实现了预览效果:

perfect mobile preview effect finnally show

 

7.后来发现,对于easyUI,下载的源码包中,包含了所有的demo,包括此处这个demo。

其中就有对应的那些源码和测试文件_content.html

easyui src contain the ajax panel demo

把对应的_content.html拿过来:

put _content.html for test

用代码:

<div class="easyui-navpanel" data-options="href:'_content.html'" style="padding:10px">

就可以看到官网demo的效果了:

can show official demo effect

 

【总结】

其实本来这个事情很简单,只要熟悉div的class设置值,然后再用css控制这个class即可。

只不过由于之前没这么弄过,并且细节参数不会调,所以折腾了很长时间才弄好。

最终才借用官网的参数配置,尤其是各种padding,px等等,才弄出来的。



发表评论

电子邮件地址不会被公开。 必填项已用*标注

无觅相关文章插件,快速提升流量