base.js

目的：记录自己发现并编写的js继承方案。

js作用：为移动应用中，不同大小屏幕上显示不同大小字体的问题提供解决方案。

base.js:

var basejs = function () {
    this.base = {
        model: {
            /*屏幕宽*/
            ScreenWidth: $(window).width()
        },
        /*计算页面相关文字字体，图标宽度*/
        calcSize: function () {
            var model = this.model; //产品字体大小,子级a标签大小 var psize = model.ScreenWidth * (12 / 320); psize = psize > 16 ? 16 : psize; //星星大小 var star_img = model.ScreenWidth * (11 / 320); star_img = star_img > 18 ? 18 : star_img; //供应商牌牌大小 var supplier_ico = model.ScreenWidth * (35 / 320); supplier_ico = supplier_ico > 42 ? 42 : supplier_ico; /*********样式***********/ var css = "<style type=\"text/css\">"; //产品字体大小 css += ".page_js_font{font-size:" + psize + "px} "; //子级a标签大小 css += ".page_js_next_pa a{font-size:" + psize + "px }" //星星大小 css += ".page_js_star{width:" + star_img + "px;}"; //供应商牌牌大小 css += ".page_js_supplier_ico{width:" + supplier_ico + "px;}"; css += "</style>"; $("html").append(css); } }; };

 

应用实例:

js:

/// <reference path="../AppExtends.js" />
/// <reference path="base.js" />
/// <reference path="../lib/underscore.js" />
/// <reference path="../lib/iscroll.js" />

var air = {
    index: new basejs()
};

air.index.ready = function () {
    var _fn = air.index.fn;
    var _model = air.index.model;
    var _base = air.index.base; _base.calcSize(); _fn.swperLoad(); }; air.index.model = { }; air.index.fn = { getmodel: function () { return air.index.model; }, swperLoad: function () { new Swiper('.swiper-container', { slideElement: "a", pagination: ".pagination", calculateHeight: true }); } };

 

html实例：

     <div class="warp_jgl_Rb">
                    <i class="f_L"><span class="page_js_font">Reviews:</span></i>
                    <img class="page_js_star" src="<%=ProductReviews>=1?'/content/images/xin_man.png':'/content/images/xin_kong.png'%>" />
                    <img class="page_js_star" src="<%=ProductReviews>=2?'/content/images/xin_man.png':'/content/images/xin_kong.png'%>" />
                    <img class="page_js_star" src="<%=ProductReviews>=3?'/content/images/xin_man.png':'/content/images/xin_kong.png'%>" />
                    <img class="page_js_star" src="<%=ProductReviews>=4?'/content/images/xin_man.png':'/content/images/xin_kong.png'%>" />
                    <img class="page_js_star" src="<%=ProductReviews>=5?'/content/images/xin_man.png':'/content/images/xin_kong.png'%>" />
                </div>

 

转载于:https://www.cnblogs.com/aser1989/p/4226463.html