uibackground 背景圖片

【基礎用法】
標簽：uibackground
描述：背景圖片上傳標簽，使用時結(jié)合html一起才能完成可視化布局，只針對具有可視化功能的模板。
用法：
<div class="eyou-edit" e-id="文件模板里唯一的數(shù)字ID" e-page='文件模板名' e-type="background" style="background-image: url({eyou:uibackground e-id='必須與前面的數(shù)字ID一致' e-page='必須與前面的文件模板名一致' e-img='skin/images/abo/about_img1.png' /}) no-repeat center top;">
        這里是背景圖片的代碼內(nèi)容
</div>
屬性：
e-id='' 每個模板文件里唯一的數(shù)字ID，必須與uibackground標簽外層的html元素標簽e-id保持一致
e-page='' 頁面分組，假設模板文件是index.htm，那么e-page的值是index
e-img='' 背景圖片在模板中的相對路徑
涉及表字段：
無
 
【更多示例】
-------------------------------示例1--------------------------------
描述：在模板文件index.htm中調(diào)用uibackground標簽，實現(xiàn)指定背景圖片區(qū)域可視化上傳的效果。
<!DOCTYPE html>
<html>
<head>
    <title>EyouCms企業(yè)建站系統(tǒng)</title>
</head>
<body>
    <div>
        <!-- uibackground可視化標簽調(diào)用 start -->
        <div class="eyou-edit" e-id="300" e-page='index' e-type="background" style="background-image: url({eyou:uibackground e-id='300' e-page='index' e-img='skin/images/abo/about_img1.png' /}) no-repeat center top;">
            這里是背景圖片的代碼內(nèi)容
        </div>
        <!-- uibackground可視化標簽調(diào)用 end -->
    <div>
 
    <!-- 可視化模板必須引入的ui標簽 start -->
    {eyou:ui open='off' /}
    <!-- 可視化模板必須引入的ui標簽 end -->
</body>
</html>
 
-------------------------------示例2--------------------------------
描述：在模板文件lists_article.htm中調(diào)用uibackground標簽，實現(xiàn)指定背景圖片區(qū)域可視化上傳的效果。
<!DOCTYPE html>
<html>
<head>
    <title>EyouCms企業(yè)建站系統(tǒng)</title>
</head>
<body>
    <div>
        <!-- uibackground可視化標簽調(diào)用 start -->
        <div class="eyou-edit" e-id="300" e-page='lists_article' e-type="background" style="background-image: url({eyou:uibackground e-id='300' e-page='lists_article' e-img='skin/images/abo/about_img1.png' /}) no-repeat center top;">
            這里是背景圖片的代碼內(nèi)容
        </div>
        <!-- uibackground可視化標簽調(diào)用 end -->
    <div>
 
    <!-- 可視化模板必須引入的ui標簽 start -->
    {eyou:ui open='off' /}
    <!-- 可視化模板必須引入的ui標簽 end -->
</body>
</html>
 
-------------------------------示例3--------------------------------
描述：在模板文件index.htm中，多處調(diào)用uibackground標簽的寫法。
<!DOCTYPE html>
<html>
<head>
    <title>EyouCms企業(yè)建站系統(tǒng)</title>
</head>
<body>
 
    <div>
        <!-- uibackground可視化標簽調(diào)用 start -->
        <div class="eyou-edit" e-id="300" e-page='index' e-type="background" style="background-image: url({eyou:uibackground e-id='300' e-page='index' e-img='skin/images/abo/about_img1.png' /}) no-repeat center top;">
            這里是背景圖片的代碼內(nèi)容
        </div>
        <!-- uibackground可視化標簽調(diào)用 end -->
    <div>

    <div>
        <!-- uibackground可視化標簽調(diào)用 start -->
        <div class="eyou-edit" e-id="301" e-page='index' e-type="background" style="background-image: url({eyou:uibackground e-id='301' e-page='index' e-img='skin/images/abo/about_img2.png' /}) no-repeat center top;">
            這里是背景圖片的代碼內(nèi)容
        </div>
        <!-- uibackground可視化標簽調(diào)用 end -->
    <div>


 
    <!-- 可視化模板必須引入的ui標簽 start -->
    {eyou:ui open='off' /}
    <!-- 可視化模板必須引入的ui標簽 end -->
</body>
</html>
 
-------------------------------示例4--------------------------------
描述：在模板文件index.htm中，多處調(diào)用uibackground標簽的寫法，只在html最外層元素指定一次e-page屬性值。
<!DOCTYPE html>
<html>
<head>
    <title>EyouCms企業(yè)建站系統(tǒng)</title>
</head>
<body e-page='index'> <!-- 最外層指定e-page屬性值，里面html元素<a>可以不再指定e-page屬性值 -->
 


    <div>
        <!-- uibackground可視化標簽調(diào)用 start -->
        <div class="eyou-edit" e-id="300" e-type="background" style="background-image: url({eyou:uibackground e-id='300' e-page='index' e-img='skin/images/abo/about_img1.png' /}) no-repeat center top;">
            這里是背景圖片的代碼內(nèi)容
        </div>
        <!-- uibackground可視化標簽調(diào)用 end -->
    <div>

    <div>
        <!-- uibackground可視化標簽調(diào)用 start -->
        <div class="eyou-edit" e-id="301" e-type="background" style="background-image: url({eyou:uibackground e-id='301' e-page='index' e-img='skin/images/abo/about_img2.png' /}) no-repeat center top;">
            這里是背景圖片的代碼內(nèi)容
        </div>
        <!-- uibackground可視化標簽調(diào)用 end -->
    <div>

 
    </div>
    <!-- 可視化模板必須引入的ui標簽 start -->
    {eyou:ui open='off' /}
    <!-- 可視化模板必須引入的ui標簽 end -->
</body>
</html>
 


文檔最后更新時間：2023-10-24 11:08:15

文檔
目錄

深色
模式

切換
寬度