前端框架-弹窗的研究
在电力公司工作已有两年，开发的各个应用都是基于H5应用。而H5引用中又基于cordova.js 库来开发，各个外包公司接了应用，都是一头雾水，不晓得怎么开发，这篇文章主要是讲解使用基于seajs库和Bootstrap框架来搭建的一套前端通用框架。
前端框架主要研究了四点
1、 研究Web框架的动态加载技术
针对移动互联网环境下移动端内存、流量、电池资源有限，通过使用动态加载技术，将程序文件打散成多个小文件，以延迟加载技术（LazyLoading），实现按需加载提升用户体验，降低移动端的资源使用率。在业务和样式上，前端开发人员只需要在JS代码块头部引用需要的js库和css样式即可。在逻辑上，开发人员只需调用后端提供的接口进行读取与显示。这种技术的主要优点包括可维护性高、动态加载快、前端性能优化好。
2、 研究模块化构建技术
在前端人员开发移动应用项目的基础上，通过使用模块化构建技术，将每个页面分成多个功能进行分块化处理，这样既可快速的实现移动端的页面获取，也可在移动端调试的时候快速定位相关问题。通过定义多个模块来相互调用，既保证了各个模块之间不发生冲突，又提高了开发人员的编码效率。其优点主要是职责单一、依赖就近。
3、 研究多分辨率、多尺寸移动终端界面适配技术
针对移动端的各个终端设备，在基于bootstrap框架的基础上，通过媒体查询功能（Medie Query）来设置统一的样式，通过视窗（meta）属性内容，设置等比例窗口，这样实现了不同手机型号的不同分辨率、不同尺寸终端无法适配的问题，进一步减少代码的冗余和再次开发。
4、 研究移动端公用组件的封装
基于bootstrap框架下一些组件封装的有限，通过对时间插件(datatime)、弹窗插件(dialog)、图形插件(echarts)、下拉刷新上拉加载插件(Refresh)、滑动插件(swiper)、省市区选择 (citypicker) 插件、提示信息插件(UED)等一些插件进行封装，按需调用，按需加载，以做到不同页面引用不同的插件，实现组件的调用，大大减少了前端开发人员的时间，同时也提高了用户体验。
这里，我们就拿其中一个插件——弹窗来讲解
先给大家看看效果图吧
弹窗，基本上每个应用都会用到，而各式各样的弹窗有那么多，许多程序员，这边写一套，那边写一套，代码特别乱，这里我在网上也找了一套，自己单独整理了一下，希望大家以后使用共同的一套代码，做到简洁，简单。
前端h5代码
h5页面要做到简洁，简单，不允许有单独的css和js逻辑代码（下面一句css代码是为了测试使用）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<title>首页</title>
<meta charset="utf-8" />
<style>.col-xs-6 {
padding: 10px 1px;
}</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6"><button class="btn has-hover input-reverse-tofull">默认的弹窗</button></div>
<div class="col-xs-6"><button class="btn btn-success has-hover">success</button></div>
<div class="col-xs-6"><button class="btn btn-primary has-hover">primary</button></div>
<div class="col-xs-6"><button class="btn btn-danger has-hover">danger</button></div>
<div class="col-xs-6"><button class="btn btn-warning has-hover">warning</button></div>
<div class="col-xs-6"><button class="btn btn-success has-hover">可设置背景色</button></div>
<div class="col-xs-6"><button class="btn btn-danger has-hover">自定义标题、描述</button></div>
<div class="col-xs-6"><button class="btn btn-danger has-hover">点后回调</button></div>
<div class="col-xs-6"><button class="btn has-hover input-reverse-tofull">box-shadow</button></div>
<div class="col-xs-6"><button class="btn btn-success has-hover">box-shadow</button></div>
<div class="col-xs-6">
<button class="btn btn-primary has-hover">box-shadow</button>
</div>
<div class="col-xs-6"><button class="btn btn-primary has-hover">无进入动画</button></div>
<div class="col-xs-6"><button class="btn btn-warning has-hover">单个按钮</button></div>
<div class="col-xs-6">
<button type="button" class="btn btn-info" id="btn-modal">bootstrap弹窗</button>
</div>
<div class="col-xs-6">
<button type="button" class="btn btn-info" >无标题</button>
</div>
</div>
</div>
<script type="text/html" id="modal-tpl">
<div id="dialogContent">这里是用户获取到的内容,获取的内容，可直接设置在这里，然后在页面显示</div>
</script>
<script>var basepath = "../../";//定义当前目录的位置（如果全部在根目录的话，则不需要定义）</script><!--1、首先加载sea.js 我们使用的是模块化来加载文件-->
<script src="../../js/modules/sea.js"></script>
<!--2、然后加载配置项-->
<script src="../../config.js"></script>
<!--3、最后使用seajs.use来加载当前需要加载的模块-->
<script>seajs.use("../js/dialogs");</script>
</body>
</html>上面代码，是用我的通用框架代码，大家如果用到弹窗，可直接引用dialog.js 、dialog.css、jquery.js和dialogtest.js即可
dialogtest.js代码如下
define(function (require) {
require("bootstrap");//加载bootstrap
require('dialog');//加载弹窗
require('dialogcss');//加载弹窗
var modal = new Modal({
title: '测试案例',
content: $('#modal-tpl').html(),
width: "90%",
onOk: function () {
//操作
alert("你点击了确定");
},
onModalShow: function () {
//弹窗初始化操作
}
});
$(".btn").each(function (index) {
$(this).on("click", function () {
if(index==0)
{
$('body').dailog({ type: 'defalut' });
}else if(index==1)
{
$('body').dailog({ type: 'success' })
}
else if (index == 2) {
$('body').dailog({ type: 'primary' })
}
else if (index == 3) {
$('body').dailog({ type: 'danger' })
}
else if (index == 4) {
$('body').dailog({ type: 'warning' })
}
else if (index ==5) {
$('body').dailog({ type: 'success', maskBg: 'rgba(33,11,22,0.5)' })
}
else if (index ==6) {
$('body').dailog({
type: 'danger', title: '我是自定义标题',
discription: '这里是自定义的描述，可以写上你的描述或者他的描述，总之可以写很多文字，你自己看着办吧'
}, function (ret) {
if (ret.index == 0)
{
alert("你点击了确定按钮");
} else
{
alert("你点击了取消操作");
}
console.log("信息为："+JSON.stringify(ret));
})
} else if (index ==7) {
$('body').dailog({
type: 'danger', title: '错误提示',
discription: '这里是自定义的描述，可以写上你的描述或者他的描述，总之可以写很多文字，你自己看着办吧',
isInput: true
}, function (ret) {
console.log(ret);
if (ret.index === 0)
{
alert('你点击的是第' + ret.index + '个按钮,状态:' + ret.input.status + ';输入的值为:' + ret.input.value)
};
});
} else if (index == 8) {
$('body').dailog({ type: 'defalut', showBoxShadow: true })
} else if (index ==9) {
$('body').dailog({ type: 'success', showBoxShadow: true, maskBg: '#fff' })
} else if (index == 10) {
$('body').dailog({ type: 'primary', showBoxShadow: true, maskBg: '#ccc' })
} else if (index == 11) {
$('body').dailog({ type: 'primary', showBoxShadow: true, animateStyle: 'none' })
} else if (index == 12) {
$('body').dailog({
type: 'warning', showBoxShadow: true, animateStyle: 'none',
bottons: ['确定'], discription: '也许有点问题!'
})
}else if(index==13)
{
modal.open();
} else if (index == 14) {
$('body').dailog({ type: 'defalut',showBoxShadow: true, animateStyle: 'none',isnobutton:false,
bottons: ['关闭'], discription: '也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题!'
});
}
})
})
})Atas ialah kandungan terperinci 前端框架-弹窗的研究. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Cara menggunakan Vue untuk melaksanakan kesan tetingkap timbul
Sep 22, 2023 am 09:40 AM
Cara menggunakan Vue untuk melaksanakan kesan tetingkap timbul memerlukan contoh kod khusus Dalam beberapa tahun kebelakangan ini, dengan pembangunan aplikasi web, kesan tetingkap timbul telah menjadi salah satu kaedah interaksi yang biasa digunakan di kalangan pembangun. Sebagai rangka kerja JavaScript yang popular, Vue menyediakan fungsi yang kaya dan kemudahan penggunaan, dan sangat sesuai untuk melaksanakan kesan tetingkap timbul. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan kesan tetingkap timbul dan memberikan contoh kod khusus. Pertama, kita perlu mencipta projek Vue baharu menggunakan alat CLI Vue. hujung terbuka
Apakah yang perlu saya lakukan jika tiada peringatan timbul untuk acara kalendar dalam Win10 Bagaimana untuk memulihkan jika peringatan acara kalendar hilang dalam Win10?
Jun 09, 2024 pm 02:52 PM
Kalendar boleh membantu pengguna merekodkan jadual anda dan juga menetapkan peringatan Walau bagaimanapun, ramai pengguna bertanya apa yang perlu dilakukan jika peringatan acara kalendar tidak muncul dalam Windows 10? Pengguna boleh menyemak status kemas kini Windows dahulu atau mengosongkan cache Windows App Store untuk melaksanakan operasi. Biarkan tapak ini dengan teliti memperkenalkan kepada pengguna analisis masalah peringatan acara kalendar Win10 yang tidak muncul. Untuk menambah acara kalendar, klik program "Kalendar" dalam menu sistem. Klik butang kiri tetikus pada tarikh dalam kalendar. Masukkan nama acara dan masa peringatan dalam tetingkap pengeditan, dan klik butang "Simpan" untuk menambah acara. Menyelesaikan masalah peringatan acara kalendar win10 tidak muncul
Apakah maksud h5?
Aug 02, 2023 pm 01:52 PM
H5 merujuk kepada HTML5, versi terkini HTML H5 ialah bahasa penanda yang berkuasa yang menyediakan pembangun dengan lebih banyak pilihan dan ruang kreatif Kemunculannya menggalakkan pembangunan teknologi Web dan menjadikan interaksi dan kesan halaman web lebih Cemerlang, sebagai teknologi H5. secara beransur-ansur matang dan menjadi popular, saya percaya ia akan memainkan peranan yang semakin penting dalam dunia Internet.
Bagaimana untuk membuka tetingkap timbul pelayar 360
Mar 28, 2024 pm 09:31 PM
Tetingkap timbul boleh dibuka dan digunakan sendiri dalam Pelayar 360 Sesetengah pengguna tidak tahu cara membuka tetingkap timbul dalam Pelayar 360 Mereka hanya perlu menyahtanda kotak dalam tetapan lanjutan untuk tidak membenarkan mana-mana tapak web memaparkan pop -up windows. Tetingkap pop timbul ini Membuka pengenalan kaedah tetapan akan memberitahu anda kaedah operasi khusus Berikut ialah pengenalan terperinci, jadi sila lihat. Bagaimana untuk membuka tetingkap timbul 360 Pelayar Jawapan: Nyahtanda kotak dalam tetapan lanjutan untuk tidak membenarkan mana-mana tapak web memaparkan tetingkap pop timbul: 1. Buka Penyemak Imbas 360 dan klik [Settings ikon ] di bahagian atas sebelah kanan. 2. Pilih [Pilihan]. 3. Klik [Tetapan Lanjutan] dalam senarai di sebelah kiri. 4. Nyahtanda [Jangan benarkan mana-mana tapak web memaparkan tetingkap timbul].
Bagaimana untuk menyelesaikan masalah tetingkap timbul Win11 yang tidak boleh ditutup
Dec 22, 2023 pm 05:13 PM
Saya percaya bahawa apabila menggunakan komputer, kita semua bermasalah dengan tetingkap pop timbul yang muncul secara tidak sengaja Terutama selepas mengemas kini sistem, kita juga menghadapi masalah bahawa tetingkap timbul win11 tidak boleh ditutup tutup sahaja dalam pengurus tugas. Penyelesaian kepada masalah bahawa tetingkap pop timbul win11 tidak boleh ditutup: 1. Mula-mula tekan kombinasi kekunci "Win+R" pada papan kekunci untuk membuka Run. 2. Kemudian masukkan “msconfig” dan tekan Enter untuk menjalankan. 3. Kemudian masukkan "Startup" dan klik "Open Task Manager" 4. Kemudian pilih aplikasi yang muncul di bawah pilihan permulaan. 5. Akhir sekali, klik "Lumpuhkan" di sudut kanan bawah.
Bagaimana untuk membezakan antara H5, WEB front-end, big front-end dan WEB full stack?
Aug 03, 2022 pm 04:00 PM
Artikel ini akan membantu anda membezakan dengan cepat antara H5, bahagian hadapan WEB, bahagian hadapan yang besar dan timbunan penuh WEB. Saya harap ia akan membantu rakan yang memerlukan.
Mengapakah pengguna win11 terus menerima pop timbul kawalan akaun?
Jan 08, 2024 am 11:30 AM
Kadang-kadang apabila kami membuka perisian atau program, kami akan mendapati bahawa kawalan akaun pengguna win11 terus muncul, tetapi kami tidak tahu sebabnya, ini adalah cara perlindungan sistem untuk mengelakkan kami daripada diceroboh oleh perisian yang tidak baik. Mengapa kawalan akaun pengguna win11 terus muncul: A: Kerana kawalan akaun pengguna win11 dihidupkan Selepas ia dihidupkan, sistem akan terus muncul untuk mengingatkan anda untuk melindungi keselamatan komputer dan mengelakkannya daripada diceroboh oleh. perisian yang buruk. Kawalan akaun pengguna Win11 terus muncul penyelesaian 1. Jika kami merasakan ia amat menyusahkan untuk terus muncul, kami ingin menutupnya. 2. Kemudian anda boleh klik pada "Menu Mula" di bahagian bawah 3. Kemudian cari dan buka "Tukar Tetapan Kawalan Akaun Pengguna".
Apakah yang perlu saya lakukan jika tetingkap pop timbul sentiasa muncul dalam Win11 Bagaimana untuk menyelesaikan masalah tetingkap timbul apabila membuka perisian dalam Win11?
Mar 01, 2024 am 08:43 AM
Apabila menggunakan sistem Win11, kadangkala tetingkap pop timbul akan muncul apabila membuka perisian tertentu, yang akan menjejaskan pengalaman pengguna. Artikel ini akan memperkenalkan cara menyelesaikan masalah tetingkap timbul apabila membuka perisian dalam Win11, dan membantu pengguna menyelesaikan masalah ini. Kaedah 1: 1. Tekan kombinasi kekunci [Win+S], atau klik [Ikon Carian] di sebelah ikon mula pada bar tugas Dalam carian Windows yang dibuka, masukkan [Panel Kawalan] dalam kotak carian, dan kemudian klik untuk membuka sistem yang diberikan Padanan terbaik [Aplikasi Panel Kawalan]; Tetingkap penyelenggaraan, klik Sebelah kiri [Tukar Tetapan Kawalan Akaun Pengguna];
