Microsoft云工程师 - SharePoint,Office 365,Azure,Dotnet,Agenular,JavaScript。
Microsoft云工程师 - SharePoint,Office 365,Azure,Dotnet,Agenular,JavaScript。

jquery.

你可能不需要jquery– VIDEO

今天我正在看http://youmightnotneedjquery.com/以及如何适用于SharePoint UI元素。  查看下面的视频和代码样本。   我们通常需要隐藏简单的页面元素,可以利用更新的浏览器JS功能,以适用于选择器和foreach等常见功能。

享受! 

shades_smile.

 

视频

你可能不需要jquery– VIDEO杰夫琼斯 Vimeo. .

 

截屏

2016-07-29_17-14-29

代码 - HTML.


代码– CSS

/* CSS method */

#ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_csr_sbox {
    display:none;
}
a.ms-core-listMenu-item {
    display: none;
}

代码– JS

// JS approach - http://youmightnotneedjquery.com/

var elements = document.querySelectorAll('a.ms-core-listMenu-item');
Array.prototype.forEach.call(elements, function(el, i){
    el.style.display = 'none';
});

表格库JS.–InfoPath替换?

Microsoft宣布的InfoPath将于2023年消失。 它有意义,他们有很好的理由。  但是,表格开发人员对可用选项混淆。 我对InfoPath路线图有一个想法,并在下面的评论中感谢您的反馈推特 (@spjeff)请。

为什么不使用JavaScript创建类似的XML文档?


当人们说“InfoPath”时,它们通常是指下面概述的三部分系统。  InfoPath严格来说是表单输入经验。 表单库保存保存的XML输出。 然后,SharePoint Designer可以根据状态更改触发电子邮件通知。

 图像

 

InfoPath.作为表单输入体验的基于服务器回发和点网体系结构具有许多限制。 只需尝试一个大型重复表,并观看慢速“加载......”体验,因为用户点击和规则向SharePoint Ifs后端回发。  HTML5和JavaScript为客户端验证,异步加载,移动触摸输入,响应式布局和高级渲染提供了新的rameworks,如jqueryui / bootstrap / Angular。  这是令人敬畏的表单输入技术!   但是,通常选择InfoPath以易于使用和“无代码”。  让我们考虑谈话如何谈论......


开发人员对话

dev1.> “嘿,你听说微软在2023年退休的InfoPath吗?”

dev2.> “是的,但这就是我们今天所拥有的一切,所以我会继续使用它。 不确定还有什么用。 肯定会很好拥有HTML5和更酷的输入体验。“

dev1.>“确实。 从头开始编码是很多工作。 我真的不想用拼写错误的休息连接来混淆,或者用SVC / ODATA制作SVC / ODATA的SVC / ODATA的SQL数据库。  My head hurts.”

dev2.> “真实,但我想我们会先制作一个模式,然后稍后形成模式。”

dev1.>“infopath保存为XML。   I like XML. 它适用于我们所有系统的导入/导出。  我们可以保留XML但漏洞InfoPath吗?“

dev2.>“很酷的想法,但我不确定如何。”


为什么用浴水扔掉婴儿?   

 

我们不能使用HTML5 / JS进行卓越的表单,然后保存回窗体库,以利用SharePoint进行存储,视图和工作流程?   现在这只是一个想法。 我还没有工作原型来表明,但认为将JSON转换为XML并上传是很简单的。    InfoPath仍然可以使用,但仅由开发人员进行架构(定义XML结构)。  最终用户永远不会看到它。

 

请在下面发表评论,如果您认为这可能是实用的,请告诉我。  Thanks!  

 微笑

 

formlibraryjs.

 


参考

圣诞节快乐– HTML5, JS, and CSS3

我想感谢你们所有人阅读我的博客,祝你节日快乐。  通过关于HTML5的考试070-480后,似乎是练习新技能并画出的好时机这里的圣诞树。   Enjoy!  

 微笑

 

它应该如下所示的屏幕截图:

 图像

代码背后:


 

实时工作演示:



圣诞节快乐!

jquery手风琴 - 展开崩溃所有

我在许多网站上看了很多线程和帖子,并且无法找到为我工作的代码。其中一些是关闭的。其他人越野车。下面我概述了适合我的需要的jQuery代码,我希望你也能找到它的帮助。

此示例部署到SharePoint页面,因此“/_layouts/images/plus.gif”用于利用加号/减号图标的OOTB图形。

完整的示例源下载(手风琴。73KB)

 

 图像

 

 图像

 

父.html.

Expand All

First Header

first body

Second Header

second body

Third Header

third body

支持.js.

// bind to accordion object
$(document).ready(function(){
	$('#container').accordion({
		header: “h3?
	});
});

// actions taken upon clicking the expand all (collapse all) link
$('#container #expand').click( function() {
	// if link was expand then show and toggle text
	var currHTML = $('#container #expand').html();
	if (currHTML.indexOf(“Expand All”)>0) {
		$('#container .section').slideDown();
		$('#container #expand').html(“
Collapse All”); } else { // if link was collapse then hide and toggle text $('#container .section').slideUp(); $('#container .section').each(function(i){ if (i==0) $(this).slideDown(); }); $('#container #expand').html(“
Expand All”); } });
返回顶部▲返回顶部▲