Maison > interface Web > js tutoriel > Le composant frontal de couche dans layui implémente la fonction d'affichage d'image

Le composant frontal de couche dans layui implémente la fonction d'affichage d'image

小云云
Libérer: 2018-05-14 14:02:32
original
3194 Les gens l'ont consulté

Cet article présente principalement la méthode de réalisation de la fonction d'affichage d'image du composant frontal de couche dans layui. Il analyse la méthode de fonctionnement et les précautions associées du composant de couche dans layui pour appeler la fonction d'affichage d'image sous forme d'exemples. . Il fournit également des téléchargements de code source de couches et de layui, qui sont nécessaires. Les amis peuvent s'y référer, j'espère que cela pourra aider tout le monde.

L'exemple de cet article décrit comment le composant frontal de couche implémente la fonction d'affichage d'image. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Pour implémenter la fonction d'affichage d'image : couche

1 Nous introduisons ici un composant frontal de couche

layer est un composant de couche élastique Web très apprécié, elle propose une gamme complète de solutions,

s'engage à servir les développeurs de tous niveaux, votre page aura facilement une expérience d'exploitation riche et conviviale.

Quelques points à noter ici : avant d'utiliser le composant frontal de couche, nous devons introduire le fichier js de la couche

<script type="text/javascript" src=".../.../layer/layer/layer.js"></script>
<script type="text/javascript" src=".../...//layer/layer/extend/layer.ext.js"></script>
Copier après la connexion
Remarque : le fichier layer.js doit être introduit après jquery, car layer.js Il est basé sur jquery.js !

2.json

Json est également requis pour implémenter la fonction d'affichage d'image :

L'utilisation spécifique est la suivante :

{ //您服务端接口需严格按照下述格式返回
    "status": 1,  //请求的状态,1表示成功,其它表示失败
    "msg": "", //状态提示语
    "title": "",  //相册标题
    "id": number型,  //相册id
    "start": 0, //初始显示的图片序号,默认0
    "data": [  //相册包含的图片,数组格式
      {
        "name": "", //图片名
        "pid": number型, //图片id
        "src": "", //原图地址
        "thumb": "", //缩略图地址
        "area": [638, 851] //原图宽高
      }
    ]
}
Copier après la connexion
Utiliser un tel comme :

est liée comme ci-dessus et doit être exacte
StringBuilder str = new StringBuilder();
Copier après la connexion

Le résultat final renvoyé est le suivant :

Recommandations associées :
return str.toString();
Copier après la connexion


En regardant la composantisation frontale de Vue & React à partir des opérations DOM,

Les données de chargement d'initialisation des composants de table Layui et d'autres exemples sont expliqués dans détail

pagination encapsulée jQuery Explication détaillée des composants

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal