javascript构思的简单介绍

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

javascript 创建 easyui panel后怎么设置其为easyui-layout布局好继续用Js在生成的panel里布局

创建了控件后可能发现并没有生效

这个时候就需要用easyui 的解析

$.parser.parse()

举个例子：

var odiv = 'div class="easyui-accordion" style="width:300px" id="tt"div title="项目管理"1111111111/divdiv title="角色管理"2222222222/div/div';

$("body").append(odiv);

$.parser.parse($("#tt").parent());

//$.parser.parse($("#tt")) 这样是不对的因为这样只找到了手风琴的两个子元素而没有吧 class="easyui-accordion" 找到

相关问答

Q1: js吸顶效果与布局

项目中常用的吸顶效果，如果页面没有固定定位的元素是比较容易实现的，但是如果页面结构比较复杂会有兼容性问题

常见兼容性问题：吸顶元素无法固定，会随着页面滚动抖动

解决方案：页面整体为弹性布局，中间加载部分自适应高度，总体结构为顶部固定+内容+底部固定

注意整体弹性布局的时候如果要实现吸顶效果，必须将定位元素放到flex=1元素的外层，吸顶的元素需要用两个div，一个是正常显示的，一个是滚动到一定高度固定到顶部的

html:

div class="wrap" id="wrapId"

div class="isFixed" v-if="is_fixed"

div class="topBar" id="fixedTopFixed" ref="topBar"

div class="item" v-for="(item,index) in barList" 吸顶内容/div

/div

div class="flexWrap" :class="is_fixed? 'wrapTop' : 'flex'"

div class="myScroll" v-infinite-scroll="loadMore" infinite-scroll-throttle-delay="500" infinite-scroll-immediate-check="true" infinite-scroll-disabled="busy" infinite-scroll-distance="50"

div class="flexContent"

div class="top" ref="top"

div class="banner"img src="../../../assets/images/文件名/banner.jpg" alt="" srcset=""/div

div class="topBar" id="fixedTop" ref="topBar" v-show="!is_fixed"

div class="item" v-for="(item,index) in barList" @click="tab(index,item)"

不吸顶时展示的内容

/div

div class="scrollContent" id="wrap-content" ref="contentH"

div class="memberList" v-show="infoList.length0" id="content"

div class="myScroll" v-infinite-scroll="loadMore" infinite-scroll-throttle-delay="500" infinite-scroll-immediate-check="true" infinite-scroll-disabled="busy" infinite-scroll-distance="10"

div class="memberItem" v-for="(item,index) in infoList"

加载内容

/div

div class="loading" v-if="loading"

span id="load-text"{{loadText}}/span

/div

div class="empty" v-show="noData"最新达成情况正在更新中...请稍后再来～/div

/div

div class="footer"底部固定/div

/div

js:

data: {

return {

busy: false,

pageNum: 1,

pageSize: 10,

loading: false，

noData: false,

infoList: []

}

mounted() {

!--监听滚动--

that.$nextTick(() = {

let scrollDOM = document.querySelector('.flexContent')

scrollDOM.addEventListener('scroll',that.handleScroll)

})

methods: {

handleScroll () {

let scrollDOM = document.querySelector('.flexContent')

let scrollTop = scrollDOM.scrollTop;

!--计算滚动高度--

let clientHeight = document.documentElement.clientHeight

if (scrollTop document.querySelector('.banner').offsetHeight) {

this.is_fixed = true;

} else {

this.is_fixed = false;

}

!--//触发加载--

loadMore() {

if(this.pageNumthis.pages) {

this.loading = true

this.pageNum+=1

this.busy = true

this.loadData(接口参数,this.pageNum)

}

//加载时触发的接口调用

loadData() {

api.XXX({},function(success,data,err){

if(success) {

if(data.status==200) {

//加载逻辑判断

if(data.body.list.length0 pageNum0){

that.infoList = that.infoList.concat(data.body.list)

that.loading = false

}

if(pageNum==data.body.pages || data.body.list20) {

that.loading = true

that.loadText = '没有更多数据了'

}

if(pageNum==1 data.body.list.length==0) {

that.noData = true

that.infoList = []

}

})

}

css:

.isFixed {

width: 100%;

height: 1rem;

position: absolute;

top: 0;

left: 0;

z-index: 100;

}

.myScroll {

height: 100%;

}

.wrap {

width: 7.5rem;

margin: auto;

height: 100%;

overflow: hidden;

display: flex;

flex-direction: column;

}

.flex {

flex: 1;

}

.wrapTop {

padding-top:0.45rem;

}

.flexWrap {

width: 100%;

height: 100%;

}

.flexContent {

width: 100%;

height: 100%;

display: flex;

flex-direction: column;

overflow: scroll;

-webkit-overflow-scrolling: touch;

}

.top {

.banner {

position: relative;

img {

width: 100%;

display: block;

}

.month {

position: absolute;

bottom: 0.33rem;

left: 0.45rem;

color: #fff;

font-size: 0.45rem;

}

.scrollContent {

width: 100%;

background: #fff;

flex: 1;

-webkit-overflow-scrolling: touch;

.memberList {

height: 100%;

padding-top: 0.2rem;

}

.footer {

position: fixed;

bottom: 0;

width:7.5rem;

margin: auto;

height:auto;

background:rgba(0,0,0,.7);

}

Q2: 北大青鸟java培训：7大优秀的JavaScript库？

现在有很多各种各样的JavaScript库，但这里将介绍7个很优秀的可用于你下一个JavaScript项目的库。

仪表盘是用于目标或业务流程的视觉指示工具，也用于切割杂乱无章的数据，从而分割出要点的重要工具。

它可帮助评估信息，并及时做出正确的决定。

实时可视化的仪表盘由图标、测绘图、图形符号，以及数据表格等组成。

目前有一些开源或商业的库用于创建仪表盘。

在本文中，我们将会展示一些可帮助创建美观且可自定义的仪表盘的JavaScript库。

1.Gridster.jsGridster是一个jQuery插件，可以从跨多个列的元素构建直观的可拖拽布局。

它可以让你从网格中动态添加或删除小部件，甚至可以获得一个具有所有小部件位置的对象的JavaScript数组，从而可以在以后使用这些数组来加载小部件。

2.angular-gridster这是一个用于AngularJS的格子状小部件的实现。

它具有jQuerygridster插件等功能，也具有一些其他的功能。

它完全使用Angular指令重写，还可以使用Angular的数据绑定功能。

3.gridstack.jsgridstack.js是一个用于小部件布局的jQuery插件，灵感来自gridster.js。

这是一个可拖放的多列网格，可让你构建可拖拽的响应式Bootstrapv3的友好布局，它还适用于knockout.js,angular.js和触摸设备。

4.jQueryGridlyGridly是一个jQuery插件，电脑培训建议可用于拖放以及在网格中调整大小。

5.PackeryPackery是一个JavaScript库和jQuery插件，可用于生成无缝且可拖拽的布局。

它使用bin-packing算法来填充空隙。

它适合用于创建一个可拖拽的仪表盘和无缝的“砖石图像画廊”布局。

Q3: js布局有道白条怎么去掉？

这个是你这个的背景，后面的0.3为透明度，你设置为0 或者去掉它就可以了

Q4: JS代码谢谢

!DOCTYPE html

html

head

title学号：12345 姓名：张二蛋/title

meta charset="utf-8"

style type="text/css"

.body {

width: 100%;

height: 100%;

}

.body-scorll {

width: 100%;

height: 100%;

background-color: blue;

color: white;

text-align: center;

}

.select-answer {

height: 100%;

display: inline-block;

}

.select-question-text {

width: 100%;

height: 100%;

margin: 10px 0px;

}

.last-answer {

display: inline-block;

width: 10px;

height: 10px;

border-radius: 8px;

border-color: black;

border: solid 1px;

margin: 0px 10px;

}

.last-answer.selected {

background-color: red;

}

.myanswer-text {

margin-left: 20px;

}

.result-item {

width: 100%;

height: 100%;

margin-top: 10px;

}

.result-pane {

display: inline-block;

margin-left: 20px;

}

.result-answer {

width: 30px;

}

.result {

position: absolute;

z-index: 99;

top: 1%;

width: 100%;

background-color: yellow;

color: black;

transform: scale(1);

transition: all 5s;

-webkit-transition: all 5s; /* Safari 和 Chrome */

transition-timing-function: ease-in;

-webkit-transition-timing-function: ease-in; /* Safari 和 Chrome */

}

/style

/head

body

div class="body-scorll"

div class="select-question-item"

div class="select-question-text"1、问题一的答案是什么？/div

div class="select-question-answer"

div class="select-answer" type="A" num='1'

span class="last-answer answer-1" type="A"/spanspan答案A/span

/div

div class="select-answer" type="B" num='1'

span class="last-answer answer-1"/spanspan答案B/span

/div

div class="select-answer" type="C" num='1'

span class="last-answer answer-1"/spanspan答案C/span

/div

div class="select-answer" type="D" num='1'

span class="last-answer answer-1"/spanspan答案D/span

/div

div class="select-question-item"

div class="select-question-text"2、问题二的答案是什么？/div

div class="select-question-answer"

div class="select-answer" type="A" num="2"

span class="last-answer answer-2"/spanspan答案A/span

/div

div class="select-answer" type="B" num="2"

span class="last-answer answer-2"/spanspan答案B/span

/div

div class="select-answer" type="C" num="2"

span class="last-answer answer-2"/spanspan答案C/span

/div

div class="select-answer" type="D" num="2"

span class="last-answer answer-2"/spanspan答案D/span

/div

div class="select-question-item"

div class="select-question-text"3、问题三的答案是什么？/div

div class="select-question-answer"

div class="select-answer" type="A" num="3"

span class="last-answer answer-3"/spanspan答案A/span

/div

div class="select-answer" type="B" num="3"

span class="last-answer answer-3"/spanspan答案B/span

/div

div class="select-answer" type="C" num="3"

span class="last-answer answer-3"/spanspan答案C/span

/div

div class="select-answer" type="D" num="3"

span class="last-answer answer-3"/spanspan答案D/span

/div

div class="select-question-item"

div class="select-question-text"4、问题四的答案是什么？/div

div class="select-question-answer"

div class="select-answer" type="A" num="4"

span class="last-answer answer-4"/spanspan答案A/span

/div

div class="select-answer" type="B" num="4"

span class="last-answer answer-4"/spanspan答案B/span

/div

div class="select-answer" type="C" num="4"

span class="last-answer answer-4"/spanspan答案C/span

/div

div class="select-answer" type="D" num="4"

span class="last-answer answer-4"/spanspan答案D/span

/div

div class="select-question-item"

div class="select-question-text"5、问题五的答案是什么？/div

div class="select-question-answer"

div class="select-answer" type="A" num="5"

span class="last-answer answer-5"/spanspan答案A/span

/div

div class="select-answer" type="B" num="5"

span class="last-answer answer-5"/spanspan答案B/span

/div

div class="select-answer" type="C" num="5"

span class="last-answer answer-5"/spanspan答案C/span

/div

div class="select-answer" type="D" num="5"

span class="last-answer answer-5"/spanspan答案D/span

/div

div class="select-question-item"

div class="select-question-text"6、问题六的答案是什么？/div

div class="select-question-answer"

div class="select-answer" type="A" num="6"

span class="last-answer answer-6"/spanspan答案A/span

/div

div class="select-answer" type="B" num="6"

span class="last-answer answer-6"/spanspan答案B/span

/div

div class="select-answer" type="C" num="6"

span class="last-answer answer-6"/spanspan答案C/span

/div

div class="select-answer" type="D" num="6"

span class="last-answer answer-6"/spanspan答案D/span

/div

div class="select-question-item"

div class="select-question-text"7、问题七的答案是什么？/div

div class="select-question-answer"

div class="select-answer" type="A" num="7"

span class="last-answer answer-7"/spanspan答案A/span

/div

div class="select-answer" type="B" num="7"

span class="last-answer answer-7"/spanspan答案B/span

/div

div class="select-answer" type="C" num="7"

span class="last-answer answer-7"/spanspan答案C/span

/div

div class="select-answer" type="D" num="7"

span class="last-answer answer-7"/spanspan答案D/span

/div

div class="myanswer-item"

你的答案：div class="myanswer"/div

/div

div class="result-item"

div请录入正确答案/div

div class="result-pane"第一题input class="result-answer result-1"/div

div class="result-pane"第二题input class="result-answer result-2"/div

div class="result-pane"第三题input class="result-answer result-3"/div

div class="result-pane"第四题input class="result-answer result-4"/div

div class="result-pane"第五题input class="result-answer result-5"/div

div class="result-pane"第六题input class="result-answer result-6"/div

div class="result-pane"第七题input class="result-answer result-7"/div

/div

button class="result-btn"评分/button

div class="result"/div

/div

/body

script src=""

/script

script

$(document).ready(function(){

var answer = [0,0,0,0,0,0,0];

$('.select-answer').on('click', function() {

var select_answer = $(this).attr('type');

var number = $(this).attr('num');

$('.answer-' + number).removeClass('selected');

$(this).find('.answer-' + number).addClass('selected');

answer[number - 1] = select_answer;

loadAnswer(answer);

});

$('.result-btn').on('click', function() {

var result = [0,0,0,0,0,0,0];

var resultHtml = 'span class="myanswer-text"学号：12345 姓名：张二蛋/span';

var resultSum = 0;

for(var i = 0; i 7; i++) {

result[i] = $('.result-' + (i + 1)).val();

if(result[i] != answer[i]) {

resultHtml += 'span class="myanswer-text"第' + (i + 1) + '题错误，正确答案为：'+ result[i] +'/span';

resultSum++;

}

if(resultSum == 0) {

resultHtml += 'span class="myanswer-text"恭喜你全部答对/span';

}

else {

resultHtml += 'div class="myanswer-text"你一共答错了'+ resultSum + '道题/div';

}

$('.result').html(resultHtml);

$('.result').css({

'top': '90%'

});

var loadAnswer = function(answer) {

var myanswerHtml = '';

for(var i in answer) {

var numAnswer = parseInt(i) + 1;

if(answer[i] == 0) {

}

else if(i == 1 || i == 4) {

myanswerHtml += 'span class="myanswer-text"第' + numAnswer +'题答案是' + answer[i] + '/span';

}

else {

myanswerHtml += 'span class="myanswer-text"第' + numAnswer +'题答案是*/span';

}

$('.myanswer').html(myanswerHtml);

}

});

/script

/html

Q5: 我现在看javascript代码能看懂可是一做东西脑子里一篇空白，而且写的代码总是出错，有什么办法可以解决。

编程重要的思路，首先有个目标，你要干什么，然后去构思你编程的思路（这个跟编程经验也有关），哪些代码需要预加载，哪些是需要触发方式，哪些代码可共用，共用的要提出来，整条思路清晰，代码的可读性才高，否则你早上写的，中午吃个饭，晚上就记不住逻辑了，第二天修改更是摸黑走路了。某个功能不会可以google一下（作为程序员还是先google再baidu），这是快速的找到解决方法，其次可以查看帮助文档，养成经常看帮助文档的好习惯，毕竟帮助文档写的东西都是准确的、正确的，网上的代码不全靠得住，有好有烂，我曾经遇到一个全选/取消全选写法的问题，有人给我20-30行代码，但最后我只用了5行代码就完成了。至于调试可以使用ie 9、10的F12查看，新手不建议使用火狐的FireBug，很多功能完全看不懂。